Android：片段与其他元素重叠

Question

我希望在我的应用程序中实现以下可视外观，如下所示，因此圆角图像与地图及其父面板重叠。

但结果离它很远

主要片段代码

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity$WalkFragment">

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <fragment
        android:id="@+id/talk_panel"
        android:name="com.app.fragments.TalkFragment"
        android:layout_alignParentBottom="true"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"/>

</RelativeLayout>

底部面板源

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/talk_panel_inner"
    android:orientation="vertical"
    android:background="@color/talk_background"
    android:layout_alignBottom="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:clickable="true">

    <!-- THIS IS ELEMENT SHOULD OVERLAP ITS PARENTS -->
    <LinearLayout
        android:layout_marginTop="-26dp"
        android:layout_marginLeft="36dp"
        android:background="@drawable/ic_launcher"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="130dp"
        android:clickable="true">

        <ImageView
            android:id="@+id/toggle_slide"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:src="@drawable/ic_arrow_up_grey"
            android:clickable="true"/>

        <FrameLayout
            android:orientation="vertical"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="40dp"
            android:layout_marginRight="40dp">

            <EditText
                android:paddingLeft="10dp"
                android:id="@+id/search_box"
                android:fontFamily="Roboto"
                android:textSize="16sp"
                android:drawablePadding="10dp"
                android:drawableLeft="@drawable/ic_search_icon"
                android:gravity="center"
                android:singleLine="true"
                android:textAlignment="center"
                android:hint="@string/search_places"
                android:background="@drawable/text_area"
                android:layout_height="40dp"
                android:paddingRight="40dp"
                android:layout_width="match_parent"/>

            <ImageView
                android:layout_marginRight="10dp"
                android:layout_gravity="center_vertical|right"
                android:background="@drawable/ic_clear"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:id="@+id/imageView"/>

        </FrameLayout>

        <TextView
            android:layout_gravity="center"
            android:gravity="center"
            android:textColor="@color/place_color"
            android:textAlignment="center"
            android:text="@string/loading_place_text"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_marginTop="12dp"/>

    </LinearLayout>

</FrameLayout>

我尝试过使用RelativeLayout, LinearLayout，尝试用talk_panel等包装片段LinearLayout，但它没有成功。

任何人都可以帮助我吗？任何想法和建议都赞赏。

Answer 1

想出来，可能对人们有用。所以我将我的片段和圆形图像包裹成RelativeLayout并将圆圈形状应用到我的ImageView，同时设置位置。

结果

页脚片段

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

    <fragment
        android:id="@+id/talk_panel"
        android:name="com.app.fragments.TalkFragment"
        android:layout_gravity="bottom"
        android:layout_alignParentBottom="true"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"/>

    <ImageView
        android:background="@drawable/circle"
        android:layout_marginTop="-40dp"
        android:layout_marginLeft="30dp"
        android:src="@drawable/ic_launcher"
        android:layout_height="80dp"
        android:layout_width="80dp"
        android:layout_alignTop="@id/talk_panel"/>

</RelativeLayout>

@绘制/圆

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="#FFFFFFFF"/>

    <size
        android:width="160dp"
        android:height="160dp"/>
</shape>

Answer 2

您可以将帧布局放在两个片段的顶部，然后在帧内对齐图像。在运行时，要么将图像视图添加到框架，要么使用LayoutParams（类型为FrameLayout.LayoutParams），然后requestLayout()设置它的顶部和左侧布局边距。

要正确对齐图像，请在片段布局上调用getBottom()或getTop()，然后将该值传递（加上或减去图像高度的一半，使其居中）到marginTop中。