android - Android:圆形图像的框架
问题描述
我正在努力解决以下问题:
我想实现这一点:
我遇到了以下问题:
<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),
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。
如果我设法使用环形来做到这一点,我会发布更新。
推荐阅读
- scala - 偏斜数据的自定义分区器
- python - Python 类 __str__ 只返回一行字典
- angular - 更改 Moment 变量的小时数时,this.moment.hours() 不是函数错误
- php - 在评论中用名称替换 id 而不替换错误的大小写
- c++ - 处理自定义 Qt 小部件中的输入事件
- mybatis - SqlProvider 重载
- python - 如何在openpyxl中设置单元格语言以获得良好的数字格式?
- mongodb - 如何在 mongodb 中使用查找来匹配数组字段?
- python - python打印表格程序中{1:>2}的含义
- python - 如果没有引发异常,您如何以 Python 方式告诉程序始终执行某些操作