開源項目AndroidUtil-採用Fragment實現TabHost

標籤：tabhost   fragment   androidutil   

原文出自：方傑|http://fangjie.sinaapp.com/?p=141 轉載請註明出處

學習Android也有一段時間了，感覺大部分的Android應用都有很多類似的組件，所以就打算做了這樣一個開源項目，目的是整合一些Android開發常用的組件Demo，方便以後項目中直接拿來用。git地址：https://github.com/JayFang1993/AndroidUtil

廢話不多說，首先講第一個常用的組件TabHost的實現。之前我們可以通過繼承TabActivity來實現，後來的API中已經不建議用這種方式了，所以今天我們主要講的是用Fragment來實現Tabhost。
在新浪微博等很多APP中都有底部選項卡TabHost。首先看下實現後的效果。

一、TabHost的實現

Tabhost的每一個選項卡是通過RadioGroup實現的，每一個Tab就是一個RadioButton。頁面除TabHost以外的內容地區是Fragment。下面是具體的布局檔案main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity" >    <TextView        android:layout_width="fill_parent"        android:layout_height="48dp"         android:layout_centerHorizontal="true"        android:gravity="center"        android:id="@+id/title"        android:text="昌大軟院"        android:textSize="18dp"        android:textColor="#a8aeb5"        android:typeface="monospace"        android:background="@drawable/title_bg" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentRight="true"        android:text="Done"        android:textColor="#a8aeb5"        android:layout_marginTop="10dp"        android:layout_marginRight="8dp"        android:background="@drawable/done" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/back"        android:textColor="#a8aeb5"        android:text="Back"        android:layout_alignParentLeft="true"        android:layout_marginTop="10dp"        android:layout_marginLeft="8dp"        /><FrameLayout     android:id="@+id/content"     android:layout_below="@id/title" android:layout_width="fill_parent"     android:layout_height="fill_parent"/> <RadioGroup    android:id="@+id/main_radio"    android:layout_width="fill_parent"    android:layout_height="48dp"    android:layout_gravity="bottom"    android:orientation="horizontal"    android:layout_alignParentBottom="true"    android:background="@drawable/tabhost_bg" >    <RadioButton        android:id="@+id/rb_home"        android:drawableTop="@drawable/tab1"        style="@style/tab"        android:text="首頁" />    <RadioButton        android:id="@+id/rb_at"        style="@style/tab"                android:drawableTop="@drawable/tab2"        android:text="收藏夾" />    <RadioButton        android:id="@+id/rb_mess"        style="@style/tab"                android:drawableTop="@drawable/tab3"                     android:text="我" />    <RadioButton        android:id="@+id/rb_more"        style="@style/tab"                android:drawableTop="@drawable/tab4"                 android:text="更多" />        </RadioGroup></RelativeLayout>

每一個Tab的樣式：寬度、高度、背景圖片這些都是相同的。所以寫在了一個style檔案中。styles.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">    <style name="tab">        <item name="android:layout_height">48dp</item>        <item name="android:layout_width">match_parent</item>        <item name="android:layout_weight">1</item>        <item name="android:gravity">center</item>        <item name="android:textSize">10dp</item>        <item name="android:paddingTop">8dp</item>                <item name="android:background">@drawable/tabhost_bg_selector</item>        <item name="android:textColor">#a8aeb5</item>        <item name="android:button">@null</item>    </style>     </resources>

為了能夠製造出Tab按下選中的效果，所以為Tab的背景設計了一個selector。tabhost_bg_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/tabhost_press"  android:state_pressed="true" />    <item android:drawable="@drawable/tabhost_press" android:state_checked="true" />    <item android:drawable="@drawable/tabhost_bg"/></selector>

至此，關於TabHost的所有布局檔案都寫完了。下面看看Activity中的Java代碼。MainActivity.java

public class MainActivity extends FragmentActivity {    private FragmentManager fragmentManager;      private RadioGroup radioGroup;    private RadioButton rb1;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);    fragmentManager = getSupportFragmentManager();          radioGroup = (RadioGroup) findViewById(R.id.main_radio);      rb1=(RadioButton) findViewById(R.id.rb_home);    radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {          @SuppressLint("NewApi")public void onCheckedChanged(RadioGroup group, int checkedId) {             rb1.setBackgroundDrawable(getResources().getDrawable(R.drawable.tabhost_bg_selector));            FragmentTransaction transaction = fragmentManager.beginTransaction();              ContentFrame fragment = null;            switch(checkedId)            {            case 0:            fragment= new ContentFrame();            break;            case 1:            fragment= new ContentFrame();            break;            case 2:            fragment= new ContentFrame();            break;            case 3:            fragment= new ContentFrame();            break;            default:            fragment= new ContentFrame();            break;            }            transaction.replace(R.id.content, (Fragment)fragment);              transaction.commit();          }    });    //設定預設選中第一項    radioGroup.check(1);    radioGroup.check(0);    //設定按下的背景效果    rb1.setBackgroundDrawable(getResources().getDrawable(R.drawable.tabhost_press));}}

針對每一個選項卡的內容介面代碼，隨便寫一個布局檔案content.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <TextView     android:layout_width="match_parent"    android:layout_height="match_parent"            android:id="@+id/content"        /></LinearLayout>

內容部分的Java代碼，實現和Activity差不多，不過這裡需要繼承Fragment而不是Activity。從content.xml中得到一個View，然後將這個View替換Main中的Fragment部分。

public class ContentFrame extends Fragment{    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.content, null);        TextView textView = (TextView) view.findViewById(R.id.content);        textView.setText("Hello world");        return view;    }}

 補充：以上代碼是考慮到Android 3.0以前API中沒有Fragment，匯入android-support-v4.jar後的代碼，有幾點區別：

1. 3.0之前的應該匯入  import android.support.v4.app.*; 這個包中Fragment相關類；3.o之後的可以直接匯入android.app.*;
2. 3.0之前的MainAcitivity要繼承自FragmentActivity，3.0之後的直接繼承自Activity;
3. 3.0之前   fragmentManager = getSupportFragmentManager();3.0之後  fragmentManager = getFragmentManager();

  歡迎各位關注我的個人網站：http://fangjie.sinaapp.com/