使用ViewPager+Fragment实现页面点击切换和手势滑动，效果图如下：
源码下载地址：
http://download.csdn.net/detail/wei_zhi/9422590
布局文件activity_main.xml如下：
<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为：
<string name="app_name">VFstring>
<string name="action_settings">Settingsstring>
<string name="picture">图片string>
<string name="movie">电影string>
<string name="music">音乐string>
dimens.xml为：
<resources>
<dimen name="activity_horizontal_margin">16dpdimen>
<dimen name="activity_vertical_margin">16dpdimen>
<dimen name="fab_margin">16dpdimen>
<dimen name="top_tab_height">50dpdimen>
<dimen name="main_top_tab_text_size">14spdimen>
<dimen name="main_line_height">2.7dpdimen>
<dimen name="main_matrix_width">95dpdimen>
<dimen name="text_size">32spdimen>
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为：
<resources>
<color name="colorPrimary">#3F51B5color>
<color name="colorPrimaryDark">#303F9Fcolor>
<color name="colorAccent">#FF4081color>
<color name="transparent">#00000000color>
<color name="main_top_color">#f7614dcolor>
<color name="main_top_tab_color">#fcc9c5color>
<color name="main_top_tab_color_2">#ffffffcolor>
<color name="matrix_color">#ffffffcolor>
<color name="white">#ffffffcolor>
<color name="red">#FFFF1826color>
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;
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;
private ArrayList fragmentArrayList;
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;
InitTextView();
InitImageView();
InitFragment();
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));
mViewPager.setOffscreenPageLimit(2);
mViewPager.setCurrentItem(0);
resetTextViewTextColor();
pictureTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
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();
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){
case 0:
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){
animation = new TranslateAnimation(position_two, 0, 0, 0);
resetTextViewTextColor();
pictureTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
}
break;
case 1:
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) {
animation = new TranslateAnimation(position_two, position_one, 0, 0);
resetTextViewTextColor();
movieTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
}
break;
case 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) {
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);
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 {
private ArrayList fragmentsList;
public MFragmentPagerAdapter(FragmentManager fm, ArrayList 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) {
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如下：
<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如下：
源码下载地址：
http://download.csdn.net/detail/wei_zhi/9422590
