皮一下才開(kāi)心
huitouhuaji.gif
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
37bc57fa-4f31-4a77-98c7-20fc0174c58c.gif
要實(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ò)上面的陰影線(xiàn)，依舊可以正常顯示），默認(rèn)的時(shí)候是true。
20170227143843131.png
了解了這個(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)單。
