首页 > 代码库 > 底部菜单栏(一) TabHost实现

底部菜单栏(一) TabHost实现

需求:使用TabHost实现底部菜单栏;

效果图:

实现分析:

1.目录结构:

代码实现:

1.activity_main.xml

<?xml version="1.0" encoding="utf-8"?><TabHost xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@android:id/tabhost"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical" >        <FrameLayout            android:id="@android:id/tabcontent"            android:layout_width="match_parent"            android:layout_height="0dp"            android:layout_weight="1" />        <TabWidget            android:id="@android:id/tabs"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:padding="2dp"            android:layout_weight="0"            android:background="@drawable/tab_widget_background" />    </LinearLayout></TabHost>

2 activity_one.xml

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@drawable/image_01" ></FrameLayout>

3 item_tab_view.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:gravity="center"    android:orientation="vertical" >    <ImageView        android:id="@+id/image_icon"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:padding="3dp" />    <TextView        android:id="@+id/text_name"        style="@style/item_tab_text_style"        android:layout_width="wrap_content"        android:layout_height="wrap_content" /></LinearLayout>

4 tab_background_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/tab_item_p" android:state_pressed="true"/>    <item android:drawable="@drawable/tab_item_d" android:state_selected="true"/></selector>

5 style.xml

    <style name="item_tab_text_style">        <item name="android:textSize">10.0dip</item>        <item name="android:textColor">#ffffffff</item>        <item name="android:ellipsize">marquee</item>        <item name="android:singleLine">true</item>    </style>

6 Constant.java

package com.jjc.demo;/** * @author ThinkPad *    功能描述:常量工具类 */public class Constant {        public static final class ConValue{                /**         * Tab选项卡的图标         */        public static int mImageViewArray[] = {            R.drawable.tab_icon1,            R.drawable.tab_icon2,            R.drawable.tab_icon3,            R.drawable.tab_icon4,            R.drawable.tab_icon5        };                /**         * Tab选项卡的文字         */        public static String mTextViewArray[] = {"主页", "关于", "设置", "搜索", "更多"};                /**          * 每一个Tab界面          */         public static Class<?> mTabClassArray[] = {            ActivityOne.class,            ActivityTwo.class,            ActivityThree.class,            ActivityFour.class,            ActivityFive.class        };    }}

7 ActivityOne.java

package com.jjc.demo;import android.app.Activity;import android.os.Bundle;public class ActivityOne extends Activity{    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_one);    }}

8 MainActivity.java

package com.jjc.demo;import com.jjc.demo.Constant.ConValue;import android.app.TabActivity;import android.content.Intent;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import android.widget.TabHost;import android.widget.TabHost.TabSpec;import android.widget.TextView;public class MainActivity extends TabActivity {    private TabHost mTabHost;    private LayoutInflater mInflater;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();    }    /**     * 初始化组件     */    private void initView() {        // 实例化TabHost对象,得到TabHost        mTabHost = getTabHost();        // 实例化布局对象        mInflater = LayoutInflater.from(this);        // 得到Activity的个数        int count = ConValue.mTabClassArray.length;        for (int i = 0; i < count; i++) {            // 为每一个Tab按钮设置图标、文字和内容            TabSpec tabSpec = mTabHost.newTabSpec(ConValue.mTextViewArray[i])                    .setIndicator(getTabItemView(i))                    .setContent(getTabItemIntent(i));            // 将Tab按钮添加进Tab选项卡中            mTabHost.addTab(tabSpec);            // 设置Tab按钮的背景            mTabHost.getTabWidget().getChildAt(i)                    .setBackgroundResource(R.drawable.tab_background_selector);        }    }    /**     * 给Tab按钮设置图标和文字     */    private View getTabItemView(int index) {        View view = mInflater.inflate(R.layout.item_tab_view, null);        ImageView imageView = (ImageView) view.findViewById(R.id.image_icon);        if (imageView != null) {            imageView.setImageResource(ConValue.mImageViewArray[index]);        }        TextView textView = (TextView) view.findViewById(R.id.text_name);        textView.setText(ConValue.mTextViewArray[index]);        return view;    }    /**     * 给Tab选项卡设置内容(每个内容是一个Activity)     */    private Intent getTabItemIntent(int index) {        Intent intent = new Intent(this, ConValue.mTabClassArray[index]);        return intent;    }}

 

代码:http://pan.baidu.com/s/1lLFx8

底部菜单栏(一) TabHost实现