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的步驟，但是實際中，我們如果想要自定義一個選項卡界面，基本上就應該拋棄上面的方法，完全可以使用按鈕自己來創建，可以創建出更加優美的界面和動態效果