如何在 ImageView 上重叠按钮？答案

【问题标题】：How can I overlap a button over an ImageView?如何在 ImageView 上重叠按钮？
【发布时间】：2014-07-15 12:23:14
【问题描述】：

您好，要获得如上图所示的带有reomve 按钮的视图我尝试了以下 xml Linearlayout 并将其背景设置为圆形图像但是要达到比例图片还是用ImageView比较好，

对不起，我的英语不太好，但我只是想问一下我怎样才能做到这一点通过使用 ImageView 代替 LayoutBackground...

<LinearLayout
                android:id="@+id/imagePreview"
                android:layout_width="140dp"
                android:layout_height="140dp"
                android:background="@drawable/profile_image_holder"
                android:orientation="vertical"
                android:padding="0dp" >
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal" >

                    <Button
                        android:id="@+id/searchGroupButton"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_marginLeft="94dp"
                        android:layout_marginTop="5dp"
                        android:background="@drawable/icn_delete"
                        android:onClick="removeImage"
                        android:paddingLeft="10dp"
                        android:paddingRight="10dp"
                        android:paddingTop="5dp"
                        android:paddingBottom="0dp"
                        android:textColor="#fff" />
                </LinearLayout>
             </LinearLayout>

【问题讨论】：

例子@stackoverflow.com/questions/4182486/…

标签： android

【解决方案1】：

您可以使用相对布局来做到这一点，只需插入两个子元素并根据需要定位元素：

<RelativeLayout
    android:id="@+id/imagePreview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="0dp" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/yourImage"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/searchGroupButton"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="94dp"
        android:layout_marginTop="15dp"
        android:background="@drawable/icn_delete"
        android:textColor="#fff" />

</RelativeLayout>

希望对你有帮助！

问候！

【讨论】：

由于没有相对于任何东西进行布局，因此使用FrameLayout 也可以实现相同的效果，ImageView 有一个layout_gravity="center"，并且按钮没有指定任何布局参数，因为默认情况下，视图位于左上角。 FrameLayout 在测量和布局方面的效率会比RelativeLayout 稍高
这是一个非常好的评论，确实是另一种选择，但 FrameLayout 对设备碎片不是很友好，这只是一个例子，他最终可能会想出一个锚对象或更复杂的东西......
谢谢，通过这个解决方案，您让我清楚地了解了 android 中相对布局的用法

【解决方案2】：

试试这个方法，希望能帮助你解决问题。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="150dp"
    android:layout_height="150dp">

    <ImageView
        android:layout_width="140dp"
        android:layout_height="140dp" 
        android:src="@drawable/ic_launcher"
        android:adjustViewBounds="true"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"/>

    <Button
        android:id="@+id/searchGroupButton"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:background="@drawable/ic_launcher"
        android:onClick="removeImage"
        android:layout_gravity="top|right"
        android:textColor="#fff" />

</FrameLayout>

【讨论】：