时间戳

首页 > 解决方案 > Android：可绘制的环形多梯度

android - Android：可绘制的环形多梯度

问题描述

我正在尝试实现以下目标：

里面的图像不是太大的问题，但戒指似乎是一个。我能够做到这一点：

使用：

<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>

如您所见，这只需要 3 种颜色。所以我尝试以编程方式进行：

val ring = 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)
            )
        )

            ring.shape = GradientDrawable.OVAL
            ring.thickness = resources.getDimension(R.dimen.all_time_best_frame_thickness).toInt()
            binding.goldFrame.background = ring

这并没有画出任何东西，所以我确定我错过了一些东西。也ring.thickness只在 API 29 上可用，我的最小值是 23。所以我需要找到一些替代方案。

布局是：

<LinearLayout
                        android:id="@+id/gold_frame"
                        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_photo_margin"
                            app:shapeAppearanceOverlay="@style/CircleImageView" />
                    </LinearLayout>

关于如何解决这个问题的任何想法？

标签： androidandroid-drawableandroid-shape

解决方案

我无法用环形来实现它，所以我最终做的是：

<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上创建了issue，通过PR解决了这个问题，已经合并但还没有发布，check out issue and pull request。

如果我设法使用环形来做到这一点，我会发布更新。

推荐阅读