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

使用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>

其中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>

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>

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>

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));
}

}

其中用到的适配器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);
}
}

三个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);
}

}

用到的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>

三个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>

沉浸式效果用到的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>

源码下载地址：

http://download.csdn.net/detail/wei_zhi/9422590