如何像Instagram一样在圆形ImageView周围设置边框？

Question

我想在圆形图像视图周围设置圆形边框，就像 Instagram Stories 一样。有谁能帮忙吗？

这是我的图像视图：

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/profile_image"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginStart="10dp"
    android:layout_marginTop="8dp"
    android:src="@drawable/profile1"
    app:civ_border_color="#DBDBDB"
    app:civ_border_width="1dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

- parisa

Answer 1

您也可以使用Material Components Library提供的ShapeableImageView。

类似于以下内容：

<com.google.android.material.imageview.ShapeableImageView
    app:shapeAppearanceOverlay="@style/circularImageView"
    app:srcCompat="@drawable/...."
    app:strokeColor="@color/....."
    app:strokeWidth="1dp"
    ...
    />

使用：

  <style name="circularImageView">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

注意：此需求至少需要版本为1.2.0-alpha03。

- Gabriele Mariotti

---

材料设计大师回归 :) - a_local_nobody

Answer 2

类似Instagram故事的圆形图片视图

我发现了一种新方法，你也应该尝试一下。我用这种方法取得了巨大的成功。通过这种方法，你可以获得一个类似Instagram风格的圆形图片视图。

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">


            <de.hdodenhof.circleimageview.CircleImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:scaleType="centerCrop"
                android:layout_centerInParent="true"
                android:background="@drawable/instagram_boder_color.xml"/>


            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/profile_image"
                android:layout_width="75dp"
                android:layout_height="75dp"
                android:scaleType="centerCrop"
                android:layout_centerInParent="true"
                app:civ_border_color="@color/white"
                app:civ_border_width="3dp"
                android:background="@drawable/white_boder_color.xml"/>


        </RelativeLayout>

使用以下代码创建两个可绘制对象：

创建可绘制对象1 = "instagram_boder_color.xml"，形状为 android:shape="oval"

<gradient
    android:startColor="#DD129D"
    android:endColor="#FBC02D"
    />

创建名为 white_boder_color.xml 的 drawable 2，形状为 android:shape="oval"。

<solid android:color="#FFFFFF"></solid>

输出：边框颜色

- Dilan