今天在群里看見一個引導頁的效果，感覺好不錯，于是就擼了下，先看看效果圖
我們可以看到，當我們滑動頁面的時候，會有一個動畫的過渡效果，妹子是不是挺不錯的，哈哈哈，我特意找的，好了，我們看看怎么實現這種效果
思路：
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
