Android ViewPager+TabHost实现首页导航

今天发的是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：

 1 <?xml version="1.0" encoding="utf-8"?> 2 <TabHost xmlns:android="http://schemas.android.com/apk/res/android" 3     xmlns:tools="http://schemas.android.com/tools" 4     android:id="@android:id/tabhost" 5     android:layout_width="match_parent" 6     android:layout_height="match_parent" 7     tools:context="com.example.wgh.tabhostwithviewpager.MainActivity"> 8  9     <LinearLayout10         android:layout_width="match_parent"11         android:layout_height="match_parent"12         android:orientation="vertical">13 14         <FrameLayout15             android:id="@android:id/tabcontent"16             android:layout_width="match_parent"17             android:layout_height="match_parent"18             android:layout_weight="1.0">19 20             <android.support.v4.view.ViewPager21                 android:id="@+id/viewPager"22                 android:layout_width="match_parent"23                 android:layout_height="match_parent"></android.support.v4.view.ViewPager>24 25         </FrameLayout>26 27         <TabWidget28             android:id="@android:id/tabs"29             android:layout_width="match_parent"30             android:layout_height="match_parent"31             android:layout_weight="0.0"32             android:visibility="gone" />33 34         <View35             android:layout_width="match_parent"36             android:layout_height="1dp"37             android:background="#0ff0f0" />38 39         <RadioGroup40             android:id="@+id/radioGroup"41             android:layout_width="match_parent"42             android:layout_height="wrap_content"43 44             android:orientation="horizontal">45 46             <RadioButton47                 android:id="@+id/radioButton1"48                 android:layout_width="0dp"49                 android:layout_height="wrap_content"50                 android:layout_margin="5dp"51                 android:layout_weight="1"52                 android:background="@drawable/img_draw_money_fail"53                 android:button="@null"54                 android:paddingLeft="10dp" />55 56             <RadioButton57                 android:id="@+id/radioButton2"58                 android:layout_width="0dp"59                 android:layout_height="wrap_content"60                 android:layout_margin="5dp"61                 android:layout_weight="1"62                 android:background="@drawable/img_draw_money_fail"63                 android:button="@null" />64 65             <RadioButton66                 android:id="@+id/radioButton3"67                 android:layout_width="0dp"68                 android:layout_height="wrap_content"69                 android:layout_margin="5dp"70                 android:layout_weight="1"71                 android:background="@drawable/img_draw_money_fail"72                 android:button="@null" />73 74             <RadioButton75                 android:id="@+id/radioButton4"76                 android:layout_width="0dp"77                 android:layout_height="wrap_content"78                 android:layout_margin="5dp"79                 android:layout_weight="1"80                 android:background="@drawable/img_draw_money_fail"81                 android:button="@null" />82         </RadioGroup>83     </LinearLayout>84 </TabHost>

Activity：

  1 package com.example.wgh.tabhostwithviewpager;  2   3 import android.app.TabActivity;  4 import android.os.Bundle;  5 import android.support.v4.view.ViewPager;  6 import android.view.LayoutInflater;  7 import android.view.View;  8 import android.widget.RadioButton;  9 import android.widget.RadioGroup; 10 import android.widget.TabHost; 11  12 import java.util.ArrayList; 13  14 public class MainActivity extends TabActivity { 15  16     private TabHost tabHost = null; 17     private ViewPager viewPager = null; 18     private RadioGroup radioGroup = null; 19     private ArrayList<View> list = null; 20     private View view1 = null; 21     private View view2 = null; 22     private View view3 = null; 23     private View view4 = null; 24     private RadioButton radioButton1 = null; 25     private RadioButton radioButton2 = null; 26     private RadioButton radioButton3 = null; 27     private RadioButton radioButton4 = null; 28  29     @Override 30     protected void onCreate(Bundle savedInstanceState) { 31         super.onCreate(savedInstanceState); 32         setContentView(R.layout.activity_main); 33         initView(); 34         initData(); 35  36         //设置初始化默认选项 37         radioGroup.check(R.id.radioButton1); 38         radioButton1.setBackgroundResource(R.drawable.img_draw_money_success); 39         viewPager.setCurrentItem(0); 40         tabHost.setCurrentTab(0); 41  42         //getViewPager添加适配器 43         MyAdapter adapter = new MyAdapter(list); 44         viewPager.setAdapter(adapter); 45  46     /** 47      * viewPager设置滑动监听,根据viewPager选中页的position，设置tabHost页卡选项的样式 48      */ 49  50         viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { 51             @Override 52             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 53             } 54  55             @Override 56             public void onPageSelected(int position) { 57                 if (position == 0){ 58                     radioButton1.setBackgroundResource(R.drawable.img_draw_money_success); 59                     radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail); 60                     radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail); 61                     radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail); 62                 }else if(position == 1){ 63                     radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail); 64                     radioButton2.setBackgroundResource(R.drawable.img_draw_money_success); 65                     radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail); 66                     radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail); 67                 }else if(position == 2){ 68                     radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail); 69                     radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail); 70                     radioButton3.setBackgroundResource(R.drawable.img_draw_money_success); 71                     radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail); 72                 }else if(position == 3){ 73                     radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail); 74                     radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail); 75                     radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail); 76                     radioButton4.setBackgroundResource(R.drawable.img_draw_money_success); 77                 } 78             } 79  80             @Override 81             public void onPageScrollStateChanged(int state) { 82             } 83         }); 84  85     /** 86      * 给radioGroup设置监听，以此来改变ViewPager的页面 87      */ 88         radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { 89             @Override 90             public void onCheckedChanged(RadioGroup radioGroup, int checkedId) { 91                 switch (checkedId){ 92                     case R.id.radioButton1: 93                         viewPager.setCurrentItem(0); 94                         radioButton1.setBackgroundResource(R.drawable.img_draw_money_success); 95                         radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail); 96                         radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail); 97                         radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail); 98                         break; 99                     case R.id.radioButton2:100                         viewPager.setCurrentItem(1);101                         radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail);102                         radioButton2.setBackgroundResource(R.drawable.img_draw_money_success);103                         radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail);104                         radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail);105                         break;106                     case R.id.radioButton3:107                         viewPager.setCurrentItem(2);108                         radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail);109                         radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail);110                         radioButton3.setBackgroundResource(R.drawable.img_draw_money_success);111                         radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail);112                         break;113                     case R.id.radioButton4:114                         viewPager.setCurrentItem(3);115                         radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail);116                         radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail);117                         radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail);118                         radioButton4.setBackgroundResource(R.drawable.img_draw_money_success);119                         break;120                 }121             }122         });123     }124 125     /**126      * 初始化数据源127      */128     private void initData() {129         list = new ArrayList<View>();130         list.add(view1);131         list.add(view2);132         list.add(view3);133         list.add(view4);134     }135 136      /**137      * 初始化控件138      */139     private void initView() {140         tabHost = getTabHost();141 142         viewPager = (ViewPager) findViewById(R.id.viewPager);143         radioGroup = (RadioGroup) findViewById(R.id.radioGroup);144         radioButton1 = (RadioButton) findViewById(R.id.radioButton1);145         radioButton2 = (RadioButton) findViewById(R.id.radioButton2);146         radioButton3 = (RadioButton) findViewById(R.id.radioButton3);147         radioButton4 = (RadioButton) findViewById(R.id.radioButton4);148      /**149      * 将每页要展示的layout实例出来，添加到list里面，最后通过适配器return回来要展示的相应的layout150      */151         LayoutInflater inflater = LayoutInflater.from(this);152         view1 = inflater.inflate(R.layout.layout_one,null);153         view2 = inflater.inflate(R.layout.layout_two,null);154         view3 = inflater.inflate(R.layout.layout_three,null);155         view4 = inflater.inflate(R.layout.layout_four,null);156     }157 158 }

ViewPager适配器MyAdapter：

 1 public class MyAdapter extends PagerAdapter { 2     private ArrayList<View> list = null; 3  4     public MyAdapter(ArrayList<View> list) { 5         this.list = list; 6     } 7  8     @Override 9     public int getCount() {10         return list.size();11     }12 13     @Override14     public boolean isViewFromObject(View arg0, Object arg1) {15         return arg0 == arg1;16     }17 18     @Override19     public Object instantiateItem(ViewGroup container, int position) {20         container.addView(list.get(position));21         return list.get(position);22     }23     @Override24     public void destroyItem(ViewGroup container, int position, Object object) {25 26         container.removeView(list.get(position));27 28     }29 }

如果有什么问题，欢迎留言！

转载于:https://blog.51cto.com/zhanglida66/1921512