TabHost
1、TabHost 可以非常方便的在窗口上放置多个标签页，每个标签页相当于获得了一个与外部容器相同大小的组件摆放区域。通过这种方式就可以在一个容器中放置更多的组件
2、与TabHost结合使用的还有如下组件：
TabWidget：代表选项卡的标签条
TabSpec：代表选项卡的一个Tab页面
3、TabHost仅仅是一个简单的容器，它提供了如下的方法用来创建、添加选项卡
①tabHost.newTabSpec（String tag） ； 创建选项卡（包括选项页面和选项标签）
注意tabHost是一个已经创建好的TabHost对象，也就是说，如果我们想要创建一个TabSpec选项卡实例的话，必须向得到一个TabHost实例，
一般我们会在布局文件中使用<TabHost.../>标签来创建TabHost的视图，那么我们仅仅需要通过使用findViewById(int)就能够得到当前的TabHost的实例
之后用这个实例就能够创建TabSpec实例对象了
②tabHost.addTab(TabHost.TabSpec tabSpec) ; 添加选项卡
也就是将上面创建好的TabSpec选项卡实例对象添加到当前的TabHost容器中
4、创建一个TabHost的步骤如下：
①在界面布局中使用<TabHost..../>标签，定义一个选项卡的整体的位置布局，并为该组件定义选项卡的内容
注意：这个步骤并没有真正的将一个选项卡视图完全的创建好，只是做了如下如下两点内容： 定义选项卡标题和选项卡面板的位置，定义选项卡面板中的内容
但是并没用定义选项卡标题中的几个标题卡片的实际内容，也没有将选项卡面板中内容和标题卡片关联起来
②通过使用findViewById（int）返回布局文件中定义的TabHost实例，紧接着调用TabHost类的setup()方法
注意：在低版本的SDK中，使用TabActivity来创建TabHost视图，也就是说我们需要创建一个TabActivity的子类，之后让这个TabActivity加载含有TabHost组件的布局文件，以在这种方法中，我们只需要调用TabActivity的getTabHost（）方法就能够返回布局中的TabHost实例；但是现在已经不再使用这TabActivity来创建了，新版本中的选项卡的创建要求使用一个普通的Activity子类来加载上述的含有TabHost的布局文件,使用Fragment最为选项卡面板，之后通过findViewById（int）来获取布局中的TabHost实例对象，但是紧接着必须调用TabHost实例的setup（）方法，时候才能够进行下面的步骤
③通过上面返回的TabHost实例，为这个实例真正的创建和添加选项卡，并将选项卡面板和标题卡片绑定起来
5、创建TabHost的方法非常的简单，通过下面的实例，我们用实际的代码来进行详细的讲解
我们最终要创建一个下面的应用：
主布局文件：activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- 首先创建页面中最上面的一栏，使用相对布局 --> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:layout_width="match_parent" android:layout_height="48dp" android:layout_centerHorizontal="true" android:gravity="center" android:id="@+id/title" android:text="@string/title" android:textSize="18sp" android:textColor="#a8aeb5" android:typeface="monospace" android:background="@drawable/title_bg" /> <Button android:layout_width="wrap_content" android:layout_height="35dp" android:layout_alignParentEnd="true" android:text="@string/Done" android:textColor="#a8aeb5" android:layout_marginTop="5dp" android:layout_marginEnd="8dp" android:background="@drawable/done" /> <Button android:layout_width="wrap_content" android:layout_height="35dp" android:background="@drawable/back" android:textColor="#a8aeb5" android:text="@string/Back" android:layout_alignParentStart="true" android:layout_marginTop="5dp" /> </RelativeLayout> <!--定义TabHost --> <TabHost android:id="@android:id/tabhost" 注意这是系统定义好的ID，不能够自行指定 android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- 插入选项卡堆叠区，即选项卡内容面板 --> <FrameLayout android:id="@android:id/tabcontent" 注意这是系统定义好的ID，不能够自行指定 android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <!-- 静态插入Fragment对象，使用Fragment做为面板 --> <fragment android:id="@+id/content_tab1" android:name="com.penglee.tabhost_normal_test.Fragment_1" android:layout_width="match_parent" android:layout_height="match_parent" /> <fragment android:id="@+id/content_tab2" android:name="com.penglee.tabhost_normal_test.Fragment_2" android:layout_width="match_parent" android:layout_height="match_parent" /> <fragment android:id="@+id/content_tab3" android:name="com.penglee.tabhost_normal_test.Fragment_3" android:layout_width="match_parent" android:layout_height="match_parent" /> <fragment android:id="@+id/content_tab4" android:name="com.penglee.tabhost_normal_test.Fragment_4" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout> <!-- 插入选项卡标签条 ，即容纳的卡片标题的一那行条形容器 我们将这个TabWidget放在了面板的下面，如果想要将它放到面板的 上面就将这个TanWidget放在 FrameLayout标签之上，即可--> <TabWidget android:id="@android:id/tabs" 注意这是系统定义好的ID，不能够自行指定 android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/title_bg"/> </LinearLayout> </TabHost> </LinearLayout>
MainActivity.java 文件
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost); tabHost.setup(); //创建选项卡 TabSpec tab1 = tabHost.newTabSpec("tab1") //创建标题卡片，参数一：指定标题卡片的文本内容，参数二：指定标题卡片的背景图片 .setIndicator("", getResources().getDrawable(R.drawable.tab1)) //将setContent（int）参数指定的组件（即面板）和上面的卡片标题进行绑定 .setContent(R.id.content_tab1); //将上面创建好的一个选项卡（包括面板和卡片标题）添加到tabHost容器中 tabHost.addTab(tab1); //按照上面的方法创建剩余的三个选项卡，并进行添加 TabSpec tab2 = tabHost.newTabSpec("tab2") .setIndicator("", getResources().getDrawable(R.drawable.tab2)) .setContent(R.id.content_tab2); tabHost.addTab(tab2); TabSpec tab3 = tabHost.newTabSpec("tab3") .setIndicator("", getResources().getDrawable(R.drawable.tab3)) .setContent(R.id.content_tab3); tabHost.addTab(tab3); TabSpec tab4 = tabHost.newTabSpec("tab4") .setIndicator("", getResources().getDrawable(R.drawable.tab4)) .setContent(R.id.content_tab4); tabHost.addTab(tab4); }
}
至此，整体上的框架已经搭起来了，之后我们创建好上面四个面板使用的Fragment类，实际上四个Fragment内容都一样，只是使用的图片不一样罢了，我们只看一个
fragment_1.xml
<?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" > <Button android:id="@+id/button_1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:background="@drawable/tabhost_bg" android:text="显示图片"/> <ImageView android:id="@+id/imageView_1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical"/> </LinearLayout>
Fragment_1.java文件
public class Fragment_1 extends Fragment { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_1,container, false); final ImageView imageView = (ImageView)view.findViewById(R.id.imageView_1); Button button = (Button)view.findViewById(R.id.button_1) ; button.setOnClickListener(new OnClickListener(){ @Override public void onClick(View v) { imageView.setBackgroundResource(R.drawable.picture_1); } }); return view ; } @Override public void onPause() { super.onPause(); } }
为了更加的清楚，我们将这个项目的文件目录展示一下：
各个图片如下：
后注：
上面就是使用Fragment创建TabHost的步骤，但是实际中，我们如果想要自定义一个选项卡界面，基本上就应该抛弃上面的方法，完全可以使用按钮自己来创建，可以创建出更加优美的界面和动态效果