Android – ImageView覆盖另一个ImageView

ImageView这样做一个ImageView覆盖另一个ImageView ; 只有一半的绿色覆盖图像:

在这里输入图像说明

我已经尝试使用RelativeLayout并把两个ImageView里面。 然后,我使用android:layout_alignBottom覆盖图像上的圆。 它覆盖了,但我不知道如何设置偏移,以便只有一半的圆圈覆盖基本图像。

编辑:

对不起,这是我的布局xml代码

 <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginBottom="32sp" > <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/ic_person_black" android:adjustViewBounds="true" android:id="@+id/image_view_product" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@id/image_view_product" android:layout_centerHorizontal="true" android:background="@drawable/image_view_circle" android:src="@drawable/ic_circle" /> </RelativeLayout> 

我得到了很多这个答案upvote.So我试图改善这个答案。 可能是这样做是比其他两个更好的方式,因为这个解决scheme并不需要固定布局或等分屏幕,所以这可能是更好的做到这一点。

 <android.support.design.widget.CoordinatorLayout 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"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:id="@+id/viewA" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:orientation="horizontal"> <TextView android:id="@+id/subject" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="20dp" android:text="Thi" android:textColor="@android:color/white" android:textSize="17sp" /> </LinearLayout> <LinearLayout android:id="@+id/viewB" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" android:orientation="horizontal"> <TextView android:id="@+id/description" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="20dp" android:text="Thi" android:textColor="@android:color/black" android:textSize="17sp" /> </LinearLayout> </LinearLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:clickable="true" android:src="@drawable/plus" app:layout_anchor="@+id/viewA" app:layout_anchorGravity="bottom|right|end"/> </android.support.design.widget.CoordinatorLayout> 

替代方法试试这个

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> // this is your first layout to put the big image // use src or backgroud image as per requirement <LinearLayout android:background="@color/red_error" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> </LinearLayout> // this is your bottom layout <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> </LinearLayout> </LinearLayout> // This is the imageview which overlay the first LinearLayout <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/success" android:adjustViewBounds="true" android:layout_gravity="center"/> </FrameLayout> 

它看起来像这样

在这里输入图像说明

find一个更多的解决scheme(编辑),如果你的大图像的大小是固定的高度,你可以试试这个

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <RelativeLayout android:id="@+id/layoutTop" android:background="@color/red_error" android:layout_width="match_parent" android:layout_height="200dp" > </RelativeLayout> <RelativeLayout android:id="@+id/layoutBottom" android:layout_width="match_parent" android:layout_height="0dp" android:layout_alignParentBottom="true" android:layout_below="@id/layoutTop" > </RelativeLayout> <ImageView android:id="@+id/overlapImage" android:layout_width="wrap_content" android:layout_height="40dp" android:layout_above="@id/layoutBottom" android:layout_centerHorizontal="true" android:layout_marginBottom="-20dp" android:adjustViewBounds="true" android:src="@drawable/testimage" /> </RelativeLayout> 

引用: – Android:放置ImageView重叠之间的布局

希望这会有所帮助。好运气

试试这个方法:只要根据需要更改layout_widthlayout_height即可。

 <?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" android:orientation="vertical" > <View android:id="@+id/viewOne" android:layout_width="match_parent" android:layout_height="200dp" android:background="#126989" /> <View android:id="@+id/viewTwo" android:layout_width="match_parent" android:layout_height="70dp" android:layout_below="@+id/viewOne" android:background="#547866" /> <View android:layout_width="70dp" android:layout_height="70dp" android:layout_alignBottom="@+id/viewTwo" android:layout_centerHorizontal="true" android:background="#ff7800" android:layout_marginBottom="35dp" /> </RelativeLayout> 

它看起来像这样:

图片

使用layout_marginTop = -20dp(一半的图像大小)。 它会上升。

android:layout_marginTop="-20dp"

把这两个图像放在相对布局中,首先定义要放在绿色圆圈后面的图像,而不是将绿色圆圈定义为

 android:layout_alignBottom="@+id/Image1" 

通过为绿色圆圈图像留出余量来调整位置。

我build议你使用这两个图像的framelayout。

刷新imageview在底部和桌扇在顶部。

注意:由于framelayout的行为像一个堆栈,底部的项目将出现在顶部。

然后,将刷新图标的重心设置在最下方,使其看起来像这样。

  <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageView android:src="@drawable/ic_fan" android:scaleType="centerCrop" android:layout_height="wrap_content" android:layout_width="match_parent"/> <ImageView android:src="@drawable/ic_refresh" android:layout_height="wrap_content" android:layout_width="wrap_content" android:gravity="center|bottom"/> </FrameLayout> 
 <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginBottom="32sp" > <ImageView android:id="@+id/ivBackground" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/ic_person_black" android:adjustViewBounds="true" android:id="@+id/image_view_product" /> <ImageView android:layout_width="wrap_content" android:layout_height="40dp" android:layout_marginTop="-20dp" android:layout_below="@+id/ivBackground" android:layout_centerHorizontal="true" android:background="@drawable/image_view_circle" android:src="@drawable/ic_circle" /> 

我认为这应该可以帮助你,我已经编辑了你的代码,并进行了如下修改
– 我将imageview的高度改为40dp,然后我给-20%的顶部留空,这样图像就可以在背景图像上覆盖一半了。

我没有运行这个代码,所以如果你面对任何问题只是让我知道,我希望这对你很好。

截图:

在这里输入图像说明

activity_main.xml中:

  <RelativeLayout android:id="@+id/rl_image" android:layout_width="match_parent" android:layout_height="200dp"> <ImageView android:id="@+id/thumbnail" android:layout_width="match_parent" android:layout_height="160dp" android:background="?attr/selectableItemBackgroundBorderless" android:clickable="true" android:contentDescription="null" android:scaleType="fitXY" android:src="@drawable/album9" /> <ImageView android:id="@+id/imageView_round" android:layout_width="70dp" android:layout_height="70dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:src="@drawable/user_profile" /> </RelativeLayout> 

我会推荐Constraintlayout因为它可以很好地控制单个视图项目的位置。 基于你的例子下面的示例

 <android.support.constraint.ConstraintLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:id="@+id/parentLayout"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_person_black" android:adjustViewBounds="true" android:id="@+id/image_view_product"/> <View android:layout_width="50dp" android:layout_height="50dp" app:layout_constraintTop_toBottomOf="@+id/image_view_product"/> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_alignBottom="@id/image_view_product" android:layout_centerHorizontal="true" android:background="@drawable/circle" android:src="@drawable/ic_add_circle_green_24dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/> </android.support.constraint.ConstraintLayout>