clipChildren、clipToPadding的神奇效果

参考链接：https://blog.youkuaiyun.com/u012702547/article/details/52334161

一个卡片式的viewpager，带你玩转viewpager的pageTransformer属性！

实战：

1.clipChildren属性
2.一个页面显示多个ViewPager的Item
3.ViewPager结合CardView

1.clipChildren属性

clipChildren属性表示是否限制子控件在该容器所在的范围内（false：不限制）

clipChildren属性配合layout_gravity属性，可以用来设置多余部分的显示位置

• 只需要在根节点添加clipChildren属性，然后在要设置的ImageView上添加layout_gravity属性即可，layout_gravity属性值为bottom表示控件大小超出后控件底部对齐。

2.一个页面显示多个ViewPager的Item

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    tools:context="org.lenve.myviewpagercards.MainActivity">
 
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginLeft="60dp"
        android:layout_marginRight="60dp"
        android:clipChildren="false"></android.support.v4.view.ViewPager>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_margin="2dp"
        app:cardCornerRadius="6dp"
        app:cardElevation="2dp"
        card_view:cardBackgroundColor="#00000000">

        <ImageView
            android:id="@+id/img_project"
            android:layout_width="match_parent"
            android:layout_height="164dp"
            android:layout_centerHorizontal="true"
            android:scaleType="fitXY" />

    </android.support.v7.widget.CardView>
</LinearLayout>

• 只需要在父容器和ViewPager中都添加上clipChildren属性，然后给ViewPager设置左右两个margin，使其不致于把整个屏幕占满

activity中代码：设置

ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setPageMargin(80);
        viewPager.setOffscreenPageLimit(3);
        List<Integer> list = new ArrayList<>();
        list.add(R.drawable.p001);
        list.add(R.drawable.p002);
        list.add(R.drawable.p003);
        list.add(R.drawable.p004);
        list.add(R.drawable.p005);
        MyVpAdater adater = new MyVpAdater(this, list);

setOffscreenPageLimit，这个是设置预加载的页数，我们知道默认情况下这个参数为1，也就是左右各预加载一页，但是我们这里要让左右各预加载两页；

PageMargin，就是设置ViewPager中两页之间的距离。

3.ViewPager结合CardView

clipToPadding表示是否允许ViewGroup在ViewGroup的padding中进行绘制，默认情况下该属性的值为true，

false：允许在ViewGroup的padding中进行绘制

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="org.lenve.myviewpagercards2.MainActivity">
 
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:clipToPadding="false"
        android:paddingBottom="24dp"
        android:paddingLeft="48dp"
        android:paddingRight="48dp"
        android:paddingTop="24dp"></android.support.v4.view.ViewPager>
</RelativeLayout>

activity中：

ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        List<Integer> list = new ArrayList<>();
        list.add(R.drawable.p001);
        list.add(R.drawable.p002);
        list.add(R.drawable.p003);
        list.add(R.drawable.p004);
        list.add(R.drawable.p005);
        MyAdapter adapter = new MyAdapter(this, list);
        viewPager.setAdapter(adapter);
        viewPager.setPageMargin(20);

clipToPadding属性是在一个页面中显示多个ViewPager  item的第二种方式。

这个CardView式的ViewPager我们就使用这种方式来实现（也可以用clipChildren）

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 
android:id="@+id/cardview"  
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="wrap_content"
android:orientation="vertical"
app:cardCornerRadius="10dp">
 
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="300dp">
 
        <TextView
            android:id="@+id/tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="我是一个TextView"/>
 
        <Button
            android:layout_width="96dp"
            android:layout_height="36dp"
            android:textColor="#ffffff"
            android:layout_below="@id/tv"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="12dp"
            android:background="@color/colorAccent"
            android:text="我是一个按钮"/>
    </RelativeLayout>

activity：

ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        List<Integer> list = new ArrayList<>();
        list.add(R.drawable.p001);
        list.add(R.drawable.p002);
        list.add(R.drawable.p003);
        list.add(R.drawable.p004);
        list.add(R.drawable.p005);
        MyAdapter adapter = new MyAdapter(this, list);
        viewPager.setAdapter(adapter);
        viewPager.setPageMargin((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                48, getResources().getDisplayMetrics()));
//也可以用viewpager.setPageMargin(-20);
        viewPager.setPageTransformer(false, new ScaleTransformer(this));