Android原生ViewPager控件實(shí)現(xiàn)卡片翻動(dòng)效果

更新時(shí)間：2022年02月16日 07:53:00 作者：晨諾星空

這篇文章主要為大家詳細(xì)介紹了Android原生ViewPager控件實(shí)現(xiàn)卡片翻動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Android控件ViewPager實(shí)現(xiàn)卡片翻動(dòng)效果的具體代碼，供大家參考，具體內(nèi)容如下

先放一張效果圖：

想要實(shí)現(xiàn)這樣的效果其實(shí)并不是太難，需要對(duì)ViewPager的一些細(xì)節(jié)屬性更深入的了解和認(rèn)識(shí)，下面介紹下一個(gè)小demo的實(shí)現(xiàn)過(guò)程：

第一步、創(chuàng)建卡片viewpager適配器的itemview的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@drawable/bitmap"
  android:gravity="center">

  <ImageView
    android:id="@+id/home_viewpage_item_img"
    android:paddingBottom="@dimen/dp_82"
    android:paddingTop="@dimen/dp_82"
    android:paddingLeft="@dimen/dp_44"
    android:paddingRight="@dimen/dp_44"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/ic_launcher" />
</RelativeLayout>

第二步、創(chuàng)建適配器：

class CardAdapter(var context: Context) : PagerAdapter() {
  val horoscopestrImgs = intArrayOf(R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher,
      R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher)

  override fun isViewFromObject(view: View, `object`: Any): Boolean {
    return view === `object`
  }

  override fun getCount(): Int {
    return 12 * 30
  }

  override fun instantiateItem(container: ViewGroup, position: Int): Any {
    val view = LayoutInflater.from(context).inflate(R.layout.home_viewpage_item, null)


    view.home_viewpage_item_img.setImageResource(horoscopestrImgs.get(position%12))

    container.addView(view)
    return view
  }

  override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
    container.removeView(`object` as View)

  }
}

第三步、創(chuàng)建放viewpager控件的布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:background="#fff"
  android:layout_height="match_parent" >


  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    android:overScrollMode="never"
    android:paddingBottom="@dimen/dp_240"
    android:paddingLeft="50dp"
    android:paddingRight="50dp"
    android:paddingTop="@dimen/dp_60" />

</RelativeLayout>

第四步、創(chuàng)建viewpager滑動(dòng)切換動(dòng)畫(huà)效果：

class CardTransformer(var context: Context) :ViewPager.PageTransformer{
  val TAG = "CardTransformer"
  private val MAX_SCALE = 1.0f
  private val MIN_SCALE = 0.85f//0.85f
  var animator:ObjectAnimator?=null


  override fun transformPage(page: View, position: Float) {
    //設(shè)置了內(nèi)間距  有0.15的偏差
     var pos=position -0.15.toFloat()

    if ( pos <= 1) {
      val scaleFactor = MIN_SCALE + (1 - Math.abs(pos)) * (MAX_SCALE - MIN_SCALE)

      page.scaleX = scaleFactor //縮放效果
      if (pos > 0) {
        page.translationX = -scaleFactor * 2
      } else if (pos < 0 && pos > -1) {
        page.translationX = scaleFactor * 2
      }
      page.scaleY = scaleFactor


    } else {
      page.scaleX = MIN_SCALE
      page.scaleY = MIN_SCALE
    }

  }
}

第五步、開(kāi)始調(diào)用實(shí)現(xiàn)卡片效果的關(guān)鍵代碼：

class MainActivity : Activity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main7)


    //設(shè)置ViewPager中兩頁(yè)之間的距離
    // viewpager?.setPageMargin(80)

    //自定義ViewPager的頁(yè)面切換動(dòng)畫(huà)
    viewpager?.setPageTransformer(false, CardTransformer(applicationContext))
    //設(shè)置viewpager預(yù)加載的頁(yè)數(shù)
    viewpager?.offscreenPageLimit = 5
    viewpager?.currentItem = 12 * 15
    viewpager?.setAdapter(CardAdapter(this))
  }


}

到這里就基本實(shí)現(xiàn)了想要的卡片滑動(dòng)切換和展示效果了！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: