Android原生ViewPager控件實(shí)現(xiàn)卡片翻動(dòng)效果
本文實(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)過程:
第一步、創(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)畫效果:
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)用實(shí)現(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的頁面切換動(dòng)畫 viewpager?.setPageTransformer(false, CardTransformer(applicationContext)) //設(shè)置viewpager預(yù)加載的頁數(shù) viewpager?.offscreenPageLimit = 5 viewpager?.currentItem = 12 * 15 viewpager?.setAdapter(CardAdapter(this)) } }
到這里就基本實(shí)現(xiàn)了想要的卡片滑動(dòng)切換和展示效果了!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android使用RollViewPager實(shí)現(xiàn)輪播圖
- Android使用ViewPager實(shí)現(xiàn)啟動(dòng)引導(dǎo)頁效果
- Android使用ViewPager完成app引導(dǎo)頁
- Android ViewPager實(shí)現(xiàn)滑動(dòng)指示條功能
- android使用ViewPager實(shí)現(xiàn)圖片自動(dòng)切換
- Android自定義引導(dǎo)玩轉(zhuǎn)ViewPager的方法詳解
- android使用viewpager計(jì)算偏移量實(shí)現(xiàn)選項(xiàng)卡功能
- Android使用ViewPager快速切換Fragment時(shí)卡頓的優(yōu)化方案
- Android Studio使用ViewPager+Fragment實(shí)現(xiàn)滑動(dòng)菜單Tab效果
- Android用viewPager2實(shí)現(xiàn)UI界面翻頁滾動(dòng)的效果
相關(guān)文章
Android 判斷是否是是全漢字、全字母、全數(shù)字、數(shù)字和字母等(代碼)
這篇文章主要介紹了Android 判斷是否是是全漢字、全字母、全數(shù)字、數(shù)字和字母等的實(shí)例代碼,需要的朋友可以參考下2016-12-12Android自定義SeekBar實(shí)現(xiàn)滑動(dòng)驗(yàn)證且不可點(diǎn)擊
這篇文章主要為大家詳細(xì)介紹了Android自定義SeekBar實(shí)現(xiàn)滑動(dòng)驗(yàn)證且不可點(diǎn)擊,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03Android數(shù)據(jù)存儲(chǔ)之SQLite使用
SQLite是D.Richard Hipp用C語言編寫的開源嵌入式數(shù)據(jù)庫(kù)引擎。它支持大多數(shù)的SQL92標(biāo)準(zhǔn),并且可以在所有主要的操作系統(tǒng)上運(yùn)行2016-01-01Android中TextView自動(dòng)識(shí)別url且實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)
這篇文章主要介紹了關(guān)于Android中TextView自動(dòng)識(shí)別url且實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)的相關(guān)資料,文中給出了詳細(xì)的示例代碼,對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-03-03Android實(shí)戰(zhàn)項(xiàng)目之實(shí)現(xiàn)一個(gè)簡(jiǎn)單計(jì)算器
隨著移動(dòng)互聯(lián)網(wǎng)的普及,手機(jī)應(yīng)用程序已經(jīng)成為人們生活中不可或缺的一部分,計(jì)算器是一類被廣泛使用的應(yīng)用程序之一,這篇文章主要給大家介紹了關(guān)于Android實(shí)戰(zhàn)項(xiàng)目之實(shí)現(xiàn)一個(gè)簡(jiǎn)單計(jì)算器的相關(guān)資料,需要的朋友可以參考下2023-10-10Android實(shí)現(xiàn)APP自動(dòng)更新功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)APP自動(dòng)更新功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05android?studio實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器小功能
這篇文章主要為大家詳細(xì)介紹了android?studio實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器小功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05Android開發(fā)實(shí)現(xiàn)在TextView前面加標(biāo)簽示例
這篇文章主要為大家介紹了Android開發(fā)實(shí)現(xiàn)TextView前面加標(biāo)簽示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04基于Android中Webview使用自定義的javascript進(jìn)行回調(diào)的問題詳解
本篇文章對(duì)Android中Webview使用自定義的javascript進(jìn)行回調(diào)的問題進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-05