Android之ViewPager+Fragment实现页面点击切换和手势滑动

from: http://blog.csdn.net/wei_zhi/article/details/50609119

使用ViewPager+Fragment实现页面点击切换和手势滑动，效果图如下： 



源码下载地址： 
http://download.csdn.net/detail/wei_zhi/9422590 

布局文件activity_main.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="@dimen/top_tab_height"
android:background="@color/main_top_color" >

<TextView
android:id="@+id/picture_text"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="@string/picture"
android:textStyle="bold"
android:textColor="@color/main_top_tab_color"
android:textSize="@dimen/main_top_tab_text_size" />

<TextView
android:id="@+id/movie_text"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="@string/movie"
android:textStyle="bold"
android:textColor="@color/main_top_tab_color"
android:textSize="@dimen/main_top_tab_text_size" />

<TextView
android:id="@+id/music_text"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="@string/music"
android:textStyle="bold"
android:textColor="@color/main_top_tab_color"
android:textSize="@dimen/main_top_tab_text_size" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="@dimen/main_line_height"
android:layout_gravity="bottom"
android:orientation="vertical"
android:background="@color/main_top_color"
>

<ImageView
android:id="@+id/cursor"
android:layout_width="@dimen/main_matrix_width"
android:layout_height="@dimen/main_line_height"
android:scaleType="matrix"
android:src="@color/matrix_color" />
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="0.5dp"
android:background="@color/main_top_color"/>

<android.support.v4.view.ViewPager
android:id="@+id/vPager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1.0"
android:background="@color/white"
android:flipInterval="30"
android:persistentDrawingCache="animation" />
</LinearLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

其中strings.xml为：

<resources>
<string name="app_name">VF</string>
<string name="action_settings">Settings</string>

<string name="picture">图片</string>
<string name="movie">电影</string>
<string name="music">音乐</string>

</resources>

1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

dimens.xml为：

<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="fab_margin">16dp</dimen>

<dimen name="top_tab_height">50dp</dimen>
<dimen name="main_top_tab_text_size">14sp</dimen> <!--48px-->
<dimen name="main_line_height">2.7dp</dimen><!--8px-->
<dimen name="main_matrix_width">95dp</dimen>
<dimen name="text_size">32sp</dimen>
</resources>

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12

colors.xml为：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>

<color name="transparent">#00000000</color>
<color name="main_top_color">#f7614d</color>
<color name="main_top_tab_color">#fcc9c5</color>
<color name="main_top_tab_color_2">#ffffff</color>
<color name="matrix_color">#ffffff</color>
<color name="white">#ffffff</color>
<color name="red">#FFFF1826</color>

</resources>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

MainActivity.Java 如下：

package com.android.vf;
import android.content.Context;
import android.content.pm.ActivityInfo;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.KeyEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
/**
* 主界面显示，包括图片、电影和音乐三个选项
* @author weizhi
* @version 1.0
*/
public class MainActivity extends FragmentActivity {

//图片
private TextView pictureTextView;
//电影
private TextView movieTextView;
//音乐
private TextView musicTextView;

//实现Tab滑动效果
private ViewPager mViewPager;

//动画图片
private ImageView cursor;

//动画图片偏移量
private int offset = 0;
private int position_one;
private int position_two;

//动画图片宽度
private int bmpW;

//当前页卡编号
private int currIndex = 0;

//存放Fragment
private ArrayList<Fragment> fragmentArrayList;

//管理Fragment
private FragmentManager fragmentManager;

public Context context;

public static final String TAG = "MainActivity";

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);
context = this;

//初始化TextView
InitTextView();

//初始化ImageView
InitImageView();

//初始化Fragment
InitFragment();

//初始化ViewPager
InitViewPager();

}

@Override
public View onCreateView(String name, Context context, AttributeSet attrs) {

return super.onCreateView(name, context, attrs);
}

@Override
protected void onResume() {
/**
* 设置为竖屏
*/
if(getRequestedOrientation()!= ActivityInfo.SCREEN_ORIENTATION_PORTRAIT){
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
}

super.onResume();
}

/**
* 初始化头标
*/
private void InitTextView(){

//图片头标
pictureTextView = (TextView)findViewById(R.id.picture_text);
//电影头标
movieTextView = (TextView) findViewById(R.id.movie_text);
//音乐头标
musicTextView = (TextView)findViewById(R.id.music_text);

//添加点击事件
pictureTextView.setOnClickListener(new MyOnClickListener(0));
movieTextView.setOnClickListener(new MyOnClickListener(1));
musicTextView.setOnClickListener(new MyOnClickListener(2));
}

/**
* 初始化页卡内容区
*/
private void InitViewPager() {

mViewPager = (ViewPager) findViewById(R.id.vPager);
mViewPager.setAdapter(new MFragmentPagerAdapter(fragmentManager, fragmentArrayList));

//让ViewPager缓存2个页面
mViewPager.setOffscreenPageLimit(2);

//设置默认打开第一页
mViewPager.setCurrentItem(0);

//将顶部文字恢复默认值
resetTextViewTextColor();
pictureTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));

//设置viewpager页面滑动监听事件
mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());
}

/**
* 初始化动画
*/
private void InitImageView() {
cursor = (ImageView) findViewById(R.id.cursor);
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);

// 获取分辨率宽度
int screenW = dm.widthPixels;

bmpW = (screenW/3);

//设置动画图片宽度
setBmpW(cursor, bmpW);
offset = 0;

//动画图片偏移量赋值
position_one = (int) (screenW / 3.0);
position_two = position_one * 2;

}

/**
* 初始化Fragment，并添加到ArrayList中
*/
private void InitFragment(){
fragmentArrayList = new ArrayList<Fragment>();
fragmentArrayList.add(new PictureFragment());
fragmentArrayList.add(new MovieFragment());
fragmentArrayList.add(new MusicFragment());

fragmentManager = getSupportFragmentManager();

}

/**
* 头标点击监听
* @author weizhi
* @version 1.0
*/
public class MyOnClickListener implements View.OnClickListener{
private int index = 0 ;
public MyOnClickListener(int i) {
index = i;
}

@Override
public void onClick(View v) {
mViewPager.setCurrentItem(index);
}
}

/**
* 页卡切换监听
* @author weizhi
* @version 1.0
*/
public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{

@Override
public void onPageSelected(int position) {
Animation animation = null ;
switch (position){

//当前为页卡1
case 0:
//从页卡1跳转转到页卡2
if(currIndex == 1){
animation = new TranslateAnimation(position_one, 0, 0, 0);
resetTextViewTextColor();
pictureTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
}else if(currIndex == 2){//从页卡1跳转转到页卡3
animation = new TranslateAnimation(position_two, 0, 0, 0);
resetTextViewTextColor();
pictureTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
}
break;

//当前为页卡2
case 1:
//从页卡1跳转转到页卡2
if (currIndex == 0) {
animation = new TranslateAnimation(offset, position_one, 0, 0);
resetTextViewTextColor();
movieTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
} else if (currIndex == 2) { //从页卡1跳转转到页卡2
animation = new TranslateAnimation(position_two, position_one, 0, 0);
resetTextViewTextColor();
movieTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
}
break;

//当前为页卡3
case 2:
//从页卡1跳转转到页卡2
if (currIndex == 0) {
animation = new TranslateAnimation(offset, position_two, 0, 0);
resetTextViewTextColor();
musicTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
} else if (currIndex == 1) {//从页卡1跳转转到页卡2
animation = new TranslateAnimation(position_one, position_two, 0, 0);
resetTextViewTextColor();
musicTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
}
break;
}
currIndex = position;

animation.setFillAfter(true);// true:图片停在动画结束位置
animation.setDuration(300);
cursor.startAnimation(animation);

}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageScrollStateChanged(int state) {

}
};

/**
* 设置动画图片宽度
* @param mWidth
*/
private void setBmpW(ImageView imageView,int mWidth){
ViewGroup.LayoutParams para;
para = imageView.getLayoutParams();
para.width = mWidth;
imageView.setLayoutParams(para);
}

/**
* 将顶部文字恢复默认值
*/
private void resetTextViewTextColor(){

pictureTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color));
movieTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color));
musicTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color));
}

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287

其中用到的适配器MFragmentPagerAdapter.java如下：

package com.android.vf;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.ViewGroup;

import java.util.ArrayList;

/**
* Fragment适配器
* @author weizhi
* @version 1.0
*/
public class MFragmentPagerAdapter extends FragmentPagerAdapter {

//存放Fragment的数组
private ArrayList<Fragment> fragmentsList;

public MFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> fragmentsList) {
super(fm);
this.fragmentsList = fragmentsList;
}

@Override
public Fragment getItem(int position) {

return fragmentsList.get(position);
}

@Override
public int getCount() {
return fragmentsList.size();
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
super.destroyItem(container, position, object);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

三个Fragment如下（相同，不一一赘述）： 

PictureFragment.java:

package com.android.vf;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class PictureFragment extends Fragment {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_picture, container, false);
}

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

用到的dotshape.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="false">

<solid
android:color="@color/white"/>
<stroke
android:width="1dp"
android:color="@color/red"/>
<size android:width="8dp"
android:height="8dp"/>
</shape>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

三个Fragment对应的布局文件如下（相同，不一一赘述）：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<TextView
android:layout_gravity="center"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="@drawable/dotshape"/>
<TextView
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"

android:text="@string/movie"
android:textSize="@dimen/text_size"
android:textColor="@color/main_top_color"/>

</FrameLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

沉浸式效果用到的style如下：

<style name="AppTheme" parent="android:Theme.Material.Light.NoActionBar">
<item name="android:colorPrimary">@color/main_top_color</item>
<item name="android:statusBarColor">@color/main_top_color</item>
<item name="android:colorPrimaryDark">@color/main_top_color</item>
</style>

1
2
3
4
5
1
2
3
4
5

源码下载地址： 
http://download.csdn.net/detail/wei_zhi/9422590