Android clipChildren属性

1. clipChildren属性

clipChildren属性允许子控件超出父布局。例如我们定义父布局高度为30dp，而子控件有50dp，只显示30dp的高度。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:orientation="horizontal">
    <LinearLayout
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:layout_marginTop="40dp"
        android:gravity="center_horizontal"
        android:background="@color/red"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/icon_wx"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:layout_marginTop="40dp"
        android:gravity="center_horizontal"
        android:background="@color/blue"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/icon_wx"
            android:layout_gravity="bottom"/>
    </LinearLayout>
</LinearLayout>

效果如下

设置父布局的clipChildren属性，默认是true

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="100dp"        
    android:clipChildren="false"
    android:orientation="horizontal">

    ... ...

</LinearLayout>

效果如下

2. ViewPager实现画廊效果

ViewPager可以实现多个界面的左右滑动。详见Android ViewPager控件。

可以利用clipChildren属性实现画廊效果。在ViewPager和它的父布局都要设置clipChildren属性。

<RelativeLayout
    android:id="@+id/view_clip_pager"
    android:layout_width="match_parent"
    android:layout_height="140dp"
    android:clipChildren="false">
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager_clip_pager"
        android:layout_width="210dp"
        android:layout_height="100dp"
        android:clipChildren="false"
        android:layout_centerInParent="true"/>
</RelativeLayout>

利用setPageMargin(int marginPixels)设置间隔，setOffscreenPageLimit(int limit)设置缓存页面。

添加手势事件，捕捉ViewPager左右两边的手势事件。

findViewById(R.id.view_clip_pager).setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        vp.dispatchTouchEvent(event);
        return true;
    }
});

效果如下

参考资料：https://www.jianshu.com/p/061555a09e9b