android:clipChildren屬性的用法

Android中clipChildren屬性的用法總結

android:clipChildren這個屬性使用的頻率並不高，但是在有些需求下，這個屬性效果還是很不錯的。只不過這個屬性的名字和意思初次看到會有點蒙，所以對這個屬性做個學習性總結。

屬性說明

在Android的佈局XML文件中，android:clipChildren=“boolean”，該屬性值可設爲true或者false。該屬性表示是否允許子View超出父View（也可以理解爲是否限制子View在其範圍內）。

Android系統默認賦予該屬性值是true，即表示不允許超越所在父佈局的邊界/限制在父佈局內。
如果設置爲false，則表示允許該子view超越父佈局的邊界。

屬性使用

1、應用在底部欄效果

效果圖如下圖所示，類似音樂播放器的佈局，有時會要求播放按鈕的高度略高於旁邊的View，此時就可以使用clipChildren屬性來實現。此外想現在市面上很多外賣，商城類的app都有類似的佈局效果，可以靈活應用。

下面貼出佈局代碼：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"><!--這裏-->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true"
        android:background="@color/translucent"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:scaleType="fitCenter"
            android:src="@mipmap/easyicon_1"/>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:scaleType="fitCenter"
            android:src="@mipmap/easyicon_2"/>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="70dp"
            android:layout_gravity="bottom"
            android:layout_weight="1.0"
            android:scaleType="fitCenter"
            android:src="@mipmap/easyicon_3"/>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:scaleType="fitCenter"
            android:src="@mipmap/easyicon_4"/>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:scaleType="fitCenter"
            android:src="@mipmap/easyicon_5"/>
    </LinearLayout>

</RelativeLayout>

是不是很簡單，其實關鍵的代碼就兩行，這也是我接下來要說的注意點：
1、一定是在佈局文件的根節點設置clipChildren屬性，否則不起作用；
2、android:layout_gravity=”bottom”，告知Android系統要從底部向上繪製該子view。如果不加這句，默認向下繪製，效果則是中間圖標下面被遮住一部分，因爲是從下面超越父佈局邊界的。

2、實現特殊的UI效果

下面給大家貼一個好玩的效果圖：

在LinearLayout佈局中簡單水平並排放置的若干ImageView，效果佈局也很簡單，利用權重設置好每個機器人的比重，然後每個機器人View給的高度不一樣，通過clipChildren屬性就能實現該效果，算是拋磚引玉吧，由此可見利用好這個屬性，也可以實現一些特殊的UI效果。

貼上佈局代碼：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="#e57373"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#2196f3"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="0.1"
                android:src="@mipmap/ic_launcher"/>


            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:layout_gravity="bottom"
                android:layout_weight="0.2"
                android:src="@mipmap/ic_launcher"/>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="90dp"
                android:layout_gravity="bottom"
                android:layout_weight="0.5"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="90dp"
                android:layout_gravity="bottom"
                android:layout_weight="0.5"
                android:src="@mipmap/ic_launcher"/>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="130dp"
                android:layout_gravity="bottom"
                android:layout_weight="0.7"
                android:src="@mipmap/ic_launcher"/>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="170dp"
                android:layout_gravity="bottom"
                android:layout_weight="0.3"
                android:src="@mipmap/ic_launcher"/>
        </LinearLayout>

    </LinearLayout>

3、實現ViewPager一個頁面顯示多個Item子頁面效果

這種效果在輪播圖中經常使用到，類似於畫廊效果。

廢話不多說，上代碼：

佈局代碼：

<?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:clipChildren="false"
    android:gravity="center"
    >

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="250dp"
        android:layout_height="200dp"
        android:clipChildren="false">
    </android.support.v4.view.ViewPager>

</RelativeLayout>

Activity代碼：
需要注意的是：記得要將把根佈局的滑動事件交由ViewPager處理，不然會出現只能滑動中間的那個View，左邊或者右邊的View滑動無法響應。

public class MainActivity extends AppCompatActivity {
    private List<ImageView> imageContainer = new ArrayList<>();
    private static final int[] imgResIds = { R.mipmap.a, R.mipmap.b, R.mipmap.c, R.mipmap.d, R.mipmap.e };
    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_pager);
        viewPager = (ViewPager) findViewById(R.id.view_pager);

        //簡單而言，這裏只是添了圖片，後期也可以改爲fragment
        for (int imgResId : imgResIds) {
            ImageView imageView = new ImageView(this);
            imageView.setImageResource(imgResId);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageContainer.add(imageView);
        }

        PagerAdapter adapter = new MyViewPagerAdapter();
        viewPager.setAdapter(adapter);
        viewPager.setPageMargin(20);
        viewPager.setOffscreenPageLimit(imgResIds.length);
        viewPager.setCurrentItem(2);
    }

    private class MyViewPagerAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            return imgResIds.length;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView = imageContainer.get(position);
            ViewGroup parent = (ViewGroup) imageView.getParent();
            if (parent != null) {
                container.removeView(imageView);
            }
            container.addView(imageView);
            return imageContainer.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(imageContainer.get(position));
        }
    }

    //把根佈局的滑動事件交由ViewPager處理即可整個容器內滑動,不然只能滑動中間那個item
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        return viewPager.dispatchTouchEvent(ev);
    }
}

總結

clipChildren屬性使用起來雖然簡單，但是要靈活運用，需要我們在平時的開發過程中多多總結。這裏再順便說下代碼中可以利用viewgroup的setClipChildren(false)方法來實現。