Android原生ViewPager控件實現(xiàn)卡片翻動效果
本文實例為大家分享了Android控件ViewPager實現(xiàn)卡片翻動效果的具體代碼,供大家參考,具體內(nèi)容如下
先放一張效果圖:
想要實現(xiàn)這樣的效果其實并不是太難,需要對ViewPager的一些細節(jié)屬性更深入的了解和認識,下面介紹下一個小demo的實現(xiàn)過程:
第一步、創(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滑動切換動畫效果:
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 } } }
第五步、開始調(diào)用實現(xiàn)卡片效果的關(guān)鍵代碼:
class MainActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main7) //設(shè)置ViewPager中兩頁之間的距離 // viewpager?.setPageMargin(80) //自定義ViewPager的頁面切換動畫 viewpager?.setPageTransformer(false, CardTransformer(applicationContext)) //設(shè)置viewpager預(yù)加載的頁數(shù) viewpager?.offscreenPageLimit = 5 viewpager?.currentItem = 12 * 15 viewpager?.setAdapter(CardAdapter(this)) } }
到這里就基本實現(xiàn)了想要的卡片滑動切換和展示效果了!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android使用RollViewPager實現(xiàn)輪播圖
- Android使用ViewPager實現(xiàn)啟動引導(dǎo)頁效果
- Android使用ViewPager完成app引導(dǎo)頁
- Android ViewPager實現(xiàn)滑動指示條功能
- android使用ViewPager實現(xiàn)圖片自動切換
- Android自定義引導(dǎo)玩轉(zhuǎn)ViewPager的方法詳解
- android使用viewpager計算偏移量實現(xiàn)選項卡功能
- Android使用ViewPager快速切換Fragment時卡頓的優(yōu)化方案
- Android Studio使用ViewPager+Fragment實現(xiàn)滑動菜單Tab效果
- Android用viewPager2實現(xiàn)UI界面翻頁滾動的效果
相關(guān)文章
Android 判斷是否是是全漢字、全字母、全數(shù)字、數(shù)字和字母等(代碼)
這篇文章主要介紹了Android 判斷是否是是全漢字、全字母、全數(shù)字、數(shù)字和字母等的實例代碼,需要的朋友可以參考下2016-12-12Android自定義SeekBar實現(xiàn)滑動驗證且不可點擊
這篇文章主要為大家詳細介紹了Android自定義SeekBar實現(xiàn)滑動驗證且不可點擊,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-03-03Android中TextView自動識別url且實現(xiàn)點擊跳轉(zhuǎn)
這篇文章主要介紹了關(guān)于Android中TextView自動識別url且實現(xiàn)點擊跳轉(zhuǎn)的相關(guān)資料,文中給出了詳細的示例代碼,對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。2017-03-03Android實戰(zhàn)項目之實現(xiàn)一個簡單計算器
隨著移動互聯(lián)網(wǎng)的普及,手機應(yīng)用程序已經(jīng)成為人們生活中不可或缺的一部分,計算器是一類被廣泛使用的應(yīng)用程序之一,這篇文章主要給大家介紹了關(guān)于Android實戰(zhàn)項目之實現(xiàn)一個簡單計算器的相關(guān)資料,需要的朋友可以參考下2023-10-10android?studio實現(xiàn)簡單的計算器小功能
這篇文章主要為大家詳細介紹了android?studio實現(xiàn)簡單的計算器小功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05Android開發(fā)實現(xiàn)在TextView前面加標簽示例
這篇文章主要為大家介紹了Android開發(fā)實現(xiàn)TextView前面加標簽示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-04-04基于Android中Webview使用自定義的javascript進行回調(diào)的問題詳解
本篇文章對Android中Webview使用自定義的javascript進行回調(diào)的問題進行了詳細的分析介紹。需要的朋友參考下2013-05-05