学习内容来自“慕课网”
ViewPager与FragmentPagerAdapter实现Tab 将这两种实现Tab的方法结合起来。效果就是可以拖动内容区域来改变相应的功能图标亮暗
思路：
Fragment作为内容区域
点击功能按钮，想将所有的图标变为暗色图标，再调用相应的Fragment，并使对应的图标变亮
效果图：
布局文件部分
activity_main.xml
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" 6 > 7 <include layout="@layout/top"/> 8 9 <android.support.v4.view.ViewPager //这里是关键部分 10 android:layout_width="fill_parent" 11 android:layout_height="0dp" 12 android:layout_weight="1" 13 android:id="@+id/id_viewpager"> 14 15 </android.support.v4.view.ViewPager> 16 17 <include layout="@layout/bottom"/> 18 </LinearLayout> 19
activity_main
以下布局文件部分是固定的，和前两种方法用到的是一样的，做过前两种方法的可以直接复制代码
头部部分：
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:background="@drawable/title_bar" 5 android:layout_height="45dp" 6 android:gravity="center" 7 android:orientation="vertical" > 8 <TextView 9 android:layout_height="wrap_content" 10 android:layout_width="wrap_content" 11 android:layout_gravity="center" 12 android:text="微信" 13 android:textColor="#ffffff" 14 android:textSize="20sp" 15 android:textStyle="bold" 16 17 /> 18 19 </LinearLayout>
top.xml
底部部分
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="55dp" 5 android:background="@drawable/bottom_bar" 6 android:orientation="horizontal" > 7 8 <LinearLayout 9 android:id="@+id/id_tab_weixin" 10 android:layout_width="0dp" 11 android:gravity="center" 12 android:layout_height="fill_parent" 13 android:layout_weight="1" 14 android:orientation="vertical" 15 > 16 <ImageButton 17 android:id="@+id/id_tab_weixin_image" 18 android:layout_width="wrap_content" 19 android:layout_height="wrap_content" 20 android:src="@drawable/tab_weixin_pressed" 21 android:clickable="false" 22 android:background="#00000000" 23 /> 24 <TextView 25 android:layout_width="wrap_content" 26 android:layout_height="wrap_content" 27 android:text="微信" 28 android:textColor="#ffffff" 29 /> 30 </LinearLayout> 31 32 <LinearLayout 33 android:id="@+id/id_tab_add" 34 android:layout_width="0dp" 35 android:gravity="center" 36 android:layout_height="fill_parent" 37 android:layout_weight="1" 38 android:orientation="vertical" 39 > 40 <ImageButton 41 android:id="@+id/id_tab_add_image" 42 android:layout_width="wrap_content" 43 android:layout_height="wrap_content" 44 android:clickable="false" 45 android:src="@drawable/tab_address_normal" 46 android:background="#00000000" 47 /> 48 <TextView 49 android:layout_width="wrap_content" 50 android:layout_height="wrap_content" 51 android:text="通信录" 52 android:textColor="#ffffff" 53 /> 54 </LinearLayout> 55 56 <LinearLayout 57 android:id="@+id/id_tab_frd" 58 android:layout_width="0dp" 59 android:gravity="center" 60 android:layout_height="fill_parent" 61 android:layout_weight="1" 62 android:orientation="vertical" 63 > 64 <ImageButton 65 android:id="@+id/id_tab_frd_image" 66 android:layout_width="wrap_content" 67 android:clickable="false" 68 android:layout_height="wrap_content" 69 android:src="@drawable/tab_find_frd_normal" 70 android:background="#00000000" 71 /> 72 <TextView 73 android:layout_width="wrap_content" 74 android:layout_height="wrap_content" 75 android:text="朋友" 76 android:textColor="#ffffff" 77 /> 78 </LinearLayout> 79 80 <LinearLayout 81 android:id="@+id/id_tab_set" 82 android:layout_width="0dp" 83 android:gravity="center" 84 android:layout_height="fill_parent" 85 android:layout_weight="1" 86 android:orientation="vertical" 87 > 88 <ImageButton 89 android:id="@+id/id_tab_set_image" 90 android:layout_width="wrap_content" 91 android:clickable="false" 92 android:layout_height="wrap_content" 93 android:src="@drawable/tab_settings_normal" 94 android:background="#00000000" 95 /> 96 <TextView 97 android:layout_width="wrap_content" 98 android:layout_height="wrap_content" 99 android:text="设置" 100 android:textColor="#ffffff" 101 /> 102 </LinearLayout> 103 </LinearLayout>
bottom.xml
四个对应fragment部分的布局文件（相似的，只是用来标识效果的文字不同而已）
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <TextView 8 android:id="@+id/textView1" 9 android:layout_width="wrap_content" 10 android:layout_height="wrap_content" 11 android:layout_gravity="center_horizontal" 12 android:text="微信" //四个 tab_01,tab_01,tab_03,tab_04只是这里显示的文字不同而已 13 android:textAppearance="?android:attr/textAppearanceMedium" /> 14 15 </LinearLayout>
tab_01
.java文件部分：
主activity
MainActivity.java
1 package com.example.tab_three;
2
3
4
5 import java.util.ArrayList;
6 import java.util.List;
7
8 import android.os.Bundle;
9 import android.app.Activity;
10 import android.support.v4.app.Fragment;
11 import android.support.v4.app.FragmentActivity;
12 import android.support.v4.app.FragmentPagerAdapter;
13 import android.support.v4.view.ViewPager;
14 import android.support.v4.view.ViewPager.OnPageChangeListener;
15 import android.view.Menu;
16 import android.view.View;
17 import android.view.View.OnClickListener;
18 import android.view.Window;
19 import android.widget.ImageButton;
20 import android.widget.LinearLayout;
21
22 public class MainActivity extends FragmentActivity implements OnClickListener{
23 private ViewPager mViewPager;
24 private FragmentPagerAdapter mAdapter; //ViewPager适配器
25 private List<Fragment> mFragments;
26
27 private LinearLayout mTabWeixin;
28 private LinearLayout mTabFrd;
29 private LinearLayout mTabAdd;
30 private LinearLayout mTabSet;
31
32 private ImageButton mImageWeixin;
33 private ImageButton mImageFrd;
34 private ImageButton mImageAdd;
35 private ImageButton mImageSet;
36
37
38 @Override
39 protected void onCreate(Bundle savedInstanceState) {
40 super.onCreate(savedInstanceState);
41 requestWindowFeature(Window.FEATURE_NO_TITLE);
42 setContentView(R.layout.activity_main);
43
44 initView();
45 initEvent();
46 setSelect(0);
47
48 }
49
50
51 private void initEvent() {
52 // TODO Auto-generated method stub
53 mTabWeixin.setOnClickListener(this);
54 mTabAdd.setOnClickListener(this);
55 mTabFrd.setOnClickListener(this);
56 mTabSet.setOnClickListener(this);
57 }
58
59
60 private void initView() {
61 // TODO Auto-generated method stub
62 //初始化
63 mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
64
65 mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
66 mTabAdd = (LinearLayout) findViewById(R.id.id_tab_add);
67 mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
68 mTabSet = (LinearLayout) findViewById(R.id.id_tab_set);
69
70 mImageWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_image);
71 mImageAdd = (ImageButton) findViewById(R.id.id_tab_add_image);
72 mImageFrd = (ImageButton) findViewById(R.id.id_tab_frd_image);
73 mImageSet = (ImageButton) findViewById(R.id.id_tab_set_image);
74
75 //数据的初始化
76 mFragments = new ArrayList<Fragment>();
77 Fragment mTab_01 = new WeixinFragment();
78 Fragment mTab_02 = new AddFragment();
79 Fragment mTab_03 = new FrdFragment();
80 Fragment mTab_04 = new SetFragment();
81
82 mFragments.add(mTab_01);
83 mFragments.add(mTab_02);
84 mFragments.add(mTab_03);
85 mFragments.add(mTab_04);
86
87 mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
88 {
89
90 @Override
91 public int getCount() {
92 // TODO Auto-generated method stub
93 //返回数据源的个数
94 return mFragments.size();
95
96 }
97
98 @Override
99 public Fragment getItem(int arg0) {
100 // TODO Auto-generated method stub
101 return mFragments.get(arg0);
102 }
103 };
104
105 mViewPager.setAdapter(mAdapter);
106 //监听内容区域的滑动效果
107 mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
108
109 @Override
110 public void onPageSelected(int arg0) {
111 // TODO Auto-generated method stub
112 int currentItem = mViewPager.getCurrentItem();
113 resetImage();
114 switch (currentItem) {
115 case 0:
116 mImageWeixin.setImageResource(R.drawable.tab_weixin_pressed);
117 break;
118 case 1:
119 mImageAdd.setImageResource(R.drawable.tab_address_pressed);
120 break;
121 case 2:
122 mImageFrd.setImageResource(R.drawable.tab_find_frd_pressed);
123 break;
124
125 case 3:
126 mImageSet.setImageResource(R.drawable.tab_settings_pressed);
127 break;
128 default:
129 break;
130 }
131
132 }
133
134 @Override
135 public void onPageScrolled(int arg0, float arg1, int arg2) {
136 // TODO Auto-generated method stub
137
138 }
139
140 @Override
141 public void onPageScrollStateChanged(int arg0) {
142 // TODO Auto-generated method stub
143
144 }
145 });
146 }
147
148
149 @Override
150 public void onClick(View v) {
151 // TODO Auto-generated method stub
152 //先切换图片至暗色
153 resetImage();
154 switch (v.getId()) {
155 case R.id.id_tab_weixin:
156 setSelect(0);
157 break;
158 case R.id.id_tab_add:
159 setSelect(1);
160 break;
161 case R.id.id_tab_frd:
162 setSelect(2);
163 break;
164 case R.id.id_tab_set:
165 setSelect(3);
166 break;
167
168 default:
169 break;
170 }
171 }
172 private void setSelect(int i) {
173 // TODO Auto-generated method stub
174 //设置将点击的那个功能图标为亮色
175 //切换内容区域
176 resetImage();
177 switch (i) {
178 case 0:
179 mImageWeixin.setImageResource(R.drawable.tab_weixin_pressed);
180 break;
181 case 1:
182 mImageAdd.setImageResource(R.drawable.tab_address_pressed);
183 break;
184 case 2:
185 mImageFrd.setImageResource(R.drawable.tab_find_frd_pressed);
186 break;
187
188 case 3:
189 mImageSet.setImageResource(R.drawable.tab_settings_pressed);
190 break;
191 default:
192 break;
193 }
194 mViewPager.setCurrentItem(i);
195
196 }
197
198
199 //将所有功能图标的界面设为暗色
200 private void resetImage() {
201 // TODO Auto-generated method stub
202 mImageWeixin.setImageResource(R.drawable.tab_weixin_normal);
203 mImageAdd.setImageResource(R.drawable.tab_address_normal);
204 mImageFrd.setImageResource(R.drawable.tab_find_frd_normal);
205 mImageSet.setImageResource(R.drawable.tab_settings_normal);
206
207 }
208
209
210 }
MainActivity
四个相似的.java文件
WeixinFragment.java
1 package com.example.tab_three;
2
3 import android.os.Bundle;
4 import android.support.v4.app.Fragment;
5 import android.view.LayoutInflater;
6 import android.view.View;
7 import android.view.ViewGroup;
8
9 public class WeixinFragment extends Fragment{
10
11 @Override
12 public View onCreateView(LayoutInflater inflater, ViewGroup container,
13 Bundle savedInstanceState) {
14 // TODO Auto-generated method stub
15
16
17 return inflater.inflate(R.layout.tab_1, container,false);
18 }
19 }
WeixinFragment.java
SetFragment.java
1 package com.example.tab_three;
2
3 import android.os.Bundle;
4 import android.support.v4.app.Fragment;
5 import android.view.LayoutInflater;
6 import android.view.View;
7 import android.view.ViewGroup;
8
9 public class SetFragment extends Fragment{
10
11 @Override
12 public View onCreateView(LayoutInflater inflater, ViewGroup container,
13 Bundle savedInstanceState) {
14 // TODO Auto-generated method stub
15
16
17 return inflater.inflate(R.layout.tab_4, container,false);
18 }
19 }
SetFragment.java
FrdFragment.java
1 package com.example.tab_three;
2
3 import android.os.Bundle;
4 import android.support.v4.app.Fragment;
5 import android.view.LayoutInflater;
6 import android.view.View;
7 import android.view.ViewGroup;
8
9 public class FrdFragment extends Fragment{
10 @Override
11 public View onCreateView(LayoutInflater inflater, ViewGroup container,
12 Bundle savedInstanceState) {
13 // TODO Auto-generated method stub
14 return inflater.inflate(R.layout.tab_3, container,false);
15 }
16
17 }
FrdFragment.xml
AddFragment.java
1 package com.example.tab_three;
2
3 import android.os.Bundle;
4 import android.support.v4.app.Fragment;
5 import android.view.LayoutInflater;
6 import android.view.View;
7 import android.view.ViewGroup;
8
9 public class AddFragment extends Fragment{
10
11 @Override
12 public View onCreateView(LayoutInflater inflater, ViewGroup container,
13 Bundle savedInstanceState) {
14 // TODO Auto-generated method stub
15
16
17 return inflater.inflate(R.layout.tab_2, container,false);
18 }
19 }
AddFragment.xml
时间： 2024-10-09 14:49:28