viewPager的切换动画

今天在看苏州通的代码，里面有个引导的代码，涉及到viewPager的切换动画：

DepthPageTransformer ：

 1 package com.soyoungboy.guide;
 2 import android.annotation.TargetApi;
 3 import android.os.Build;
 4 import android.support.v4.view.ViewPager;
 5 import android.view.View;
 6 /**
 7 *
 8 * @ClassName: DepthPageTransformer
 9 * @Description: TODO(viewPager切换动画)
10 *
11 */
12 @TargetApi(Build.VERSION_CODES.HONEYCOMB)
13 publicclassDepthPageTransformerimplementsViewPager.PageTransformer{
14 privatestaticfloat MIN_SCALE =0.75f;
15 /**
16 * @Name transformPage
17 * @Description TODO(这里用一句话描述这个方法的作用)
18 * @param view
19 * 滑动中的那个view
20 * @param position
21 * position这里是float类型，不是平时理解的int位置，而是当前滑动状态的一个表示，比如当滑动到正全屏时，
22 * position是0
23 * ，而向左滑动，使得右边刚好有一部被进入屏幕时，position是1，如果前一页和下一页基本各在屏幕占一半时
24 * ，前一页的position是
25 * -0.5，后一页的posiotn是0.5，所以根据position的值我们就可以自行设置需要的alpha，x/y信息
26 * @see android.support.v4.view.ViewPager.PageTransformer#transformPage(android.view.View,
27 * float)
28 * @Date 2015-5-25 下午3:13:18
29 **/
30 @Override
31 publicvoid transformPage(View view,float position){
32 // TODO Auto-generated method stub
33 int pageWidth = view.getWidth();
34 if(position <-1){
35 //前一页
36 view.setAlpha(0);
37 }elseif(position <=0){
38 view.setAlpha(1);
39 view.setTranslationX(0);
40 view.setScaleX(1);
41 view.setScaleY(1);
42 }elseif(position <=1){
43 //后一页
44 view.setAlpha(1- position);
45 view.setTranslationX(pageWidth *-position);
46 float scaleFactor = MIN_SCALE +(1- MIN_SCALE)
47 *(1-Math.abs(position));
48 view.setScaleX(scaleFactor);
49 view.setScaleY(scaleFactor);
50 }else{
51 view.setAlpha(0);
52 }
53 }
54 }

ZoomOutPageTransformer ：

 1 package com.soyoungboy.guide;
 2 import android.annotation.TargetApi;
 3 import android.os.Build;
 4 import android.support.v4.view.ViewPager.PageTransformer;
 5 import android.view.View;
 6 @TargetApi(Build.VERSION_CODES.HONEYCOMB)
 7 publicclassZoomOutPageTransformerimplementsPageTransformer{
 8 privatestaticfloat MIN_SCALE =0.85f;
 9 privatestaticfloat MIN_ALPHA =0.5f;
10 @Override
11 publicvoid transformPage(View view,float position){
12 int pageWidth = view.getWidth();
13 int pageHeight = view.getHeight();
14 if(position <-1){// [-Infinity,-1)
15 // This page is way off-screen to the left.
16 view.setAlpha(0);
17 }elseif(position <=1){// [-1,1]
18 // Modify the default slide transition to
19 // shrink the page as well
20 float scaleFactor =Math.max(MIN_SCALE,1-Math.abs(position));
21 float vertMargin = pageHeight *(1- scaleFactor)/2;
22 float horzMargin = pageWidth *(1- scaleFactor)/2;
23 if(position <0){
24 view.setTranslationX(horzMargin - vertMargin /2);
25 }else{
26 view.setTranslationX(-horzMargin + vertMargin /2);
27 }
28 // Scale the page down (between MIN_SCALE and 1)
29 view.setScaleX(scaleFactor);
30 view.setScaleY(scaleFactor);
31 // Fade the page relative to its size.
32 view.setAlpha(MIN_ALPHA +(scaleFactor - MIN_SCALE)
33 /(1- MIN_SCALE)*(1- MIN_ALPHA));
34 }else{// (1,+Infinity]
35 // This page is way off-screen to the right.
36 view.setAlpha(0);
37 }
38 }
39 }

activity里面使用动画：

  1 package com.soyoungboy.guide;
  2 import java.util.ArrayList;
  3 import java.util.List;
  4 import android.app.Activity;
  5 import android.content.Context;
  6 import android.content.SharedPreferences;
  7 import android.content.SharedPreferences.Editor;
  8 import android.os.Bundle;
  9 import android.support.v4.view.PagerAdapter;
 10 import android.support.v4.view.ViewPager;
 11 import android.support.v4.view.ViewPager.OnPageChangeListener;
 12 import android.view.LayoutInflater;
 13 import android.view.View;
 14 import android.view.View.OnClickListener;
 15 import android.view.animation.Animation;
 16 import android.view.animation.AnimationSet;
 17 import android.view.animation.AnimationUtils;
 18 import android.widget.Button;
 19 import android.widget.ImageView;
 20 import android.widget.TextView;
 21 publicclassMainActivityextendsActivityimplementsOnPageChangeListener{
 22 privateTextView pageNum;
 23 privateViewPager vp;
 24 privateList<View> views;
 25 privateViewPagerAdapter vpAdapter;
 26 privateLayoutInflater inflater;
 27 @Override
 28 protectedvoid onCreate(Bundle savedInstanceState){
 29 super.onCreate(savedInstanceState);
 30 setContentView(R.layout.activity_main);
 31 inflater =LayoutInflater.from(this);
 32 initViews();
 33 initPageNum();
 34 }
 35 privatevoid initPageNum(){
 36 pageNum =(TextView) findViewById(R.id.page_num);
 37 pageNum.setText("");
 38 }
 39 privatevoid initViews(){
 40 views =newArrayList<View>();
 41 /**
 42 * 要加载的引导图片
 43 */
 44 views.add(inflater.inflate(R.layout.views_one,null));
 45 views.add(inflater.inflate(R.layout.views_two,null));
 46 views.add(inflater.inflate(R.layout.views_three,null));
 47 views.add(inflater.inflate(R.layout.views_four,null));
 48 vpAdapter =newViewPagerAdapter(views,this);
 49 vp =(ViewPager) findViewById(R.id.viewpager);
 50 vp.setPageTransformer(true,newDepthPageTransformer());
 51 // vp.setPageTransformer(true, new ZoomOutPageTransformer());
 52 vp.setAdapter(vpAdapter);
 53 vp.setOnPageChangeListener(this);
 54 }
 55 publicclassViewPagerAdapterextendsPagerAdapter{
 56 privateList<View> views;
 57 privateActivity activity;
 58 publicViewPagerAdapter(List<View> views,Activity activity){
 59 this.views = views;
 60 this.activity = activity;
 61 }
 62 @Override
 63 publicvoid destroyItem(View arg0,int arg1,Object arg2){
 64 ((ViewPager) arg0).removeView(views.get(arg1));
 65 }
 66 @Override
 67 publicint getCount(){
 68 if(views !=null){
 69 return views.size();
 70 }
 71 return0;
 72 }
 73 @Override
 74 publicObject instantiateItem(View arg0,int arg1){
 75 ((ViewPager) arg0).addView(views.get(arg1),0);
 76 if(arg1 ==0){
 77 AnimationSet animationSet =newAnimationSet(true);
 78 Animation alphaAnimation =AnimationUtils.loadAnimation(
 79 MainActivity.this, R.anim.alpha);
 80 Animation tAnimation =AnimationUtils.loadAnimation(
 81 MainActivity.this, R.anim.trans);
 82 animationSet.addAnimation(alphaAnimation);
 83 animationSet.addAnimation(tAnimation);
 84 ImageView imageView =(ImageView) arg0
 85 .findViewById(R.id.first_image);
 86 imageView.startAnimation(animationSet);
 87 }
 88 if(arg1 == views.size()-1){
 89 Button mStart =(Button) arg0.findViewById(R.id.mstart);
 90 mStart.setOnClickListener(newOnClickListener(){
 91 @Override
 92 publicvoid onClick(View v){
 93 setGuided();
 94 goHome();
 95 }
 96 });
 97 }
 98 return views.get(arg1);
 99 }
100 @Override
101 publicboolean isViewFromObject(View arg0,Object arg1){
102 return(arg0 == arg1);
103 }
104 publicvoid goHome(){
105 // Intent intent = new Intent(activity, ContentActivity.class);
106 // activity.startActivity(intent);
107 // overridePendingTransition(android.R.anim.fade_in,
108 // android.R.anim.fade_out);
109 // activity.finish();
110 }
111 publicvoid setGuided(){
112 SharedPreferences preferences = activity.getSharedPreferences(
113 "first_pref",Context.MODE_PRIVATE);
114 Editor editor = preferences.edit();
115 editor.putBoolean("isFirst",false);
116 editor.commit();
117 }
118 }
119 @Override
120 publicvoid onPageScrollStateChanged(int arg0){
121 // TODO Auto-generated method stub
122 }
123 @Override
124 publicvoid onPageScrolled(int arg0,float arg1,int arg2){
125 // TODO Auto-generated method stub
126 }
127 @Override
128 publicvoid onPageSelected(int arg0){
129 if(arg0 ==0){
130 pageNum.setText("");
131 }else{
132 pageNum.setTextColor(0xFF767676);
133 pageNum.setText(arg0 +1+" - 4");
134 }
135 }
136 publicvoid onResume(){
137 super.onResume();
138 }
139 publicvoid onPause(){
140 super.onPause();
141 }
142 }

activity_main.xml

 1 <RelativeLayoutxmlns: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 tools:context=".GuideActivity">
 6 <android.support.v4.view.ViewPager
 7 android:id="@+id/viewpager"
 8 android:layout_width="match_parent"
 9 android:layout_height="match_parent"/>
10 <TextView
11 android:id="@+id/page_num"
12 android:layout_width="wrap_content"
13 android:layout_height="wrap_content"
14 android:layout_alignParentBottom="true"
15 android:layout_centerHorizontal="true"
16 android:layout_marginBottom="45dp"
17 android:textSize="25sp"
18 android:textColor="#ffeeeeee"
19 android:text="hehe"/>
20 </RelativeLayout>
21 alpha.xml
22 <?xml version="1.0" encoding="utf-8"?>
23 <setxmlns:android="http://schemas.android.com/apk/res/android"
24 android:interpolator="@android:anim/accelerate_interpolator">
25 <alpha
26 android:duration="1000"
27 android:fromAlpha="0.0"
28 android:toAlpha="1.0">
29 </alpha>
30 </set>

trans.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <setxmlns:android="http://schemas.android.com/apk/res/android"
 3 android:interpolator="@android:anim/accelerate_interpolator">
 4 <translate
 5 android:duration="1000"
 6 android:fromXDelta="50%"
 7 android:fromYDelta="0%"
 8 android:toXDelta="0%"
 9 android:toYDelta="0%">
10 </translate>
11 </set>

views_one.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
 3 android:layout_width="match_parent"
 4 android:layout_height="match_parent"
 5 android:background="@drawable/welcomeback"
 6 android:orientation="vertical">
 7 <ImageView
 8 android:id="@+id/first_image"
 9 android:layout_width="wrap_content"
10 android:layout_height="wrap_content"
11 android:src="@drawable/welcome1"
12 android:layout_centerVertical="true"
13 android:layout_margin="20dp"/>
14 </RelativeLayout>

views_two.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
 3 android:layout_width="match_parent"
 4 android:layout_height="match_parent"
 5 android:background="#ffffffff"
 6 android:orientation="vertical"
 7 android:padding="20dp">
 8 <ImageView
 9 android:id="@+id/second_image"
10 android:layout_width="wrap_content"
11 android:layout_height="wrap_content"
12 android:layout_centerInParent="true"
13 android:src="@drawable/welcome2"/>
14 </RelativeLayout>

views_three.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp"
android:background="#ffffffff"
android:orientation="vertical">
<ImageView
android:id="@+id/third_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/welcome3"/>
</RelativeLayout>

views_four.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
 3 android:layout_width="match_parent"
 4 android:layout_height="match_parent"
 5 android:background="#ffffffff"
 6 android:orientation="vertical">
 7 <ImageView
 8 android:id="@+id/forth_image"
 9 android:layout_width="wrap_content"
10 android:layout_height="wrap_content"
11 android:layout_centerInParent="true"
12 android:src="@drawable/welcome4"/>
13 <Button
14 android:id="@+id/mstart"
15 android:layout_below="@+id/forth_image"
16 android:layout_width="wrap_content"
17 android:layout_height="wrap_content"
18 android:background="#00ffffff"
19 android:text="Start!"
20 android:layout_centerHorizontal="true"
21 android:textColor="#ffa4a4a4"
22 android:padding="20dp"/>
23 </RelativeLayout>

源码demo下载地址：

https://github.com/soyoungboy/Guide

对应引用：

https://github.com/soyoungboy/appcompat_v7

posted @ 2015-05-25 21:55 西北野狼阅读(295) 评论(0) 编辑收藏举报

刷新页面返回顶部

西北野狼

我的github： https://github.com/soyoungboy
我的segmentfault： http://segmentfault.com/u/soyoungboy

【年华留不住，留住蹭诗酒】

viewPager的切换动画

公告

西北野狼

我的github： https://github.com/soyoungboy 我的segmentfault： http://segmentfault.com/u/soyoungboy 【年华留不住，留住蹭诗酒】

viewPager的切换动画

公告

我的github： https://github.com/soyoungboy
我的segmentfault： http://segmentfault.com/u/soyoungboy

【年华留不住，留住蹭诗酒】