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();
        viewPager.setOffscreenPageLimit(imgResIds.length);
        viewPager.setCurrentItem();
    }

    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)方法來實作。