使用 setClipToOutline 时如何使 ImageView 的角为圆角和边框

Posted 2023-04-19

【中文标题】使用 setClipToOutline 时如何使 ImageView 的角为圆角和边框

【英文标题】：How to have an ImageView with corners rounded and bordered while using setClipToOutline

【发布时间】：2020-06-09 20:48:57

【问题描述】：

跟进this answer，我怎样才能实现相同的效果，但包括一个在剪裁的ImageView 周围平滑运行的边框。

我尝试将其用作带有红色边框的ImageView 和imageView.setClipToOutline(true) 的背景可绘制对象。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/transparent" />
    <corners
        android:radius="35" />
    <stroke
        android:
        android:color="#E42323" />
    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp" />
</shape>

当不使用图像时Android:src it works fine.

但是当我使用Android:src the borders are clipped as well.

注意：我知道可以使用FrameLayout 和ImageView 作为孩子并将背景可绘制设置为FrameLayout 但that's just asking for issues。

【问题讨论】：

你尝试过使用两个图像吗？首先是带有盘子的图像，其次是带有圆形边框的图像

@FranciscoBarrios 您的建议与我上面所说的类似，我什至认为使用FrameLayout 而不是ImageView 来保持圆形边框更干净

【参考方案1】：

好的，我认为这不是您所期望的解决方案，但由于没有简单的解决方案，因此如果 API 级别 >= 23，我可以找到一个有趣的解决方法，但由于它的工作原理我认为如果它对某人有帮助，我会分享它。

基本上，将相同的drawable设置为背景并将其设置为

android:foreground="@drawable/background"

您仍然需要设置背景以便setClipToOutline 正确剪切drawable，而前景将在外部创建重叠边框。

尽管前台使用了FrameLayout，但由于它对于相同的ImageView 没有发现任何动画问题，它们似乎可以正常工作。

【讨论】：

可以确认，这个解决方案确实有效，还没有测试动画，但它应该没问题，但它仍然有两个警告，一个是它需要 API >= 23，另一个是如果一个已经在使用前景可绘制对象，则必须对其进行编辑以使其具有与背景可绘制文件相同的形状

@EvilNeo 不知何故我还没有注意到你的评论。是的，正如您提到的 API>=23 是一个限制，但关于前景，它可以是任何与背景相同的东西。但是setClipToOutline 剪辑基于背景帧，因此设置更大尺寸的前景会使其移动到剪辑的图像视图之外，但较小的可以。由于圆角的边框是要求，因此建议两者都相同。