Android聊天应用中实现带圆角的动画.gif ImageView方案求助

我完全是编程新手，目前通过修改一款开源聊天应用逐步学习。想要实现聊天中的动画.gif消息带圆角播放，但试了几种方法都不行：用RoundedImageView能实现圆角但GIF无法播放，普通ImageView能播放GIF却没圆角；尝试用CardView实现，但加载媒体文件时应用崩溃。源码对应项目为cheogram-android-modern，相关布局文件是src/main/layout/message_content.xml，已尝试RoundedImageView、标准ImageView、CardView、嵌套ImageView的CardView这些方案。

下面给你几个可行的解决办法，都是新手能上手的：

方案一：用Glide加载GIF并直接加圆角 #

这是最省心的方法，Glide是Android常用的图片加载库，天生支持GIF播放，还能直接设置圆角，不用改布局里的控件：

1. 先确认项目里有没有加Glide依赖，如果没有，打开模块的build.gradle（不是项目根目录的那个），在dependencies里加：

implementation 'com.github.bumptech.glide:glide:4.16.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.16.0'

2. 找到项目里加载GIF的代码，替换成下面的逻辑（把gifImageView换成你布局里的ImageView实例，gifUri换成GIF文件的路径或Uri）：

Glide.with(getContext())
    .load(gifUri)
    .transform(new RoundedCorners(dpToPx(16))) // 16是圆角的dp值，你可以自己改大小
    .into(gifImageView);

3. 布局里还是用普通的ImageView就行，不用换控件类型。

方案二：给普通ImageView加圆角遮罩 #

不想用第三方库的话，给ImageView套个带圆角的背景，让GIF内容被背景裁剪：

1. 在res/drawable文件夹下新建一个rounded_corner_bg.xml文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent"/>
    <corners android:radius="16dp"/> <!-- 圆角大小自己调 -->
    <stroke android:width="0dp" android:color="@android:color/transparent"/>
</shape>

2. 修改message_content.xml里的ImageView属性：

<ImageView
    android:id="@+id/gif_message"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/rounded_corner_bg"
    android:clipToPadding="true"
    android:padding="1dp" <!-- 加1dp padding避免GIF边缘和圆角重叠 -->
    android:scaleType="centerCrop"/> <!-- 缩放类型按需选，比如fitCenter也可以 -->

如果GIF显示不对，调整下scaleType就行。

方案三：修复CardView崩溃问题 #

之前用CardView崩溃，大概率是布局参数或加载逻辑的问题，试试这么改：

1. 修改message_content.xml里的布局，把ImageView嵌套进CardView，设置好圆角，关掉阴影（不需要的话）：

<androidx.cardview.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardCornerRadius="16dp"
    app:cardElevation="0dp"
    app:cardPreventCornerOverlap="false">

    <ImageView
        android:id="@+id/gif_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"/>
</androidx.cardview.widget.CardView>

2. 检查加载GIF的代码，别用ImageView的getContext()，改用Activity或者Fragment的上下文，避免资源获取出错。

小提示 #

• 如果项目用的是原生Movie类加载GIF，那只能用方案二的遮罩方法，因为原生Movie播放不会自动裁剪。
• 测试前记得清下应用缓存，避免旧代码残留影响结果。

内容的提问来源于stack exchange，提问作者Rogue Ren