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)方法来实现。