溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

怎么利用ViewPager實(shí)現(xiàn)一個(gè)翻頁(yè)效果

發(fā)布時(shí)間:2020-11-26 16:50:24 來(lái)源:億速云 閱讀:336 作者:Leah 欄目:移動(dòng)開(kāi)發(fā)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)怎么利用ViewPager實(shí)現(xiàn)一個(gè)翻頁(yè)效果,文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。

思路:

a.利用ViewPager自帶的動(dòng)畫(huà)效果,略作修改,實(shí)現(xiàn)滑動(dòng)覆蓋翻頁(yè)效果。

b.移動(dòng)時(shí)加入陰影效果。

1.關(guān)鍵代碼如下所示:

public class ReaderViewPager extends ViewPager {
 public ReaderViewPager(Context context) {
  this(context, null);
 }
 public ReaderViewPager(Context context, AttributeSet attrs) {
  super(context, attrs);
  setReadEffect();
  setScrollerDuration();
 }
 private void setScrollerDuration() {
  try {
   Field field = ViewPager.class.getDeclaredField("mScroller");
   field.setAccessible(true);
   FixedSpeedScroller scroller = new FixedSpeedScroller(getContext(),
     new DecelerateInterpolator());
   field.set(this, scroller);
   scroller.setmDuration(300);
  } catch (Exception e) {
   Log.e("@", "", e);
  }
 }
 public void setReadEffect() {
  setPageTransformer(true, new PageTransformer() {
   private static final float MIN_SCALE = 0.75f;
   @Override
   public void transformPage(View view, float position) {
    int pageWidth = view.getWidth();
     int pageHeight =view.getHeight();
    if (position < -1) { // [-Infinity,-1)
     // This page is way off-screen to the left.
     view.setAlpha(0);
    } else if (position <= 0) { // [-1,0]
     // Use the default slide transition when moving to the left page
     view.setAlpha(1);
     view.setTranslationX(0);
     view.setScaleX(1);
     view.setScaleY(1);
    } else if (position <= 1) { // (0,1]
     // Fade the page out.
//     view.setAlpha(1 - position);
//
//     // Counteract the default slide transition
     view.setAlpha(1);
     view.setTranslationX(pageWidth * -position);
//
//     // Scale the page down (between MIN_SCALE and 1)
//     float scaleFactor = MIN_SCALE
//       + (1 - MIN_SCALE) * (1 - Math.abs(position));
//     view.setScaleX(scaleFactor);
//     view.setScaleY(scaleFactor);
    } else { // (1,+Infinity]
     // This page is way off-screen to the right.
     view.setAlpha(0);
    }
   }
  });
 }
}

2.陰影效果添加(其實(shí)陰影是一張圖片,本來(lái)是要在ReadViewPager內(nèi)部添加陰影效果,但是不顯示,貌似被ReadViewPage自己遮住了,就用笨辦法實(shí)現(xiàn)了^_^):

<FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">
<com.example.zhangyipeng.anwerdemo.view.ReaderViewPager
   android:id="@+id/readerViewPager"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />
  <!--陰影-->
  <ImageView
   android:id="@+id/shadowView"
   android:layout_width="20dp"
   android:layout_height="match_parent"
android:background="@mipmap/shadow_right"/>
 </FrameLayout>

3.陰影隨翻頁(yè)而移動(dòng)效果實(shí)現(xiàn)

readerViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
   @Override
   public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    shadowView.setTranslationX(readerViewPager.getWidth()-positionOffsetPixels);
   }
   @Override
   public void onPageSelected(int position) {
   }
   @Override
   public void onPageScrollStateChanged(int state) {
   }
  });

上述就是小編為大家分享的怎么利用ViewPager實(shí)現(xiàn)一個(gè)翻頁(yè)效果了,如果剛好有類(lèi)似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI