Android中TabHost主界面实现

周sir | 2015年7月3日 | Android UI界面 | 0 条评论 | 1818

在App设计中通常会设计一个主界面作为进入其它界面的入口,一般会选择选项卡也叫页卡Tab来实现.
今天我们来探讨下Android应用程序中一个古老的实现方式:TabActivity+TabHost, 后面在分析FramgentActivity实现方式.

首先我们来看下Tab选项卡的真面目.

我们看到是一个APP的主界面，TAB页卡位于屏幕底部，我们点击页卡后切换到不同界面.

主屏幕被分成了三个区域:标题区域，页卡内容区域，页卡区域.

分析完界面构造后接着我们看下具体如何实现
1.布局文件

  <?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" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@android:color/white" >
        </TabWidget>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@android:id/tabs" >
        </FrameLayout>
    </RelativeLayout>

</TabHost>

其中TabWidget表示页卡区域,FrameLayout布局为页卡内容区域.

2.代码

@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		setContentView(R.layout.activity_tab1_layout);

		TabHost tabHost = getTabHost();

		TabSpec tabSpec1 = tabHost.newTabSpec("tab1");
		tabSpec1.setIndicator("页卡1");
		tabSpec1.setContent(new Intent(context, RadioButtonActivity.class));

		TabSpec tabSpec2 = tabHost.newTabSpec("tab2");
		tabSpec2.setIndicator("页卡2");
		tabSpec2.setContent(new Intent(context, LinerLayoutAcitiy.class));

		TabSpec tabSpec3 = tabHost.newTabSpec("tab3");
		tabSpec3.setIndicator("页卡3");
		tabSpec3.setContent(new Intent(context, SimpleListActivity.class));

		tabHost.addTab(tabSpec1);
		tabHost.addTab(tabSpec2);
		tabHost.addTab(tabSpec3);

	}

经过上述操作实现效果为系统效果,为了得到更好看的页卡，需要自己定义一个页卡View,通过setIndicator(View view)方法设置.

自定义View方法

private View createIndicatorView(int tab) {
		View view = mLayoutInflater.inflate(R.layout.view_tab_item_layout, null);

		TextView titleTxt = (TextView) view.findViewById(R.id.tab_title);
		ImageView iconImg = (ImageView) view.findViewById(R.id.tab_icon);

		switch(tab){
		case HOME_TAB:
			titleTxt.setText("首页");
			iconImg.setImageResource(R.drawable.selector_drawable_home_tab);
			break;
		case CONTENT_TAB:
			titleTxt.setText("商家");
			iconImg.setImageResource(R.drawable.selector_drawable_content_tab);
			break;
		case MORE_TAB:
			titleTxt.setText("更多");
			iconImg.setImageResource(R.drawable.selector_drawable_set_tab);
			break;
		}

		return view;
	}

准备相关图片资源,页卡图标selector文件定义:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/ic_menu_more_on" android:state_pressed="true"></item>
    <item android:drawable="@drawable/ic_menu_more_on" android:state_selected="true"></item>
    <item android:drawable="@drawable/ic_menu_more_off"></item>

</selector>

页卡文字selector文件定义:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" android:color="@color/green_tab"></item>
    <item android:state_selected="true" android:color="@color/green_tab"></item>
    <item android:color="@color/darker_gray_tab"></item>

</selector>

页卡View布局文件定义

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:paddingTop="3dp"
    android:paddingBottom="3dp">

    <TextView
        android:id="@+id/tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@drawable/selector_color_home_tab"
        android:text="首页" />

    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/selector_drawable_home_tab"/>

</LinearLayout>

实现效果