代码之家 › 专栏 › 技术社区 › jack_the_beast

安卓:可拉伸环形多渐变

android-shape android-drawable android

0

jack_the_beast · 技术社区 · 5 年前

我正在努力实现以下目标:

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

使用:

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

你知道如何处理这个问题吗?

0 回复 | 直到 5 年前

1

0

jack_the_beast 5 年前

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

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

并将背景设置为 图片框 不幸的是,它本身 ShapeableImageView 根据填充缩放背景(标准 图片框 不这样做)。

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

如果我能用Ring shape做到这一点,我会发布一个更新。