Android控件ViewPager實現(xiàn)帶有動畫的引導(dǎo)頁

2019-12-12 02:49:39

字體：大中小

供稿：網(wǎng)友

ViewPager實現(xiàn)帶有動畫的引導(dǎo)頁，供大家參考，具體內(nèi)容如下

好了，又到我們學(xué)習(xí)基礎(chǔ)控件的時候了，其實引導(dǎo)頁很簡單，就是五張圖片而已

一、ViewPager實現(xiàn)傳統(tǒng)的引導(dǎo)頁

傳統(tǒng)的ViewPager實現(xiàn)引導(dǎo)頁和ListView是一樣道理的，只是把ListView的Item換成圖片，把BaseAdapter換成PagerAdapter，我們先來看下傳統(tǒng)引導(dǎo)頁的效果圖

步驟一：編寫xml文件

既然用到的是ViewPager，那么xml文件就必須要有ViewPager，細(xì)心的你，可能會發(fā)現(xiàn)最后一頁還有個按鈕的出現(xiàn)，沒錯，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

我們找到對應(yīng)的ViewPager，然后設(shè)置Adapter，代碼中的initViews、initListener、initData是按順序執(zhí)行下去的，這段代碼不難，很容易看懂

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() {    //初始化引導(dǎo)資源    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);    }    //設(shè)置引導(dǎo)頁    adapter = new GuideAdapter(mImageViews, this);    vp_guide.setAdapter(adapter);  }  @Override  public void processClick(View v) {    switch (v.getId()) {      //按鈕點擊事件，跳轉(zhuǎn)到主頁面      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) {      //最后一個，實現(xiàn)動畫浮現(xiàn)      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) {  }}

細(xì)心的你可能也發(fā)現(xiàn)了該引導(dǎo)頁是沒有狀態(tài)欄的，所以我們需要設(shè)置其主題為狀態(tài)欄透明

<activity  android:name=".Activity.GuideActivity"  android:theme="@android:style/Theme.NoTitleBar.Fullscreen"/>

特別注意：這里需要注意的是圖片的大小問題，如果圖片高清太大，可能會出現(xiàn)內(nèi)存溢出的錯誤。

二、ViewPager實現(xiàn)帶有動畫的引導(dǎo)頁

帶有動畫的引導(dǎo)頁編寫步驟和傳統(tǒng)是一模一樣的，只不過給ViewPager設(shè)置一個動畫。Google提供ViewPager.setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer)方法來設(shè)置引導(dǎo)頁的切換效果，這里先看Google提供的切換Demo

步驟一：編寫PageTransformer

從上面效果看出，只是在引導(dǎo)頁之間添加了一個動畫而已，而Google提供的PageTransformer就可以對當(dāng)前位置的引導(dǎo)頁進行操作，比如：設(shè)置透明度的變化，設(shè)置縮放的變化，就能實現(xiàn)切換的動畫效果

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滑動的時候，會觸發(fā)transformPage這個方法，并且會將當(dāng)前的position和View傳遞過來，下面就是我們的對View的操作

① position

position < -1（即-無窮到-1）：讓引導(dǎo)頁消失，透明度為0
position <= 0（即-1到0）：讓引導(dǎo)頁出現(xiàn)
position <= 1（即0到1）：讓引導(dǎo)頁根據(jù)position做動畫
剩下else（即1到無窮）：讓引導(dǎo)頁消失，透明度為0

② 圖解position

原諒我畫圖不好看，不生動，如果還不理解的話可以自己打印Log信息，把View和Position都打印出來幫助理解

步驟三：使用PageTransformer

使用PageTransformer非常簡單，只要通過ViewPager設(shè)置即可

vp_guide.setPageTransformer(true, new DepthPageTransformer());

三、其他動畫的引導(dǎo)頁的參考

Google還為我們提供了另一個動畫效果，看效果圖

實現(xiàn)步驟其實和上面的步驟是一樣的，具體我們來看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);    }  }}

效果如圖