Android CardView+ViewPager實(shí)現(xiàn)ViewPager翻頁(yè)動(dòng)畫(huà)的方法
Viewpager通俗一點(diǎn)講就是一個(gè)允許左右翻轉(zhuǎn)帶數(shù)據(jù)的頁(yè)面的布局管理器,經(jīng)常用來(lái)連接Fragment,它很方便管理每個(gè)頁(yè)面的生命周期,使用ViewPager管理Fragment是標(biāo)準(zhǔn)的適配器實(shí)現(xiàn)。最常用的實(shí)現(xiàn)一般有FragmentPagerAdapter和FragmentStatePagerAdapter。自行百度它的用法。今天我們要實(shí)現(xiàn)的是下面的效果:
NO PICTURE TALK A JB
要實(shí)現(xiàn)圖中的效果需要以下幾個(gè)知識(shí)點(diǎn):
1.clipChildren屬性
2.一個(gè)頁(yè)面顯示多個(gè)ViewPager的Item
3.自定義PagerTransformer
4.ViewPager結(jié)合CardView
1.clipChildren 屬性
clipchildren :是否限制子View在其范圍內(nèi),當(dāng)我們將其值設(shè)置為false后那么在子控件的高度高于父控件時(shí)也會(huì)完全顯示,而不會(huì)被壓縮,(上面中間的按鈕超過(guò)上面的陰影線,依舊可以正常顯示),默認(rèn)的時(shí)候是true。
了解了這個(gè)屬性就可以讓一個(gè)頁(yè)面顯示多個(gè)Viewpager的Item
2.一個(gè)頁(yè)面顯示多個(gè)ViewPager的Item
直接在xml布局文件中配置:android:clipToPadding="false"
<?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/background"> <!--1. 中間可滑動(dòng)的viewPager--> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentBottom="true" android:clipToPadding="false" android:paddingEnd="48dp" android:paddingLeft="48dp" android:paddingRight="48dp" android:paddingStart="48dp" /> <RelativeLayout android:id="@+id/bottom_layout" android:layout_width="match_parent" android:layout_height="55dp" android:layout_alignParentBottom="true"> <ImageView android:id="@+id/img_like" android:layout_width="38dp" android:layout_height="38dp" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:src="@drawable/icon2" /> </RelativeLayout> <TextView android:id="@+id/indicator_tv" android:layout_width="wrap_content" android:layout_height="20dp" android:layout_above="@+id/bottom_layout" android:layout_centerHorizontal="true" android:gravity="center_vertical" android:text="1/199" android:textColor="#ffffff" android:textSize="16sp" /> <!--4. 頂部的titleBar--> <LinearLayout android:id="@+id/linearLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <!--沉浸式activity,這個(gè)view是用來(lái)占位的--> <View android:id="@+id/position_view" android:layout_width="1px" android:layout_height="1px" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="55dp" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="地圖操作" android:textColor="#ffffff" android:textSize="16sp" /> </RelativeLayout> </LinearLayout> </RelativeLayout>
3.自定義ViewPager翻頁(yè)動(dòng)畫(huà)
直接上代碼
public class CustPagerTransformer implements ViewPager.PageTransformer { private int maxTranslateOffsetX; private ViewPager viewPager; public CustPagerTransformer(Context context) { this.maxTranslateOffsetX = dp2px(context, 180); } public void transformPage(View view, float position) { if (viewPager == null) { viewPager = (ViewPager) view.getParent(); } int leftInScreen = view.getLeft() - viewPager.getScrollX(); int centerXInViewPager = leftInScreen + view.getMeasuredWidth() / 2; int offsetX = centerXInViewPager - viewPager.getMeasuredWidth() / 2; float offsetRate = (float) offsetX * 0.38f / viewPager.getMeasuredWidth(); float scaleFactor = 1 - Math.abs(offsetRate); if (scaleFactor > 0) { view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); view.setTranslationX(-maxTranslateOffsetX * offsetRate); } } /** * dp和像素轉(zhuǎn)換 */ private int dp2px(Context context, float dipValue) { float m = context.getResources().getDisplayMetrics().density; return (int) (dipValue * m + 0.5f); } }
使用方法
// 1. viewPager添加parallax效果,使用PageTransformer就足夠了 viewPager.setPageTransformer(false, new CustPagerTransformer(this));
4.CardView 與Viewpager聯(lián)合使用
先看viewpager的一個(gè)item布局
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <cn.yznu.gdmapoperate.ui.widget.AspectRatioCardView android:id="@+id/card_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginBottom="20dp" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" app:cardCornerRadius="5dp" app:cardElevation="6dp" app:cardMaxElevation="6dp"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" android:background="@drawable/bg_map" android:contentDescription="@string/app_name" android:scaleType="centerCrop" /> <ImageView android:id="@+id/image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:contentDescription="@string/app_name" android:scaleType="centerCrop" android:src="@drawable/map" /> <TextView android:id="@+id/txt_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_gravity="bottom|center" android:padding="5dp" android:text="@string/app_name" android:textColor="#12edf0" android:textSize="15sp" /> </cn.yznu.gdmapoperate.ui.widget.AspectRatioCardView> </FrameLayout>
使用ViewPager管理Fragment是標(biāo)準(zhǔn)的適配器實(shí)現(xiàn),所以將這個(gè)xml作為fragment的布局就行了,就是這么簡(jiǎn)單。
紅紅火火恍恍惚惚,貌似完成了,就是這么簡(jiǎn)單。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- android中圖片翻頁(yè)效果簡(jiǎn)單的實(shí)現(xiàn)方法
- 解析Android中實(shí)現(xiàn)滑動(dòng)翻頁(yè)之ViewFlipper的使用詳解
- Android實(shí)現(xiàn)閱讀APP平移翻頁(yè)效果
- Android自定義左右或上下滑動(dòng)翻頁(yè)效果
- Android自定義ViewPager實(shí)現(xiàn)縱向滑動(dòng)翻頁(yè)效果
- Android?ViewPager實(shí)現(xiàn)左右滑動(dòng)翻頁(yè)效果
- android ViewPager實(shí)現(xiàn)滑動(dòng)翻頁(yè)效果實(shí)例代碼
- 基于Android實(shí)現(xiàn)3D翻頁(yè)效果
- Android 仿日歷翻頁(yè)、仿htc時(shí)鐘翻頁(yè)、數(shù)字翻頁(yè)切換效果
- Android實(shí)現(xiàn)翻頁(yè)特效
相關(guān)文章
Android實(shí)現(xiàn)調(diào)用攝像頭拍照與視頻功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)調(diào)用攝像頭拍照與視頻功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04Android LinearLayout實(shí)現(xiàn)自動(dòng)換行效果
這篇文章主要為大家詳細(xì)介紹了Android LinearLayout實(shí)現(xiàn)自動(dòng)換行效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08Android實(shí)現(xiàn)簡(jiǎn)單動(dòng)態(tài)搜索功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)簡(jiǎn)單動(dòng)態(tài)搜索功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05Android kotlin+協(xié)程+Room數(shù)據(jù)庫(kù)的簡(jiǎn)單使用
這篇文章主要介紹了Android kotlin+協(xié)程+Room數(shù)據(jù)庫(kù)的簡(jiǎn)單使用,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01Android 為L(zhǎng)istView添加分段標(biāo)頭的方法
下面小編就為大家?guī)?lái)一篇Android 為L(zhǎng)istView添加分段標(biāo)頭的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04Android應(yīng)用啟動(dòng)白屏處理方案詳解
這篇文章主要為大家介紹了Android應(yīng)用啟動(dòng)白屏處理方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02android Bitmap圓角與倒影的具體實(shí)現(xiàn)代碼
android Bitmap圓角與倒影的具體實(shí)現(xiàn)代碼,需要的朋友可以參考一下2013-06-06Android自定義View實(shí)現(xiàn)兩種二維碼的掃描效果
這篇文章主要為大家詳細(xì)介紹了Android如何自定義View實(shí)現(xiàn)兩種二維碼的掃描效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01