android 如何在布局中叠加图像

Question

我在布局中有两个图像。我想在第一个图像的底部边缘曲线中显示第二个图像。任何人都可以告诉如何做像叠加图像

谢谢

Answer 1

像下面的示例一样使用框架布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_home_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:focusable="true"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@android:color/black"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/ic_drawer"
            android:src="@drawable/logo" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="14dp"
            android:src="@drawable/menu" />

        <ImageView
            android:id="@+id/ic_drawer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignTop="@+id/textView1_detail"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp"
            android:src="@drawable/ic_drawer" />

        <TextView
            android:id="@+id/textView1_detail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="15dp"
            android:layout_toRightOf="@+id/imageView1"
            android:text="Reports"
            android:textColor="@android:color/white"
            android:textSize="18sp" />
    </RelativeLayout>

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

           <ImageView
            android:id="@+id/overlay_favorite"
            android:layout_width="215dp"
            android:layout_height="134dp"
            android:layout_gravity="right"
            android:background="@drawable/overlay_favorite"
            android:visibility="gone" />
    </FrameLayout>

</LinearLayout>

Answer 2

使用框架布局：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/imgFirst"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"/>

    <ImageView
        android:id="@+id/imgSecond"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:src="@drawable/ic_launcher"/>
</FrameLayout>

Answer 3

使用RelativeLayout，简单的把第二个ImageView放在第一个ImageView的下面。那么你要做的就是将第二张图片的marginTop属性设置为负值，这个值就是覆盖尺寸，像这样android:layout_marginTop="-1dp" .

示例代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    >

    <ImageView           
        android:layout_width="wrap_content"           
        android:layout_height="wrap_content"
        android:id="@+id/firstImage"
        android:src="@drawable/myimage1"           
     />    

    <ImageView
        android:layout_width="wrap_content"
        android:layout_marginTop="-1dp"
        android:layout_height="wrap_content"
        android:id="@+id/secondImage"
        android:layout_below="@+id/firstImage"
        android:src="@drawable/myimage2"
     />  

</RelativeLayout>

Answer 4

如果您像下面的示例那样使用 alignParentalXXX 标签，您可以在没有框架的情况下仅使用 RelativeLayout 来做到这一点

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#E4E3CE"
    android:orientation="vertical">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="75">

        <ImageView
            android:id="@+id/backgroundImageView"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_alignParentTop="true"
            android:layout_margin="5dp"
            android:background="#ffffff" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="66dp"
            android:layout_height="66dp"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:background="#000000" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="40dp"
            android:layout_marginTop="20dp"
            android:background="#40000000"
            android:gravity="center_vertical"
            android:paddingHorizontal="3dp"
            android:paddingVertical="1dp"
            android:text="Header Text"
            android:textColor="#ffffff"
            android:textSize="16dp" />


    </RelativeLayout>

</LinearLayout>

您可以在下图中看到此布局的外观：

android 如何在布局中叠加图像

How to overlay image in layout in android

android

android-layout