[安卓/Android]解决超出范围的View控件被旁边的View遮住的问题

这一次是做一个小笔记，emmmm怎么说呢，算是悟到了View绘制这块的机制吧，我也懒得去看。开始吧！

 

每只鸡理解成独立的Layout布局，正常情况下，如果存在超出范围的控件时会被旁边的遮盖住，原因是在绘制时是按顺序绘制的，也就是说布局它不知道你的Layout是怎么做的，只知道在添加时第一个在第二个后边，所以会被遮盖。

所以说粉色框的任何布局一定会被蓝色框被遮住。那问题是蓝色框为什么没有被紫色框遮住呢，因为...说实话我不是很想贴代码，非常的Low。

这是粉色框的代码，因为黑色控件和鸡放到了一起，虽然实现了独立，但是也意味着它会被遮住。

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:clipChildren="false">
            <include
                android:id="@+id/inc1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                layout="@layout/item_rv"
                android:layout_gravity="center">
            </include>
            <TextView
                android:id="@+id/item_ff1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="测试"
                android:textColor="@color/colorWhite"
                android:background="@color/colorBlack"
                android:paddingStart="50dp"
                android:paddingEnd="50dp"
                android:paddingTop="20dp"
                android:paddingBottom="10dp"
                android:translationX="80dp"
                android:translationY="-20dp" />
        </FrameLayout>

这是完整的代码：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipChildren="false"
    android:layout_marginTop="20dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipChildren="false">
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:clipChildren="false">
            <include
                android:id="@+id/inc1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                layout="@layout/item_rv"
                android:layout_gravity="center">
            </include>
            <TextView
                android:id="@+id/item_ff1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="测试"
                android:textColor="@color/colorWhite"
                android:background="@color/colorBlack"
                android:paddingStart="50dp"
                android:paddingEnd="50dp"
                android:paddingTop="20dp"
                android:paddingBottom="10dp"
                android:translationX="80dp"
                android:translationY="-20dp" />
        </FrameLayout>


        <include
            android:id="@+id/inc2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            layout="@layout/item_rv"
            android:layout_gravity="center">
        </include>

        <include
            android:id="@+id/inc3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            layout="@layout/item_rv"
            android:layout_gravity="center">
        </include>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipChildren="false">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal">
            <!--<TextView-->
                <!--android:id="@+id/item_ff1"-->
                <!--android:layout_width="wrap_content"-->
                <!--android:layout_height="wrap_content"-->
                <!--android:text="测试"-->
                <!--android:textColor="@color/colorWhite"-->
                <!--android:background="@color/colorBlack"-->
                <!--android:paddingStart="50dp"-->
                <!--android:paddingEnd="50dp"-->
                <!--android:paddingTop="20dp"-->
                <!--android:paddingBottom="10dp"-->
                <!--android:translationX="80dp"-->
                <!--android:translationY="-20dp" />-->
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal">
            <TextView
                android:id="@+id/item_ff2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="测试"
                android:textColor="@color/colorWhite"
                android:background="@color/colorBlack"
                android:paddingStart="50dp"
                android:paddingEnd="50dp"
                android:paddingTop="20dp"
                android:paddingBottom="10dp"
                android:translationX="80dp"
                android:translationY="-20dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal">
            <TextView
                android:id="@+id/item_ff3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="测试"
                android:textColor="@color/colorWhite"
                android:background="@color/colorBlack"
                android:paddingStart="50dp"
                android:paddingEnd="50dp"
                android:paddingTop="20dp"
                android:paddingBottom="10dp"
                android:translationX="80dp"
                android:translationY="-20dp" />
        </LinearLayout>
    </LinearLayout>



</FrameLayout>

也就是说黑色控件和鸡完全是独立的，它们各自都被LinearLayout包裹，然后水平分布，在通过FrameLayout进行叠加，最后通过 translationXY 实现微调。

至于动不动态添加Item，完全可以按照这种思路实现动态，主要是理解了为什么会被遮住，那一切都好办了。

我的目的只是解决现有问题，好不好，咱评论区见。