Viewpager通俗一點講就是一個允許左右翻轉帶數據的頁面的布局管理器，經常用來連接Fragment，它很方便管理每個頁面的生命周期，使用ViewPager管理Fragment是標準的適配器實現。最常用的實現一般有FragmentPagerAdapter和FragmentStatePagerAdapter。自行百度它的用法。今天我們要實現的是下面的效果：
NO PICTURE TALK A JB
要實現圖中的效果需要以下幾個知識點：
1.clipChildren屬性
2.一個頁面顯示多個ViewPager的Item
3.自定義PagerTransformer
4.ViewPager結合CardView
1.clipChildren 屬性
clipchildren ：是否限制子View在其范圍內，當我們將其值設置為false后那么在子控件的高度高于父控件時也會完全顯示,而不會被壓縮，(上面中間的按鈕超過上面的陰影線，依舊可以正常顯示），默認的時候是true。
了解了這個屬性就可以讓一個頁面顯示多個Viewpager的Item
2.一個頁面顯示多個ViewPager的Item
直接在xml布局文件中配置：android:clipToPadding="false"
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<?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. 中間可滑動的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，這個view是用來占位的--> <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翻頁動畫
直接上代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
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和像素轉換 */ private int dp2px(Context context, float dipValue) { float m = context.getResources().getDisplayMetrics().density; return (int) (dipValue * m + 0.5f); }} |
使用方法
|
1
2
|
// 1. viewPager添加parallax效果，使用PageTransformer就足夠了 viewPager.setPageTransformer(false, new CustPagerTransformer(this)); |
4.CardView 與Viewpager聯合使用
先看viewpager的一個item布局
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<?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是標準的適配器實現,所以將這個xml作為fragment的布局就行了，就是這么簡單。
紅紅火火恍恍惚惚，貌似完成了，就是這么簡單。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://www.jianshu.com/p/f01d7aea9449
