如何使视图与图片中的视图重叠答案

【问题标题】：How to make the view overlap with a view like in the picture如何使视图与图片中的视图重叠
【发布时间】：2021-03-29 07:32:23
【问题描述】：

我有一个如图所示的设计，那么如何在xml中做一个ui如下图：

我的团队代码 xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/layout1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="top"
            android:orientation="horizontal">

        </LinearLayout>

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_below="@+id/layout1"
            android:background="@color/teal_200">

        </LinearLayout>
    </FrameLayout>


</RelativeLayout>

谁能给我解决方案来设计这件作品。谢谢你。

【问题讨论】：

标签： java android xml kotlin android-framelayout

【解决方案1】：

使用translation 属性这是代码

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/layout1"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:background="@color/purple_700"
        android:orientation="horizontal"
        android:padding="3dp"<!-- Set the thickness of the border -->
        android:translationX="50dp"
        android:translationY="25dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/teal_200"
            android:orientation="horizontal"></LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:background="@color/purple_700">

    </LinearLayout>

</FrameLayout>

【讨论】：