今天发的是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 <LinearLayout 10 android:layout_width="match_parent" 11 android:layout_height="match_parent" 12 android:orientation="vertical"> 13 14 <FrameLayout 15 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.ViewPager 21 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 <TabWidget 28 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 <View 35 android:layout_width="match_parent" 36 android:layout_height="1dp" 37 android:background="#0ff0f0" /> 38 39 <RadioGroup 40 android:id="@+id/radioGroup" 41 android:layout_width="match_parent" 42 android:layout_height="wrap_content" 43 44 android:orientation="horizontal"> 45 46 <RadioButton 47 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 <RadioButton 57 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 <RadioButton 66 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 <RadioButton 75 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回来要展示的相应的layout
150 */
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 @Override
14 public boolean isViewFromObject(View arg0, Object arg1) {
15 return arg0 == arg1;
16 }
17
18 @Override
19 public Object instantiateItem(ViewGroup container, int position) {
20 container.addView(list.get(position));
21 return list.get(position);
22 }
23 @Override
24 public void destroyItem(ViewGroup container, int position, Object object) {
25
26 container.removeView(list.get(position));
27
28 }
29 }
如果有什么问题，欢迎留言！
时间： 2024-11-06 09:45:52