clipChildren仿咸鱼底栏

咸鱼的底栏：

最开始下面的tab我想的是使用Tablayout，但是 最中间的凸出不好实现，所以改用了LinearLayout布局，使用clipClildren属性，

该属性控制是否允许子布局超出父布局。默认为true。显然，我们应该在根布局设置为clipClildren = false。然后使用

android:layout_gravity="bottom" 

来使超出的部分的对齐方式。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:clipChildren="false"   //========= 1 ========
    android:id="@+id/ll_main"
    android:layout_height="match_parent"
    tools:context=".activity.MainActivity">
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/viewPager"/>
    <LinearLayout
        android:background="#ff0000"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:paddingBottom="2dp"  //============= 2 ===========
        android:orientation="horizontal">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_height="match_parent">
            <ImageView
                android:src="@drawable/main_position"
                android:id="@+id/iv_nav"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:layout_width="wrap_content" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/tv_nav"
                android:gravity="center"
                android:text="导航"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <ImageView
                android:src="@drawable/main_position"
                android:id="@+id/iv_shop"
                android:layout_width="wrap_content"
                android:scaleType="centerInside"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <TextView
                android:layout_width="match_parent"
                android:gravity="center"
                android:layout_height="wrap_content"
                android:id="@+id/tv_shop"
                android:text="商城"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:layout_gravity="bottom"  //=========超出部分对齐方式================
            android:orientation="vertical">
        <ImageView
            android:id="@+id/iv_add"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:scaleType="centerInside"
            android:src="@drawable/voice" />
            <TextView
                android:id="@+id/tv_add"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="发布" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <ImageView
                android:src="@drawable/main_position"
                android:id="@+id/iv_advice"
                android:layout_width="wrap_content"
                android:scaleType="centerInside"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:gravity="center"
                android:id="@+id/tv_advice"
                android:text="推荐"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <ImageView
                android:src="@drawable/main_position"
                android:id="@+id/iv_mine"
                android:layout_centerHorizontal="true"
                android:layout_width="wrap_content"
                android:scaleType="centerInside"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:id="@+id/tv_mine"
                android:text="我的"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

注意上述布局中的标记 1： 使用clipChildren = false属性。

ok，写了布局，我们运行一把：

咦。。。。中间那个tab并没有超出发布局呀！

找了很久，罪魁祸首原来是 那个 paddingBottom = 2dp.

注意上述布局标记为 2 的地方。

既然找出问题所在，我们删除 paddingBottom再试试：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:clipChildren="false"
    android:id="@+id/ll_main"
    android:layout_height="match_parent"
    tools:context=".activity.MainActivity">
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/viewPager"/>
    <LinearLayout
        android:background="#ff0000"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        ============之前的paddingBottom在这被删除====================
        android:orientation="horizontal">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_height="match_parent">
            <ImageView
                android:src="@drawable/main_position"
                android:id="@+id/iv_nav"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:layout_width="wrap_content" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/tv_nav"
                android:gravity="center"
                android:text="导航"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <ImageView
                android:src="@drawable/main_position"
                android:id="@+id/iv_shop"
                android:layout_width="wrap_content"
                android:scaleType="centerInside"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <TextView
                android:layout_width="match_parent"
                android:gravity="center"
                android:layout_height="wrap_content"
                android:id="@+id/tv_shop"
                android:text="商城"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:layout_gravity="bottom"
            android:orientation="vertical">
        <ImageView
            android:id="@+id/iv_add"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:scaleType="centerInside"
            android:src="@drawable/voice" />
            <TextView
                android:id="@+id/tv_add"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="发布" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <ImageView
                android:src="@drawable/main_position"
                android:id="@+id/iv_advice"
                android:layout_width="wrap_content"
                android:scaleType="centerInside"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:gravity="center"
                android:id="@+id/tv_advice"
                android:text="推荐"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <ImageView
                android:src="@drawable/main_position"
                android:id="@+id/iv_mine"
                android:layout_centerHorizontal="true"
                android:layout_width="wrap_content"
                android:scaleType="centerInside"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:id="@+id/tv_mine"
                android:text="我的"/>
        </LinearLayout>
    </LinearLayout>
 </LinearLayout>

好了，再来运行一把：

是不是没啥毛病了呢，

【赶紧记笔记，要考】ok，我们得出结论， 使用clipChildren为false的时候，我们不能在父布局里加padding，paddingTop，paddingBottom

这样的属性。

那又需要padding这样的属性咋办？ 答：在子布局里加上padding属性。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:clipChildren="false"
    android:id="@+id/ll_main"
    android:layout_height="match_parent"
    tools:context=".activity.MainActivity">
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/viewPager"/>
    <LinearLayout
        android:background="#ff0000"
        android:layout_width="match_parent"
        android:layout_height="60dp"        //不在父布局里加padding
        android:orientation="horizontal">
        <LinearLayout
            android:paddingTop="3dp"
            android:paddingBottom="2dp"  //在这（子布局）加padding
            android:layout_width="0dp"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_height="match_parent">
            <ImageView
                android:src="@drawable/main_position"
                android:id="@+id/iv_nav"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:layout_width="wrap_content" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/tv_nav"
                android:gravity="center"
                android:text="导航"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:orientation="vertical"
            android:paddingTop="3dp"
            android:paddingBottom="2dp"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <ImageView
                android:src="@drawable/main_position"
                android:id="@+id/iv_shop"
                android:layout_width="wrap_content"
                android:scaleType="centerInside"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <TextView
                android:layout_width="match_parent"
                android:gravity="center"
                android:layout_height="wrap_content"
                android:id="@+id/tv_shop"
                android:text="商城"/>
        </LinearLayout>
        <LinearLayout
            android:paddingTop="3dp"
            android:paddingBottom="2dp"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:layout_gravity="bottom"
            android:orientation="vertical">
        <ImageView
            android:id="@+id/iv_add"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:scaleType="centerInside"
            android:src="@drawable/voice" />
            <TextView
                android:id="@+id/tv_add"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="发布" />
        </LinearLayout>
        <LinearLayout
            android:paddingTop="3dp"
            android:paddingBottom="2dp"
            android:layout_width="0dp"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <ImageView
                android:src="@drawable/main_position"
                android:id="@+id/iv_advice"
                android:layout_width="wrap_content"
                android:scaleType="centerInside"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:gravity="center"
                android:id="@+id/tv_advice"
                android:text="推荐"/>
        </LinearLayout>
        <LinearLayout
            android:paddingTop="3dp"
            android:paddingBottom="2dp"
            android:layout_width="0dp"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <ImageView
                android:src="@drawable/main_position"
                android:id="@+id/iv_mine"
                android:layout_centerHorizontal="true"
                android:layout_width="wrap_content"
                android:scaleType="centerInside"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:id="@+id/tv_mine"
                android:text="我的"/>
        </LinearLayout>
    </LinearLayout>
 </LinearLayout>

结果：

yeah意料之中。