ShapeableImageView无法将边角变圆。

Question

ShapeableImageView采用样式中的ShapeAppearanceOverlay项目来创建所需的形状和大小。形状系列是切割和圆角，半径可以使用数字或百分比。 这是我用于circularImageView的ShapeAppearanceOverlay主题：

<style name="ShapeAppearanceOverlay.App.circleImageView" parent="">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">50%</item>
    </style>

这是我使用的布局：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/grey"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="240dp" />
    <!--Top Header Layout-->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/topbar"
        android:scrollbars="none">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <!--Top Profile Section -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <com.google.android.material.imageview.ShapeableImageView
                    android:id="@+id/user_display_image"
                    style="@style/ShapeAppearanceOverlay.App.circleImageView"
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:src="@drawable/ic_user" />
            </LinearLayout>
            <androidx.fragment.app.FragmentContainerView
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingBottom="@dimen/normal_bottom_margin" />
        </LinearLayout>
    </ScrollView>
</RelativeLayout>

这是问题的屏幕截图： IDE 的截图如下：

- AmanSharma

---

从Android预览布局截图？ - i30mb1

@i30mb1 请再检查一遍。 - AmanSharma

Answer 1

使用app:shapeAppearanceOverlay代替style

<com.google.android.material.imageview.ShapeableImageView
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.circleImageView"
    .../>

- Gabriele Mariotti

---

这个可以运行。但是我该如何消除切角处留下的黑色区域？将android:background设置为透明并没有起作用。 - user3951320

更新：黑色角落只会在设计时的布局编辑器中显示。（https://dev59.com/6sHqa4cB1Zd3GeqPsBVp） - user3951320

Answer 2

或者如果你想通过style属性使用它：

    <style name="Style.App.circleImageView" parent="">
        <item name="shapeAppearance">@style/ShapeAppearanceOverlay.App.circleImageView</item>
    </style>

    <style name="ShapeAppearanceOverlay.App.circleImageView" parent="">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">50%</item>
    </style>

...
 <com.google.android.material.imageview.ShapeableImageView
                    android:id="@+id/user_display_image"
                    style="@style/Style.App.circleImageView"
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:src="@drawable/ic_user" />
...

- i30mb1