安卓TabHost+ViewPager+RadioGroup多功能模板整理

標籤：android   viewpager   tabhost   安卓   radiobutton   

現在安卓比較流行的布局就是類似新聞用戶端和手機QQ那種的底端可選擇，上面的個別頁面可以滑動選擇。

在測試過程中發現用安卓內建的TabHost去構建，很難得到自訂的效果。

因此採用TabHost+ViewPager+RadioGroup去構建這個效果

首先要弄清楚各自的用途和功能

（1）TabHost

   由於安卓內建的TabHost貌似在有些手機版本上只能固定在底端的位置，所以我們用GadioGroup去顯示介面按鈕，由於構建HabHost必須定義host、tabs、content幾個內容，這樣我們隱藏tabs，用GadioGroup代替顯示。代碼如下：

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"   <span style="color:#ff0000;"> android:id="@android:id/tabhost" </span>    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.android_mode.MainActivity" >    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:orientation="vertical" >        <FrameLayout            <span style="color:#ff0000;">android:id="@android:id/tabcontent"</span>            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1" >        </FrameLayout>        <TabWidget            <span style="color:#ff0000;">android:id="@android:id/tabs"</span>            android:layout_width="fill_parent"            android:layout_height="wrap_content"            <span style="color:#000066;">android:visibility="gone"</span> >        </TabWidget>        <RadioGroup            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:orientation="horizontal" >            <RadioButton                android:id="@+id/b1"                android:layout_width="wrap_content"                android:layout_height="40dp"                android:layout_weight="1"                android:background="#00ABCD"                android:button="@null"                android:gravity="center"                android:text="首頁" />            <View                android:layout_width="2px"                android:layout_height="fill_parent" />            <RadioButton                android:id="@+id/b2"                android:layout_width="wrap_content"                android:layout_height="40dp"                android:layout_weight="1"                android:background="#00ABCD"                android:button="@null"                android:gravity="center"                android:text="設定" />        </RadioGroup>    </LinearLayout></TabHost>

對於主檔案，由於在安卓3.0版本以下不支援TabActivity，因此我們考慮到相容性，選用ActivityGroup。

其具體方法如下所示：

public class MyTabOwnAct extends ActivityGroup {RadioButton radioButton1;RadioButton radioButton2;TabHost tabHost;@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);setContentView(R.layout.tabmain);tabHost = (TabHost) findViewById(android.R.id.tabhost);tabHost.setup();tabHost.setup(this.getLocalActivityManager());  //必須要又這個語句，如果繼承TabActivity可不要tabHost.addTab(tabHost.newTabSpec("l1").setContent(new Intent(this, Act1.class)).setIndicator("首頁"));tabHost.addTab(tabHost.newTabSpec("l2").setContent(new Intent(this, Act2.class)).setIndicator("設定"));radioButton1 = (RadioButton) findViewById(R.id.b1);radioButton2 = (RadioButton) findViewById(R.id.b2);radioButton1.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {// TODO Auto-generated method stubtabHost.setCurrentTabByTag("l1");  //顯示與隱藏的標記}});radioButton2.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {// TODO Auto-generated method stubtabHost.setCurrentTabByTag("l2");}});}}

到目前為止我們把底部的效果實現，即可以通過下面的按鈕，改變上面的介面。

接下來我們選擇上面其中的一個介面，用ViewPager實現滑動的效果。

介面布局檔案如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:orientation="horizontal" >        <TextView            android:layout_width="wrap_content"            android:layout_height="40dp"            android:layout_weight="1"            android:background="#FF0fab"            android:gravity="center"            android:text="頁面一" />        <View            android:layout_width="2dp"            android:layout_height="fill_parent" />        <TextView            android:layout_width="wrap_content"            android:layout_height="40dp"            android:layout_weight="1"            android:background="#da0ccb"            android:gravity="center"            android:text="頁面二" />        <View            android:layout_width="2dp"            android:layout_height="fill_parent" />        <TextView            android:layout_width="wrap_content"            android:layout_height="40dp"            android:layout_weight="1"            android:background="#eeffff"            android:gravity="center"            android:text="頁面三" />    </LinearLayout>    <android.support.v4.view.ViewPager        android:id="@+id/pager"        android:layout_width="fill_parent"        android:layout_height="fill_parent" >    </android.support.v4.view.ViewPager></LinearLayout>

</pre><span style="font-size:18px">我們要準備三個介面的布局，這裡我分別命名為p1.xml，p2.xml，p3.xml，然後我們在主檔案中通過得到ViewPager後關聯到適配器，即可得到滑動的效果。</span><pre name="code" class="java"><span style="font-family: Arial, Helvetica, sans-serif;">public class Act1 extends Activity {</span>

ViewPager pager;@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);setContentView(R.layout.pager);pager = (ViewPager) findViewById(R.id.pager);pager.setAdapter(new MyPagerAdapter());}class MyPagerAdapter extends PagerAdapter {List<View> list = new ArrayList<View>();public MyPagerAdapter() {// TODO Auto-generated constructor stubView view1 = LayoutInflater.from(getApplicationContext()).inflate(R.layout.p1, null);View view2 = LayoutInflater.from(getApplicationContext()).inflate(R.layout.p2, null);View view3 = LayoutInflater.from(getApplicationContext()).inflate(R.layout.p3, null);list.add(view1);list.add(view2);list.add(view3);}@Overridepublic Object instantiateItem(ViewGroup container, int position) {// TODO Auto-generated method stub((ViewPager) container).addView(list.get(position));return list.get(position);}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {// TODO Auto-generated method stub// super.destroyItem(container, position, object);((ViewPager) container).removeView(list.get(position));///(position);// (list.get(position));}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn list.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0 == arg1;}}}

效果顯示圖：

安卓TabHost+ViewPager+RadioGroup多功能模板整理