设计圆角图像的圆角布局

Question

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

此致 SREE

Answer 1

谢谢你的回答。

我发现我的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"/>

最后它看起来像

特技是我给角半径的宽度只是左图像宽度的一半。

Answer 2

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

textview和image视图应具有相同的高度，以便正确对齐。