首页 > 代码库 > 安卓开发复习笔记——TabHost组件（实现底部菜单导航）
安卓开发复习笔记——TabHost组件（实现底部菜单导航）
什么是TabHost？
TabHost组件的主要功能是可以进行应用程序分类管理，例如：在用户使用windows操作系统的时候，经常见到如图所示的图形界面。
TabHost选项卡，说到这个组件，不得不先说一件事情，翻翻谷歌提供给我们的API，我们可以发现这样的一段话：
它告诉我们，这个组件在安卓4.0之后已经被废弃了，建议我们新的程序应该使用Fragment组件来代替它。
其实并不出乎意料，使用过TabHost的朋友应该都知道：
1、它的设计违反了Activity单一窗口原则，它可以同时加载多个Activity，然后再它们之间进行来回切换。
2、有个很致命的问题就是当我们点击别的选项时，按下Back后退键，它会使整个应用程序都退出，而不是切换到前一个选项卡，虽然我们可以在主程序里覆写OnKeyDown这个方法，但这样就会导致每一次按下Back后退键都只能回到第一个选项菜单。
但作为开发者，这个具有历史里程碑的组件，我们还是需要去掌握下，下面给几张图来看下今天要实现的效果:
下面附上代码（注释很详细）
实现TabHost有两种方式：
方式一：直接让一个Activity程序继承TabActivity类（通过getTabHost取得实例）；
方式二：定义XML布局文件利用findViewById()方法取得TagHost组件，通过setup()方法实例化并进行若干配置；
下面讲解以第二种方式为例,先看下项目结构：
1、TabHost主布局文件
activity_main.xml（为了使选项卡显示在屏幕下方，这里采用了相对布局）
1 <TabHost xmlns:android="http://schemas.android.com/apk/res/android" 2 android:id="@+id/mytabhost" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent"> 5 6 <!-- 需要一个布局管理器 --> 7 8 <RelativeLayout 9 android:layout_width="fill_parent"10 android:layout_height="fill_parent" 11 >12 13 <!--14 由于TabHost是继承于FrameLayout，所以需要一个FrameLaytout布局(内容页) ,id15 必须为tabcontent16 -->17 18 <FrameLayout19 android:id="@android:id/tabcontent"20 android:layout_width="fill_parent"21 android:layout_height="fill_parent" 22 >23 </FrameLayout>24 25 <!-- TabWidget必须标签，用来存放tab标签，且id必须为tabs -->26 27 <TabWidget28 android:id="@android:id/tabs"29 android:layout_width="fill_parent"30 android:layout_height="wrap_content"31 android:background="@drawable/tab_widget_background"32 android:layout_alignParentBottom="true"33 >34 </TabWidget>35 36 </RelativeLayout>37 38 </TabHost>
TabHost的布局的文件必须遵循下面几点：
1、所有的用于标签配置的文件，必须以“<TabHost>”为根节点；
2、为了保证标签页和标签内容显示正常（例如：标签提示要放在标签显示内容之上）则可以采用一个布局管理器进行布局（例如：LinearLayout,RelativeLayout..）
3、定义一个“<TagWidget>”的标签，用于表示整个标签容器，另外在定义此组件ID为“tabs”，表示允许加入多个标签
4、由于TabHost是FrameLayout的子类，所以要想定义标签页内容必须使用FrameLayout布局，并且标签ID为“tabcontent”
2、每个标签的布局文件
tab_layout.xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="wrap_content" 4 android:layout_height="wrap_content" 5 android:gravity="center_horizontal" 6 android:background="@drawable/tab_selector" 7 android:orientation="vertical" > 8 9 <ImageView10 android:id="@+id/image"11 android:layout_width="wrap_content"12 android:layout_height="wrap_content"13 android:padding="3dp" />14 15 <TextView16 android:id="@+id/title"17 android:layout_width="wrap_content"18 android:layout_height="wrap_content" 19 android:textColor="@android:color/white"/>20 21 </LinearLayout>
3、一个选择器，用于美观效果
tab_selector.xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <selector xmlns:android="http://schemas.android.com/apk/res/android" > 3 <item 4 android:state_pressed="true" android:drawable="@drawable/tab_item_p" 5 ></item> 6 <item 7 android:state_selected="true" android:drawable="@drawable/tab_item_d" 8 ></item> 9 10 </selector>
4、跳转Activity的布局文件（由于基本一致，这里只给出其中一个）
tabactivity.xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" > 5 6 <LinearLayout 7 android:layout_width="match_parent" 8 android:layout_height="match_parent" 9 android:orientation="vertical" >10 11 12 <TextView13 android:id="@+id/title"14 android:layout_width="wrap_content"15 android:layout_height="wrap_content" 16 android:text="我是界面1"/>17 </LinearLayout>18 19 </RelativeLayout>
5、JAVA主代码
1 package com.example.tabhosttest; 2 3 import android.app.ActivityGroup; 4 import android.content.Intent; 5 import android.os.Bundle; 6 import android.view.View; 7 import android.widget.ImageView; 8 import android.widget.TabHost; 9 import android.widget.TabHost.TabSpec;10 import android.widget.TextView;11 12 public class MainActivity extends ActivityGroup{13 14 private TabHost tabHost;//声明一个TabHost对象15 16 //资源文件17 private Class activitys[]={TabActivity1.class,TabActivity2.class,TabActivity3.class,TabActivity4.class,TabActivity5.class};//跳转的Activity18 private String title[]={"首页","搜索","设置","主题","更多"};//设置菜单的标题19 private int image[]={R.drawable.tab_icon1,R.drawable.tab_icon2,R.drawable.tab_icon3,R.drawable.tab_icon4,R.drawable.tab_icon5,};//设置菜单20 21 @Override22 protected void onCreate(Bundle savedInstanceState) {23 super.onCreate(savedInstanceState);24 setContentView(R.layout.activity_main);25 initTabView();//初始化tab标签26 27 }28 29 private void initTabView() {30 //实例化tabhost31 this.tabHost=(TabHost) findViewById(R.id.mytabhost);32 //由于继承了ActivityGroup，所以需要在setup方法里加入此参数，若继承TabActivity则可省略33 tabHost.setup(this.getLocalActivityManager());34 35 //创建标签36 for(int i=0;i<activitys.length;i++){37 //实例化一个view作为tab标签的布局38 View view=View.inflate(this, R.layout.tab_layout, null);39 40 //设置imageview41 ImageView imageView=(ImageView) view.findViewById(R.id.image);42 imageView.setImageDrawable(getResources().getDrawable(image[i]));43 //设置textview44 TextView textView=(TextView) view.findViewById(R.id.title);45 textView.setText(title[i]);46 //设置跳转activity47 Intent intent=new Intent(this, activitys[i]);48 49 //载入view对象并设置跳转的activity50 TabSpec spec=tabHost.newTabSpec(title[i]).setIndicator(view).setContent(intent);51 52 //添加到选项卡53 tabHost.addTab(spec);54 }55 56 }57 58 59 }
这里有个重载方法setIndicator()，这里是用来设置标签页：
1、public TabHost.TabSpec setIndicator(CharSequence label)
设置标题，此时无图标
2、public TabHost.TabSpec setIndicator(CharSequence label, Drawable icon)
设置标题、图标（这里的图标可以用getResources().getDrawable(int id)）来设置
3、public TabHost.TabSpec setIndicator(View view)
设置自定义view
还有个setContent(Intent intent)，这里是用来设置标签内容的，也就是我们要跳转的Activity
由于这里有5个选项卡，因此就有5个Activity，具体内容就看自己需求了，这里就不再给出
记得写完Activity要在AndroidManifest.xml配置文件中声明
1 <?xml version="1.0" encoding="utf-8"?> 2 <manifest xmlns:android="http://schemas.android.com/apk/res/android" 3 package="com.example.tabhosttest" 4 android:versionCode="1" 5 android:versionName="1.0" > 6 7 <uses-sdk 8 android:minSdkVersion="8" 9 android:targetSdkVersion="21" />10 11 <application12 android:allowBackup="true"13 android:icon="@drawable/ic_launcher"14 android:label="@string/app_name"15 android:theme="@style/AppTheme" >16 <activity17 android:name=".MainActivity"18 android:label="@string/app_name" >19 <intent-filter>20 <action android:name="android.intent.action.MAIN" />21 22 <category android:name="android.intent.category.LAUNCHER" />23 </intent-filter>24 </activity>25 <activity26 android:name="com.example.tabhosttest.TabActivity1"27 android:label="@string/app_name" >28 </activity>29 <activity30 android:name="com.example.tabhosttest.TabActivity2"31 android:label="@string/app_name" >32 </activity>33 <activity34 android:name="com.example.tabhosttest.TabActivity3"35 android:label="@string/app_name" >36 </activity>37 <activity38 android:name="com.example.tabhosttest.TabActivity4"39 android:label="@string/app_name" >40 </activity>41 <activity42 android:name="com.example.tabhosttest.TabActivity5"43 android:label="@string/app_name" >44 </activity>45 </application>46 47 </manifest>
好了，到这里底部导航菜单就实现了，试试吧~
安卓开发复习笔记——TabHost组件（实现底部菜单导航）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。