Android 中 TabHost與ViewPager結合實現首頁導航效果_Android

今天發的是TabHost結合ViewPager實現首頁底部導航的效果，雖然說網上有很多這樣的Demo，不過呢，我還是要把自己練習寫的發出來，沒錯！就是這麼任性；

先上效果圖，如下：

代碼裡面有注釋，就不過多解釋了，說幾點需要注意的問題

1：TabHost 、TabWidget、FrameLayout一定添加id這個屬性，否則會報錯

android:id=”@android:id/tabhost”

android:id=”@android:id/tabcontent”

android:id=”@android:id/tabs”

這個屬性是固定的。

2：ViewPager的適配器要繼承PagerAdapter，別整錯咯；

布局檔案xml：

<?xml version="1.0" encoding="utf-8"?><TabHost xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@android:id/tabhost"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.example.wgh.tabhostwithviewpager.MainActivity"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><FrameLayoutandroid:id="@android:id/tabcontent"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1.0"><android.support.v4.view.ViewPagerandroid:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="match_parent"></android.support.v4.view.ViewPager></FrameLayout><TabWidgetandroid:id="@android:id/tabs"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="0.0"android:visibility="gone" /><Viewandroid:layout_width="match_parent"android:layout_height="1dp"android:background="#0ff0f0" /><RadioGroupandroid:id="@+id/radioGroup"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><RadioButtonandroid:id="@+id/radioButton1"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_margin="5dp"android:layout_weight="1"android:background="@drawable/img_draw_money_fail"android:button="@null"android:paddingLeft="10dp" /><RadioButtonandroid:id="@+id/radioButton2"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_margin="5dp"android:layout_weight="1"android:background="@drawable/img_draw_money_fail"android:button="@null" /><RadioButtonandroid:id="@+id/radioButton3"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_margin="5dp"android:layout_weight="1"android:background="@drawable/img_draw_money_fail"android:button="@null" /><RadioButtonandroid:id="@+id/radioButton4"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_margin="5dp"android:layout_weight="1"android:background="@drawable/img_draw_money_fail"android:button="@null" /></RadioGroup></LinearLayout></TabHost>

Activity：

package com.example.wgh.tabhostwithviewpager;import android.app.TabActivity;import android.os.Bundle;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import android.widget.RadioButton;import android.widget.RadioGroup;import android.widget.TabHost;import java.util.ArrayList;public class MainActivity extends TabActivity {private TabHost tabHost = null;private ViewPager viewPager = null;private RadioGroup radioGroup = null;private ArrayList<View> list = null;private View view1 = null;private View view2 = null;private View view3 = null;private View view4 = null;private RadioButton radioButton1 = null;private RadioButton radioButton2 = null;private RadioButton radioButton3 = null;private RadioButton radioButton4 = null;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();initData();//設定初始化預設選項radioGroup.check(R.id.radioButton1);radioButton1.setBackgroundResource(R.drawable.img_draw_money_success);viewPager.setCurrentItem(0);tabHost.setCurrentTab(0);//getViewPager添加適配器MyAdapter adapter = new MyAdapter(list);viewPager.setAdapter(adapter);/*** viewPager設定滑動監聽,根據viewPager選中頁的position，設定tabHost頁卡選項的樣式*/viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {if (position == 0){radioButton1.setBackgroundResource(R.drawable.img_draw_money_success);radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail);}else if(position == 1){radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton2.setBackgroundResource(R.drawable.img_draw_money_success);radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail);}else if(position == 2){radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton3.setBackgroundResource(R.drawable.img_draw_money_success);radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail);}else if(position == 3){radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton4.setBackgroundResource(R.drawable.img_draw_money_success);}}@Overridepublic void onPageScrollStateChanged(int state) {}});/*** 給radioGroup設定監聽，以此來改變ViewPager的頁面*/radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup radioGroup, int checkedId) {switch (checkedId){case R.id.radioButton1:viewPager.setCurrentItem(0);radioButton1.setBackgroundResource(R.drawable.img_draw_money_success);radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail);break;case R.id.radioButton2:viewPager.setCurrentItem(1);radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton2.setBackgroundResource(R.drawable.img_draw_money_success);radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail);break;case R.id.radioButton3:viewPager.setCurrentItem(2);radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton3.setBackgroundResource(R.drawable.img_draw_money_success);radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail);break;case R.id.radioButton4:viewPager.setCurrentItem(3);radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail);radioButton4.setBackgroundResource(R.drawable.img_draw_money_success);break;}}});}/*** 初始化資料來源*/private void initData() {list = new ArrayList<View>();list.add(view1);list.add(view2);list.add(view3);list.add(view4);}/*** 初始化控制項*/private void initView() {tabHost = getTabHost();viewPager = (ViewPager) findViewById(R.id.viewPager);radioGroup = (RadioGroup) findViewById(R.id.radioGroup);radioButton1 = (RadioButton) findViewById(R.id.radioButton1);radioButton2 = (RadioButton) findViewById(R.id.radioButton2);radioButton3 = (RadioButton) findViewById(R.id.radioButton3);radioButton4 = (RadioButton) findViewById(R.id.radioButton4);/*** 將每頁要展示的layout執行個體出來，添加到list裡面，最後通過適配器return回來要展示的相應的layout*/LayoutInflater inflater = LayoutInflater.from(this);view1 = inflater.inflate(R.layout.layout_one,null);view2 = inflater.inflate(R.layout.layout_two,null);view3 = inflater.inflate(R.layout.layout_three,null);view4 = inflater.inflate(R.layout.layout_four,null);}}

ViewPager適配器MyAdapter：

public class MyAdapter extends PagerAdapter {private ArrayList<View> list = null;public MyAdapter(ArrayList<View> list) {this.list = list;}@Overridepublic int getCount() {return list.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {container.addView(list.get(position));return list.get(position);}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(list.get(position));}}

以上所述是小編給大家介紹的Android 中 TabHost與ViewPager結合實現首頁導航效果，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！