今天发的是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 28 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 ArrayListlist = 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 ArrayListlist = 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 }
如果有什么问题,欢迎留言!