Android中TabHost主界面实现

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

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

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

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

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

[java] <?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>[/java]

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

2.代码

[java]@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);

}
[/java]

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

自定义View方法

[java]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;
}[/java]

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

[java]
<?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>
[/java]

页卡文字selector文件定义:

[java]<?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>[/java]

页卡View布局文件定义

[java]<?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>[/java]

实现效果

转载请注明来源：Android中TabHost主界面实现

本文链接地址：https://ai.zhousir.top/?p=846