Question

这是我要实现的目标：

但是我最终创建了这样的东西：

如何获得imageview的圆形边缘？请注意，包含文本的布局也具有重叠的imageview。

这是我的布局文件：

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@drawable/background"
        android:orientation="horizontal">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="120dp"
            android:layout_height="125dp"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="10dp"
            android:background="@color/accent_white"
            android:id="@+id/vendoravatar_imageview"
            android:src="@drawable/avatarnotfound" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:gravity="center"
            android:id="@+id/data_layout"
            android:layout_marginTop="30dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="10dp"
            android:orientation="horizontal">

            <View
                android:layout_width="100dp"
                android:layout_height="match_parent">

            </View>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/accent_white"
                android:orientation="vertical">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="16sp"
                    android:typeface="serif"
                    android:layout_marginTop="10dp"
                    android:layout_marginLeft="10dp"
                    android:text="@string/random_vendoruser1"
                    android:id="@+id/vendorusername_textview"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_marginLeft="10dp"
                    android:typeface="serif"
                    android:text="@string/random_vendoruser1"
                    android:id="@+id/vendoruserdesc_textview"/>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="25dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginBottom="5dp"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:layout_gravity="center"
                        android:id="@+id/editvuser_imageview"
                        app:srcCompat="@drawable/ic_pencil"/>

                    <View
                        android:layout_width="2dp"
                        android:layout_height="match_parent"
                        android:layout_marginTop="3dp"
                        android:layout_marginBottom="3dp"
                        android:layout_marginLeft="20dp"
                        android:background="@color/client_grey"
                        ></View>

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:layout_gravity="center"
                        android:id="@+id/deletevuser_imageciew"
                        app:srcCompat="@drawable/ic_dustbin_color"/>

                    <View
                        android:layout_width="2dp"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="3dp"
                        android:layout_marginBottom="3dp"
                        android:background="@color/client_grey"
                        ></View>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:layout_gravity="center"
                        android:id="@+id/lockvuser_imageview"
                        app:srcCompat="@drawable/ic_lock_open_24dp"/>

                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

    </FrameLayout>
</RelativeLayout>

请帮助，在此先感谢。我只是添加一些文本，主要是为了避免来自stackoverflow的代码错误。

Answer 1

尝试此操作从您的 android:background="@color/accent_white"

中删除 CircleImageView

   <RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:background="@color/colorAccent"
    android:layout_height="wrap_content">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:orientation="horizontal">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="120dp"
            android:layout_height="125dp"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="10dp"
            android:id="@+id/vendoravatar_imageview"
            android:src="@drawable/nilesh" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:gravity="center"
            android:id="@+id/data_layout"
            android:layout_marginTop="30dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="10dp"
            android:orientation="horizontal">

            <View
                android:layout_width="100dp"
                android:layout_height="match_parent">

            </View>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="accent_white"
                android:orientation="vertical">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="16sp"
                    android:typeface="serif"
                    android:layout_marginTop="10dp"
                    android:layout_marginLeft="10dp"
                    android:text="random_vendoruser1"
                    android:id="@+id/vendorusername_textview"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_marginLeft="10dp"
                    android:typeface="serif"
                    android:text="random_vendoruser1"
                    android:id="@+id/vendoruserdesc_textview"/>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="25dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginBottom="5dp"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:layout_gravity="center"
                        android:id="@+id/editvuser_imageview"
                        app:srcCompat="@drawable/ic_delete"/>

                    <View
                        android:layout_width="2dp"
                        android:layout_height="match_parent"
                        android:layout_marginTop="3dp"
                        android:layout_marginBottom="3dp"
                        android:layout_marginLeft="20dp"
                        android:background="@color/colorAccent"
                        />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:layout_gravity="center"
                        android:id="@+id/deletevuser_imageciew"
                        app:srcCompat="@drawable/ic_close"/>

                    <View
                        android:layout_width="2dp"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="3dp"
                        android:layout_marginBottom="3dp"
                        android:background="@color/colorAccent"
                        />
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:layout_gravity="center"
                        android:id="@+id/lockvuser_imageview"
                        app:srcCompat="@drawable/ic_add_black_24dp"/>

                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

    </FrameLayout>
</RelativeLayout>

输出

编辑

<RelativeLayout 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="wrap_content">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerInParent="true"
        android:layout_marginLeft="-20dp"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:background="@color/colorAccent"
        android:layout_toEndOf="@id/vendoravatar_imageview"
        android:orientation="horizontal">


        <LinearLayout
            android:id="@+id/data_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_marginLeft="20dp"
            android:gravity="center"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="accent_white"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/vendorusername_textview"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:layout_marginTop="10dp"
                    android:text="random_vendoruser1"
                    android:textSize="16sp"
                    android:typeface="serif" />

                <TextView
                    android:id="@+id/vendoruserdesc_textview"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:text="random_vendoruser1"
                    android:textSize="14sp"
                    android:typeface="serif" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="25dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginBottom="5dp"
                    android:orientation="horizontal">

                    <ImageView
                        android:id="@+id/editvuser_imageview"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginLeft="10dp"
                        app:srcCompat="@drawable/ic_delete" />

                    <View
                        android:layout_width="2dp"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="3dp"
                        android:layout_marginBottom="3dp"
                        android:background="@color/colorAccent" />

                    <ImageView
                        android:id="@+id/deletevuser_imageciew"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginLeft="20dp"
                        app:srcCompat="@drawable/ic_close" />

                    <View
                        android:layout_width="2dp"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="3dp"
                        android:layout_marginBottom="3dp"
                        android:background="@color/colorAccent" />

                    <ImageView
                        android:id="@+id/lockvuser_imageview"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginLeft="20dp"
                        app:srcCompat="@drawable/ic_add_black_24dp" />

                </LinearLayout>

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/vendoravatar_imageview"
        android:layout_width="120dp"
        android:layout_height="125dp"
        android:layout_alignParentStart="true"
        android:layout_centerInParent="true"
        android:layout_marginTop="20dp"
        android:src="@drawable/nilesh" />

</RelativeLayout>

输出

Answer 2

要制作圆形ImageView，请在布局XML中添加CircularImageView 并在您的项目中添加CircularImageView库，或者您也可以抓取通过Gradle：

implementation 'com.mikhaellopez:circularimageview:3.2.0'

，然后在您想要该圆形图像的xml中使用它

<com.mikhaellopez.circularimageview.CircularImageView
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:src="@drawable/image"
        app:civ_border_color="#EEEEEE"
        app:civ_border_width="4dp"
        app:civ_shadow="true"
        app:civ_shadow_radius="10"
        app:civ_shadow_color="#8BC34A"/>

如何在布局上放置圆形图像视图？

2 个答案: