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  8  9     13 14         19 20             24 25         26 27         33 34         38 39         45 46             55 56             64 65             73 74             82         83     84

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 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();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 list = null; 3  4     public MyAdapter(ArrayList 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 }

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

更多相关文章

随机推荐