Android中TabHost主界面实现
在App设计中通常会设计一个主界面作为进入其它界面的入口,一般会选择选项卡也叫页卡Tab来实现.
今天我们来探讨下Android应用程序中一个古老的实现方式:TabActivity+TabHost, 后面在分析FramgentActivity实现方式.
我们看到是一个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>
实现效果
转载请注明来源:Android中TabHost主界面实现