使用圆形图像设计圆角布局

Question

我很困惑如何设计如下所示的布局。我可以使用 glide 制作圆形图像，但如何将其与布局对齐？

此致，斯里

Answer 1

在图像视图旁边放置一个文本视图。 imageview 和 textview 都应该有带圆角的背景。您需要与您的 UX 设计师合作。

textview 和 image view 应该有相同的高度，这样才能正确对齐。

Answer 2

谢谢大家的回答。

我找到了一个解决方案，我的 UI 是这样的

<?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_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/background_chip"
android:orientation="horizontal"
>

<com.makeramen.roundedimageview.RoundedImageView
    android:id="@+id/rv_profile_pic"
    android:layout_width="@dimen/chip_pic_height_width"
    android:layout_height="@dimen/chip_pic_height_width"
    android:src="@mipmap/ic_account_circle_white_24dp"
    app:riv_oval = "true"
    android:layout_gravity="center_vertical"/>

<TextView android:id="@+id/name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="14sp"
    android:paddingStart="@dimen/padding_half"
    android:paddingTop="@dimen/padding_half"
    android:paddingBottom="@dimen/padding_half"
    android:textColor="@color/app_bg_white"
    android:layout_gravity="center_vertical"
    style="@style/SecondaryText"/>

<ImageView
    android:id="@+id/iv_delete"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_remove_circle_white_24dp"
    android:layout_gravity="center_vertical"
    android:paddingEnd="@dimen/padding_half"
    android:paddingStart="@dimen/padding_half"
    />

   </LinearLayout>

我的background_chip看起来像这样

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

<corners
    android:radius="@dimen/chip_pic_radius"/>
<solid
    android:color="@color/grey_light"/>

终于变成这样了

诀窍是我将角半径指定为左图宽度的一半。

使用圆形图像设计圆角布局

Design a rounded corner layout with rounded image

layout

android

android-glide