Android: 可绘制环形多渐变
Android: drawable ring shape multi-gradient
我正在努力实现如下目标:
里面的图片问题不大,但戒指好像是一个。我能够做到这一点:
使用:
<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>
知道如何处理这个问题吗?
我无法用环形实现它,所以我最后做的是:
<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解决了问题,已合并但尚未发布,查看issue and pull request。
如果我设法使用 Ring shape 完成更新,我会 post 更新。
我正在努力实现如下目标:
里面的图片问题不大,但戒指好像是一个。我能够做到这一点:
使用:
<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>
知道如何处理这个问题吗?
我无法用环形实现它,所以我最后做的是:
<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解决了问题,已合并但尚未发布,查看issue and pull request。
如果我设法使用 Ring shape 完成更新,我会 post 更新。