Android：画圆圈图片的框架

编程问答 2022-08-11

问题描述

我正在努力解决以下问题：

我想实现这一目标：

我对以下内容有所了解：

<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边距无法正常工作。有没有更“安全”的方法来实现这一目标？

请注意，所有图片的帧大小都相同，我只是非常糟糕地裁剪了屏幕截图

解决方法

我无法获得干净的环形结果，所以我最终要做的是：

<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),R.color.gold_gradient_3),R.color.gold_gradient_4),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（已合并但尚未发布）解决了该问题，请查看issue和pull request。

如果我设法使用Ring shape进行更新，则会发布更新。

androidandroiddrawabledrawableimageviewimageview