ViewPager實現帶有動畫的引導頁，供大家參考，具體內容如下
好了，又到我們學習基礎控件的時候了，其實引導頁很簡單，就是五張圖片而已
一、ViewPager實現傳統的引導頁
傳統的ViewPager實現引導頁和ListView是一樣道理的，只是把ListView的Item換成圖片，把BaseAdapter換成PagerAdapter，我們先來看下傳統引導頁的效果圖
步驟一：編寫xml文件
既然用到的是ViewPager，那么xml文件就必須要有ViewPager，細心的你，可能會發現最后一頁還有個按鈕的出現，沒錯，xml文件中也要有個按鈕
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/vp_guide"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="@+id/bt_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:layout_marginBottom="50dp"
android:background="@color/colorPrimary"
android:padding="6dp"
android:text="立即開啟"
android:textColor="#fff"
android:textSize="16dp"
android:visibility="gone" />
</RelativeLayout>
步驟二：編寫Adapter
開頭也說了，Viewpager其實就和ListView一樣的，需要一個Adapter，那么就從Adapter入手。Google提供了一個專門適配ViewPager的Adapter——PagerAdapter
public class GuideAdapter extends PagerAdapter {
private List<View> views;
private Context context;
public GuideAdapter(List<View> views, Context context) {
this.context = context;
this.views = views;
}
public Object instantiateItem(View container, int position) {
((ViewPager) container).addView(views.get(position));
return views.get(position);
}
public void destroyItem(View container, int position, Object object) {
((ViewPager) container).removeView(views.get(position));
}
public int getCount() {
return views.size();
}
public boolean isViewFromObject(View arg0, Object arg1) {
return (arg0 == arg1);
}
}
基本ViewPager的Adapter都是這么寫的，就是往ViewPager中添加List傳過來的View和刪除List傳過來的View，可以說是每個ViewPager的模板
步驟三：編寫Activity
我們找到對應的ViewPager，然后設置Adapter，代碼中的initViews、initListener、initData是按順序執行下去的，這段代碼不難，很容易看懂
public class GuideActivity extends BaseActivity implements ViewPager.OnPageChangeListener {
private ViewPager vp_guide;
private int[] imgId = {R.drawable.guide_center_1, R.drawable.guide_center_2, R.drawable.guide_center_3,
R.drawable.guide_center_4, R.drawable.guide_center_5};
private List<View> mImageViews;
private GuideAdapter adapter;
private Button bt_main;
@Override
public void initViews() {
setContentView(R.layout.activity_guide);
vp_guide = (ViewPager) findViewById(R.id.vp_guide);
bt_main = (Button) findViewById(R.id.bt_main);
}
@Override
public void initListener() {
bt_main.setOnClickListener(this);
vp_guide.setOnPageChangeListener(this);
}
@Override
public void initData() {
//初始化引導資源
mImageViews = new ArrayList<>();
for (int i = 0; i < imgId.length; i++) {
ImageView imageView = new ImageView(this);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setImageResource(imgId[i]);
mImageViews.add(imageView);
}
//設置引導頁
adapter = new GuideAdapter(mImageViews, this);
vp_guide.setAdapter(adapter);
}
@Override
public void processClick(View v) {
switch (v.getId()) {
//按鈕點擊事件，跳轉到主頁面
case R.id.bt_main:
Intent intent = new Intent(GuideActivity.this, MainActivity.class);
startActivity(intent);
finish();
break;
}
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (position == imgId.length - 1) {
//最后一個，實現動畫浮現
bt_main.setVisibility(View.VISIBLE);
AlphaAnimation aa = new AlphaAnimation(0, 1f);
aa.setDuration(1000);
bt_main.startAnimation(aa);
} else {
bt_main.setVisibility(View.GONE);
}
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
細心的你可能也發現了該引導頁是沒有狀態欄的，所以我們需要設置其主題為狀態欄透明
<activity android:name=".Activity.GuideActivity" android:theme="@android:style/Theme.NoTitleBar.Fullscreen"/>
特別注意：這里需要注意的是圖片的大小問題，如果圖片高清太大，可能會出現內存溢出的錯誤。
二、ViewPager實現帶有動畫的引導頁
帶有動畫的引導頁編寫步驟和傳統是一模一樣的，只不過給ViewPager設置一個動畫。Google提供ViewPager.setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer)方法來設置引導頁的切換效果，這里先看Google提供的切換Demo
步驟一：編寫PageTransformer
從上面效果看出，只是在引導頁之間添加了一個動畫而已，而Google提供的PageTransformer就可以對當前位置的引導頁進行操作，比如：設置透明度的變化，設置縮放的變化，就能實現切換的動畫效果
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
@Override
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) {
view.setAlpha(0);
} else if (position <= 0) {
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) {
view.setAlpha(1 - position);
view.setTranslationX(pageWidth * -position);
float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else {
view.setAlpha(0);
}
}
}
步驟二：分析PageTransformer
從上面的代碼中，可以知道在ViewPager滑動的時候，會觸發transformPage這個方法，并且會將當前的position和View傳遞過來，下面就是我們的對View的操作
① position
position < -1（即-無窮到-1）：讓引導頁消失，透明度為0
position <= 0（即-1到0）：讓引導頁出現
position <= 1（即0到1）：讓引導頁根據position做動畫
剩下else（即1到無窮）：讓引導頁消失，透明度為0
② 圖解position
原諒我畫圖不好看，不生動，如果還不理解的話可以自己打印Log信息，把View和Position都打印出來幫助理解
步驟三：使用PageTransformer
使用PageTransformer非常簡單，只要通過ViewPager設置即可
vp_guide.setPageTransformer(true, new DepthPageTransformer());
三、其他動畫的引導頁的參考
Google還為我們提供了另一個動畫效果，看效果圖
實現步驟其實和上面的步驟是一樣的，具體我們來看PageTransformer的編寫
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.85f;
private static final float MIN_ALPHA = 0.5f;
@SuppressLint("NewApi")
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position < -1) {
view.setAlpha(0);
} else if (position <= 1) {
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
view.setTranslationX(horzMargin - vertMargin / 2);
} else {
view.setTranslationX(-horzMargin + vertMargin / 2);
}
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else {
view.setAlpha(0);
}
}
}
這里的原理就不分析了，和上面是一樣的，只不過操作不同而已。除了Google提供的Demo之外，我們可以模仿谷歌的Demo，編寫出我們自己的動畫效果
public class RotateDownPageTransformer implements ViewPager.PageTransformer {
private static final float ROT_MAX = 20.0f;
private float mRot;
public void transformPage(View view, float position) {
if (position < -1) {
ViewHelper.setRotation(view, 0);
} else if (position <= 1) {
//[-1,1]
mRot = (ROT_MAX * position);
ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f);
ViewHelper.setPivotY(view, view.getMeasuredHeight());
ViewHelper.setRotation(view, mRot);
} else {
ViewHelper.setRotation(view, 0);
}
}
}
效果如圖
好了，今天基礎控件就到這里了，如果不懂的話可以自己實踐一下，然后用紙筆思考思考，你就會有收獲的。我也是通過博客學習別人的博客，然后通過自己的方式，將學習的內容寫出來。我們一起加油，后來者們
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
