设计圆角图像的圆角布局

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> 

MY background_chip lookslike这

<?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和图像视图应该有相同的高度，以便嘿对齐正确。