安卓(Android)：圆形图片的框架

Question

我遇到了以下问题：

我想要实现这个：

我已经做出了下面的东西：

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/drawable_gold_frame">

    <com.google.android.material.imageview.ShapeableImageView
         android:id="@+id/gold_photo"
         android:layout_width="@dimen/all_time_best_photo_size"
         android:layout_height="@dimen/all_time_best_photo_size"
         android:layout_margin="@dimen/all_time_best_frame_thickness"
         app:shapeAppearanceOverlay="@style/CircleImageView" />
</LinearLayout>

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

<dimen name="all_time_best_photo_size">70dp</dimen>
<dimen name="all_time_best_frame_thickness">5dp</dimen>

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:thickness="@dimen/all_time_best_frame_thickness"
    android:useLevel="false">
    <gradient
        android:startColor="@color/gold_gradient_start"
        android:centerColor="@color/gold_gradient_end"
        android:endColor="@color/gold_gradient_start"
        android:angle="180" />
</shape>

接下来使用Glide加载图像，代码如下：

环形在哪里？如果我增加ImageView的边距，它就会变得可见：

android:layout_margin="20dp"

还有 android:layout_margin="15dp"（无需考虑颜色）

最后一张图是我能找到的最接近的，我可以尝试调整边距来改进它，但我认为这样可能会在不同的设备上出现问题……

我不明白的是，为什么使用相同的dimen值作为环形厚度和ImageView边距不起作用。有没有更“安全”的方法实现这个效果呢？

请注意，所有图片的框架大小都相同，我只是非常粗略地裁剪了截图。

- jack_the_beast

Answer 1

我无法得到一个圆形的干净结果，所以最终我做的是：

<FrameLayout
                    android:id="@+id/gold_frame"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">

                    <com.google.android.material.imageview.ShapeableImageView
                        android:id="@+id/gold_photo"
                        android:layout_width="@dimen/all_time_best_photo_size"
                        android:layout_height="@dimen/all_time_best_photo_size"
                        android:layout_margin="@dimen/all_time_best_frame_thickness"
                        app:shapeAppearanceOverlay="@style/CircleImageView" />
                </FrameLayout>

并且

val medal = GradientDrawable(
            GradientDrawable.Orientation.LEFT_RIGHT, intArrayOf(
                ContextCompat.getColor(requireContext(), R.color.gold_gradient_1),
                ContextCompat.getColor(requireContext(), R.color.gold_gradient_2),
                ContextCompat.getColor(requireContext(), R.color.gold_gradient_3),
                ContextCompat.getColor(requireContext(), R.color.gold_gradient_4),
                ContextCompat.getColor(requireContext(), R.color.gold_gradient_5)
            )
        )

            medal.shape = GradientDrawable.OVAL
            binding.goldFrame.background = medal

我这样创建了一个内部带有渐变的圆形，然后将其设置为 ImageView 的容器的背景。它不是完美的，因为如果您想要图片透明度，则无法正常工作，但在我的情况下可以使用。

此外，通过删除容器并执行以下操作，它可以得到改善：

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/gold_photo"
    android:layout_width="@dimen/all_time_best_photo_size"
    android:layout_height="@dimen/all_time_best_photo_size"
    android:padding="@dimen/all_time_best_frame_thickness"
    app:shapeAppearanceOverlay="@style/CircleImageView" />

并将背景设置为ImageView本身，不幸的是ShapeableImageView根据填充比例缩放背景（标准ImageView不会这样做）。

用户在github上创建了问题，并通过PR解决了该问题，该PR已合并但尚未发布，请查看issue和pull request。

如果我使用Ring形状成功实现它，我会发布更新的。

- jack_the_beast