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

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

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

廢話很少說，首先講第一個常常使用的組件TabHost的實現。以前咱們可以經過繼承TabActivity來實現，後來的API中已經不建議用這樣的方式了，因此今天咱們主要講的是用Fragment來實現Tabhost。

在新浪微博等很是多APP中都有底部選項卡TabHost。

首先看下實現後的效果。

1、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;
	@Override
	protected 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/