本文介绍如何使用ViewPager实现页面滑动导航功能，并通过TranslateAnimation添加页面切换动画效果。具体包括ViewPager适配器的设置、OnPageChangeListener监听器的应用、TextView样式变化以及动画方法封装。
学习引导
http://blog.youkuaiyun.com/bobo8945510/article/details/52742758 第一节 viewpager初识
http://blog.youkuaiyun.com/bobo8945510/article/details/52743570 第二节 viewpager实现滑动条功能
http://blog.youkuaiyun.com/bobo8945510/article/details/52786360 第四节 viewpager实现带小园点过渡页
viewpager实现滑动条及导航功能
什么都不说先看效果图：
用到的重要知识点：
viewpager 适配器
TranslateAnimation 水平动画
OnPageChangeListener的API
一、布局效果，我在前面博客基础上添加了三个textview组件，如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
android:background="#E5E5E5"
tools:context="com.example.enz.viewpagertext.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:orientation="horizontal">
<TextView
android:id="@+id/textView01"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="40dp"
android:gravity="center"
android:textColor="#EEE685"
android:background="#FF4040"
android:text="第一页"
/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#EEDFCC">
</View>
<TextView
android:id="@+id/textView02"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="40dp"
android:textColor="#D1D1D1"
android:gravity="center"
android:text="第二页"/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#EEDFCC">
</View>
<TextView
android:id="@+id/textView03"
android:layout_width="0dp"
android:layout_weight="1"
android:textColor="#D1D1D1"
android:layout_height="40dp"
android:gravity="center"
android:text="第三页"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#EEDFCC">
</View>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
android:id="@+id/img01"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginBottom="5dp"
android:scaleType="matrix"
android:background="@drawable/img01"/>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewp_01"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
布局效果图：
1，在代码中设置新添加的三个布局id,并设置监听
textView01= (TextView) findViewById(R.id.textView01);
textView01.setOnClickListener(this);
textView02= (TextView) findViewById(R.id.textView02);
textView02.setOnClickListener(this);
textView03= (TextView) findViewById(R.id.textView03);
textView03.setOnClickListener(this);2、在onClick()方法中关联viewpager页卡
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.textView01:
//绑定viewopager对应的页卡
Log.i("Text","textView01 +textView01 ");
vp.setCurrentItem(0);
break;
case R.id.textView02:
Log.i("Text","textView02 +textView02 ");
vp.setCurrentItem(1);
break;
case R.id.textView03:
vp.setCurrentItem(2);
Log.i("Text","textView03 +textView03 ");
break;
}
}3、在这个demo中我把滑动动画封装成了一个方法，只需要传递当前页面的position即可
如果对动画不甚了解，请看博客：http://blog.youkuaiyun.com/bobo8945510/article/details/52515866
//页面滑动动画方法
private void movePositionX(int toPosition) {
int one = img_wight+offset*2;// 页面一到页面二移动量
int two = one * 2;// 页卡1 -> 页卡3 偏移量
Log.i("Text","oneoneone "+one);
//创建一个移动动画，用来实现滑动效果
Animation animation = null;
switch (toPosition) {
case 0:
if (currIndex == 1) {
animation = new TranslateAnimation(one, 0, 0, 0);
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, 0, 0, 0);
}
break;
case 1:
if (currIndex == 0) {
animation = new TranslateAnimation(0, one, 0, 0);
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, one, 0, 0);
}
break;
case 2:
if (currIndex == 0) {
animation = new TranslateAnimation(0, two, 0, 0);
} else if (currIndex == 1) {
animation = new TranslateAnimation(one, two, 0, 0);
}
break;
}
currIndex = toPosition;
animation.setFillAfter(true);// True:图片停在动画结束位置
animation.setDuration(300);
img01.startAnimation(animation);
}4、调用viewPager的setOnPageChangeListener（）方法，来监听页面滑动和关联textview后改变起属性，在这里我改变了textview的字体颜色和背景颜色
vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
//页面在滑动过程中不停触发该方法：position：当前滑动到的位置，positionOffset：偏移量的百分比，positionOffsetPixels：偏移量的数值
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
//ViewPager跳转到新页面时触发该方法，position表示新页面的位置。
public void onPageSelected(int position) {
switch (position){
case 0:
textView01.setTextColor(android.graphics.Color.parseColor("#ffffff"));
textView02.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView03.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView01.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
textView02.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
textView03.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
//把当前位置传递到动画方法中，进行滑动
movePositionX(0);
break;
case 1:
textView01.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView02.setTextColor(android.graphics.Color.parseColor("#ffffff"));
textView03.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView01.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
textView02.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
textView03.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
//把当前位置传递到动画方法中，进行滑动
movePositionX(1);
break;
case 2:
textView01.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView02.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView03.setTextColor(android.graphics.Color.parseColor("#ffffff"));
textView01.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
textView02.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
textView03.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
//把当前位置传递到动画方法中，进行滑动
movePositionX(2);
break;
}
}
@Override
//当页面的滑动状态改变时该方法会被触发，页面的滑动状态有3个：“0”表示什么都不做，“1”表示开始滑动，“2”表示结束滑动。
public void onPageScrollStateChanged(int state) {
}
});5、还是发下所有的代码
- 适配器
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;
/**
* Created by ENZ on 2016/9/29.
*/
public class ViewPagerAdapter extends PagerAdapter {
private Context context;
private List<View> viewdata;
public ViewPagerAdapter(MainActivity mainActivity, List<View> mview) {
context = mainActivity;
viewdata = mview;
}
//这个方法是获取一共有多少个item
@Override
public int getCount() {
return viewdata.size();
}
//这个就这样写就OK ，无需管
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
//这个方法用来实例化页卡
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewdata.get(position),0);
return viewdata.get(position);
}
//删除实例化页卡
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
// TODO Auto-generated method stub
container.removeView(viewdata.get(position));
}
}
- 主类代码
import android.app.Activity;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends Activity implements View.OnClickListener {
private ViewPager vp;
//把定义好的三个布局进行初始化对象
private View item_view01,item_view02,item_view03;
//创建一个list集合 参数为view
private List<View> Mview = new ArrayList<>();
//用于引用布局好的三个itemView布局
private LayoutInflater inflater;
private ViewPagerAdapter adapter;
private ImageView img01;
private int img_wight = 0; // 游标宽度
private int currIndex = 0;// 当前页卡编号
private int offset = 0;// // 动画图片偏移量
int log = 0;
int w=0;
//下面是第三章博客新加id
private TextView textView01,textView02,textView03;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/*
* LayoutInflater讲解
* 对于一个没有被载入或者想要动态载入的界面，都需要使用LayoutInflater.inflate()来载入；
* 对于一个已经载入的界面，就可以使用Activiyt.findViewById()方法来获得其中的界面元素。
* 想了解更多：http://www.cnblogs.com/maliqian/p/3473800.html
* */
inflater = getLayoutInflater();
setView();
}
private void setView() {
textView01= (TextView) findViewById(R.id.textView01);
textView01.setOnClickListener(this);
textView02= (TextView) findViewById(R.id.textView02);
textView02.setOnClickListener(this);
textView03= (TextView) findViewById(R.id.textView03);
textView03.setOnClickListener(this);
item_view01 = inflater.inflate(R.layout.item01,null);
item_view02 = inflater.inflate(R.layout.item02,null);
item_view03 = inflater.inflate(R.layout.item03,null);
//初始化viewPager
vp = (ViewPager)findViewById(R.id.viewp_01);
img01 = (ImageView) findViewById(R.id.img01);
//把三个View布局对象加载到list中，这些就是item的数据
Mview.add(item_view01);
Mview.add(item_view02);
Mview.add(item_view03);
//添加OnPageChangeListener的API
vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
//页面在滑动过程中不停触发该方法：position：当前滑动到的位置，positionOffset：偏移量的百分比，positionOffsetPixels：偏移量的数值
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
//ViewPager跳转到新页面时触发该方法，position表示新页面的位置。
public void onPageSelected(int position) {
switch (position){
case 0:
textView01.setTextColor(android.graphics.Color.parseColor("#ffffff"));
textView02.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView03.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView01.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
textView02.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
textView03.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
//把当前位置传递到动画方法中，进行滑动
movePositionX(0);
break;
case 1:
textView01.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView02.setTextColor(android.graphics.Color.parseColor("#ffffff"));
textView03.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView01.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
textView02.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
textView03.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
//把当前位置传递到动画方法中，进行滑动
movePositionX(1);
break;
case 2:
textView01.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView02.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView03.setTextColor(android.graphics.Color.parseColor("#ffffff"));
textView01.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
textView02.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
textView03.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
//把当前位置传递到动画方法中，进行滑动
movePositionX(2);
break;
}
}
@Override
//当页面的滑动状态改变时该方法会被触发，页面的滑动状态有3个：“0”表示什么都不做，“1”表示开始滑动，“2”表示结束滑动。
public void onPageScrollStateChanged(int state) {
}
});
//初始化指示器位置
initPosition();
//把数据传递给适配器中，进行数据处理。
adapter = new ViewPagerAdapter(this,Mview);
vp.setAdapter(adapter);
}
private void initPosition() {
//很明显是通过BitmapFactory.decodeResource（）方法获取图片资源的宽度
img_wight = BitmapFactory.decodeResource(getResources(),R.drawable.img01).getWidth();
Log.i("Text","img_wight "+img_wight);
//看上面注释（01）
DisplayMetrics disp = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(disp);
w = disp.widthPixels;//获取了分辨率的宽度
Log.i("Text","wwwwww "+w);
Log.i("Text","w/Mview.size() "+w/Mview.size());
offset = ((w/Mview.size())-img_wight)/2;// 计算偏移量
Log.i("Text","offsetoffset "+offset);
}
//页面滑动动画方法
private void movePositionX(int toPosition) {
int one = img_wight+offset*2;// 页面一到页面二移动量
int two = one * 2;// 页卡1 -> 页卡3 偏移量
Log.i("Text","oneoneone "+one);
//创建一个移动动画，用来实现滑动效果
Animation animation = null;
switch (toPosition) {
case 0:
if (currIndex == 1) {
animation = new TranslateAnimation(one, 0, 0, 0);
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, 0, 0, 0);
}
break;
case 1:
if (currIndex == 0) {
animation = new TranslateAnimation(0, one, 0, 0);
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, one, 0, 0);
}
break;
case 2:
if (currIndex == 0) {
animation = new TranslateAnimation(0, two, 0, 0);
} else if (currIndex == 1) {
animation = new TranslateAnimation(one, two, 0, 0);
}
break;
}
currIndex = toPosition;
animation.setFillAfter(true);// True:图片停在动画结束位置
animation.setDuration(300);
img01.startAnimation(animation);
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.textView01:
//绑定viewopager对应的页卡
Log.i("Text","textView01 +textView01 ");
vp.setCurrentItem(0);
break;
case R.id.textView02:
Log.i("Text","textView02 +textView02 ");
vp.setCurrentItem(1);
break;
case R.id.textView03:
vp.setCurrentItem(2);
Log.i("Text","textView03 +textView03 ");
break;
}
}
}
dome地址：http://download.youkuaiyun.com/detail/bobo8945510/9649864
扫一扫
1792
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
