今天在群里看见一个引导页的效果，感觉好不错，于是就撸了下，先看看效果图
我们可以看到，当我们滑动页面的时候，会有一个动画的过渡效果，妹子是不是挺不错的，哈哈哈，我特意找的，好了，我们看看怎么实现这种效果
思路：
1，首先需要一个viewPager
2，需要一个透明度变化的动画
3，viewPager滑动后，启动动画，达到过渡的效果
那么，我们知道我们需要的这些东西以及大概的逻辑处理后，我们想想怎么去写，首先我们来看看我们的透明度动画文件
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="2000"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
</set>
看到这个动画文件，有些可能猜到是怎么做的了，没错，我们可以用两个imageView来重叠，当我们滑动viewPager的时候，我们让imageView1做透明度动画效果，其实在做动画效果之前，我们的imageView2已经是加载了一张图片，那么，就会出现这种过渡的现象，我们来看看我们的布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.administrator.myviewpager.MainActivity">
<ImageView
android:id="@+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/image2" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/image1" />
<com.example.administrator.myviewpager.MyViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
当activity启动的时候，我们imageView1和imageView2默认都加载了图片，可以看到，imageView1叠加在imageView2上面，然后就是我们的viewPager，这里为什么是自定义的viewPager，等等在说明
现在我们来看看activity的代码
package com.example.administrator.myviewpager;
import android.graphics.Color;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private MyViewPager viewPager;
private ImageView imageView1, imageView2;
private String[] title = {"第一页", "第二页", "第三页"};
private List<View> viewList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (MyViewPager) findViewById(R.id.viewPager);
imageView1 = (ImageView) findViewById(R.id.imageView1);
imageView2 = (ImageView) findViewById(R.id.imageView2);
viewPager.setScroll(false);
viewList = new ArrayList<>();
for (int i = 0; i < title.length; i++) {
TextView textView = new TextView(this);
textView.setText(title[i]);
textView.setGravity(Gravity.CENTER);
textView.setTextColor(Color.BLACK);
textView.setTextSize(16);
viewList.add(textView);
}
viewPager.setAdapter(new PagerAdapter() {
@Override
public int getCount() {
return viewList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
// TODO Auto-generated method stub
container.removeView(viewList.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
container.addView(viewList.get(position));
return viewList.get(position);
}
});
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(final int position) {
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha);
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
if (position == 0) {
imageView2.setImageResource(R.mipmap.image1);
} else if (position == 1) {
imageView2.setImageResource(R.mipmap.image2);
} else if (position == 2) {
imageView2.setImageResource(R.mipmap.image3);
}
viewPager.setScroll(true);
}
@Override
public void onAnimationEnd(Animation animation) {
if (position == 0) {
imageView1.setImageResource(R.mipmap.image1);
} else if (position == 1) {
imageView1.setImageResource(R.mipmap.image2);
} else if (position == 2) {
imageView1.setImageResource(R.mipmap.image3);
}
imageView1.clearAnimation();
viewPager.setScroll(false);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
imageView1.setAnimation(animation);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
}
为了可以更好的看出页面的变化，我这里用textView来表示页面，然后就是viewPager的adapter，相信这没什么难度，我们来重点看看addOnPageChangeListener方法
这个方法相信大家都知道，就是viewPager的滑动监听方法，关于这个方法的使用这里不做过多的介绍，不懂的可以去网上看看，我们在onPageSelected方法中引用我们刚刚的动画，并且对它进行监听，不难理解这里的代码，我们在动画之前，根据不同的页面来设置imageView2的背景图片，然后再动画结束之后，设置了imageView1的图片，那么，当我们滑动之后，我们imageView1进行动画过渡，当透明度变化了，就可以达到了一种从有到无的假像效果，然后动画结束了，我们就把它清除掉
细心的你可能已经看到了，我们在动开始和结束都有一个viewPager.setScroll()的方法，从方法名字我们不难看出，它决定了viewPager是否可以滑动，想想为什么需要它？因为，如果我们设置了动画过渡时间是比较长，动画没有完成的时候，我们再去切换viewPager，那么就问题来了，动画效果就没有了，所以，我们需要在动画开始的时候，禁止viewPager的滑动，结束了再设置它可以滑动，下面我们就来看看viewPager的代码
package com.example.administrator.myviewpager;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
public class MyViewPager extends ViewPager {
private boolean scroll = true;
public MyViewPager(Context context) {
super(context);
}
public MyViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void setScroll(boolean scroll) {
this.scroll = scroll;
}
@Override
public void scrollTo(int x, int y) {
super.scrollTo(x, y);
}
@Override
public boolean onTouchEvent(MotionEvent arg0) {
/*return false;//super.onTouchEvent(arg0);*/
if (scroll)
return false;
else
return super.onTouchEvent(arg0);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent arg0) {
if (scroll)
return false;
else
return super.onInterceptTouchEvent(arg0);
}
@Override
public void setCurrentItem(int item, boolean smoothScroll) {
super.setCurrentItem(item, smoothScroll);
}
@Override
public void setCurrentItem(int item) {
super.setCurrentItem(item);
}
}
代码很简单，我们继承viewPager来重新设置它的事件分发，如果是true，我们就返回false，否则就让它滑动
代码已经上传到GitHub，有兴趣的可以下载来看看
https://github.com/ReturnYhh/MyViewPager
网友评论