Android基于Fresco实现圆角和圆形图片


Posted in Java/Android onApril 01, 2022

Fresco是FaceBook开源的Android平台图片加载库,可以从网络,从本地文件系统,本地资源加载图片

Fresco本身已经实现了圆角以及圆形图片的功能。

<!--圆形图片,一般用作头像-->
<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/iv_avatar"
    android:layout_width="40dp"
    android:layout_height="40dp"
    app:placeholderImage="@drawable/ic_avatar_default"
    app:roundAsCircle="true"/>
<!--圆角图片,为了美观大多数图片都会有这样的处理。-->
<!--当图片为正方形的时候,将roundedCornerRadius设置为边长的一半,也可以形成圆形图片的效果-->
<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/iv_avatar"
    android:layout_width="40dp"
    android:layout_height="40dp"
    app:placeholderImage="@drawable/ic_avatar_default"
    app:roundedCornerRadius="5dp"/>

工作中,遇到圆形头像的时候,UI通常会给我们这样一张图作为默认图片

Android基于Fresco实现圆角和圆形图片

理论上来讲,只需要加入下列这行代码,就可以完成这部分工作了

app:placeholderImage="@drawable/ic_avatar_default"

然而圆形图片本身已经是圆形的了,在有些机型上就出现了这个样式。

Android基于Fresco实现圆角和圆形图片

搜索了一波,自带的属性都不能解决这个问题,干脆自己来定义这个圆形的实现吧,同时Fresco自带的圆角效果只能保证使用统一的半径,想要让四个圆角的半径不同,只能在java文件中设置,不够灵活,定义圆角半径的属性也需要做些变更。

思路:自定义RoundImageView继承自 SimpleDraweeVie,具备其所有的功能。
Canvas的clipPath(Path path)可以根据Path,将Canvas剪裁成我们想要的图形。

public class RoundImageView extends SimpleDraweeView {
    
    private final static int DEFAULT_VALUE = 0;

    private float mWidth;
    private float mHeight;
    private Path mPath;

    // 圆角角度
    private float mCornerRadius;
    // 左上角圆角角度
    private float mLeftTopRadius;
    // 右上角圆角角度
    private float mRightTopRadius;
    // 右下角圆角角度
    private float mRightBottomRadius;
    // 左下角圆角角度
    private float mLeftBottomRadius;

    // 是否使用圆形图片
    private boolean mAsCircle;
    // 圆形图片半径
    private float mRadius;
    
    public RoundImageView(Context context) {
        this(context, null);
    }

    public RoundImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RoundImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initData();
        initAttrs(context, attrs);
    }
    
    private void initData() {
        mPath = new Path();
    }

    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundImageView);
        mCornerRadius = typedArray.getDimension(R.styleable.RoundImageView_cornerRadius, DEFAULT_VALUE);
        mAsCircle = typedArray.getBoolean(R.styleable.RoundImageView_asCircle, false);
        if (mCornerRadius <= 0) {
            // 说明用户没有设置四个圆角的有效值,此时四个圆角各自使用自己的值
            mLeftTopRadius = typedArray.getDimension(R.styleable.RoundImageView_leftTopRadius, DEFAULT_VALUE);
            mRightTopRadius = typedArray.getDimension(R.styleable.RoundImageView_rightTopRadius, DEFAULT_VALUE);
            mRightBottomRadius = typedArray.getDimension(R.styleable.RoundImageView_rightBottomRadius, DEFAULT_VALUE);
            mLeftBottomRadius = typedArray.getDimension(R.styleable.RoundImageView_leftBottomRadius, DEFAULT_VALUE);
        } else {
            // 使用了统一的圆角,因此使用mCornerRadius统一的值
            mLeftTopRadius = mCornerRadius;
            mRightTopRadius = mCornerRadius;
            mRightBottomRadius = mCornerRadius;
            mLeftBottomRadius = mCornerRadius;
        }
        
        typedArray.recycle();
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mWidth = getWidth();
        mHeight = getHeight();
        // 如果开启了圆形标记
        if (mAsCircle) {
            mRadius = Math.min(mWidth / 2, mHeight / 2);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // 如果开启了圆形标记,圆形图片的优先级高于圆角图片
        if(mAsCircle) {
            drawCircleImage(canvas);
        } else {
            drawCornerImage(canvas);
        }
        super.onDraw(canvas);
    }

    /**
     * 画中间圆形
     * @param canvas
     */
    private void drawCircleImage(Canvas canvas) {
        mPath.addCircle(mWidth / 2, mHeight / 2, mRadius, Path.Direction.CW);
        canvas.clipPath(mPath);
    }

    /**
     * 画圆角
     * @param canvas
     */
    private void drawCornerImage(Canvas canvas) {
        if (mWidth > mCornerRadius && mHeight > mCornerRadius) {
            // 设置四个角的x,y半径值
            float[] radius = {mLeftTopRadius, mLeftTopRadius, mRightTopRadius, mRightTopRadius, mRightBottomRadius, mRightBottomRadius, mLeftBottomRadius, mLeftBottomRadius};
            mPath.addRoundRect(new RectF(0,0, mWidth, mHeight), radius, Path.Direction.CW);
            canvas.clipPath(mPath);
        }
    }
}

attr属性如下

<!--适配android10的图片控件-->
    <declare-styleable name="RoundImageView">
        <!--圆形图片-->
        <attr name="asCircle" format="boolean"/>
        <!--左上角圆角半径-->
        <attr name="leftTopRadius" format="dimension"/>
        <!--右上角圆角半径-->
        <attr name="rightTopRadius" format="dimension"/>
        <!--右下角圆角半径-->
        <attr name="rightBottomRadius" format="dimension"/>
        <!--左下角圆角半径-->
        <attr name="leftBottomRadius" format="dimension"/>
        <!--四个圆角半径,会覆盖上边四个圆角值-->
        <attr name="cornerRadius" format="dimension"/>
</declare-styleable>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Java/Android 相关文章推荐
详解Java分布式事务的 6 种解决方案
Jun 26 Java/Android
spring boot项目application.properties文件存放及使用介绍
Jun 30 Java/Android
gateway与spring-boot-starter-web冲突问题的解决
Jul 16 Java/Android
mybatis中注解与xml配置的对应关系和对比分析
Aug 04 Java/Android
Java实现房屋出租系统详解
Oct 05 Java/Android
使用Spring处理x-www-form-urlencoded方式
Nov 02 Java/Android
Java实现经典游戏泡泡堂的示例代码
Apr 04 Java/Android
MyBatis配置文件解析与MyBatis实例演示
Apr 07 Java/Android
零基础学java之方法的定义与调用详解
Apr 10 Java/Android
Java数据结构之堆(优先队列)
May 20 Java/Android
SpringBoot项目部署到阿里云服务器的实现步骤
Jun 28 Java/Android
SpringBoot深入分析讲解监听器模式下
Jul 15 Java/Android
Android自定义scrollview实现回弹效果
Apr 01 #Java/Android
Android自定义ScrollView实现阻尼回弹
Java实战之课程信息管理系统的实现
Android超详细讲解组件ScrollView的使用
Spring Boot DevTools 全局配置学习指南
Spring事务管理下synchronized锁失效问题的解决方法
Mar 31 #Java/Android
Spring依赖注入多种类型数据的示例代码
Mar 31 #Java/Android
You might like
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
jQuery 一个图片切换的插件
2011/10/09 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
python实现文件名批量替换和内容替换
2014/03/20 Python
Python中存取文件的4种不同操作
2018/07/02 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
Python @property使用方法解析
2019/09/17 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
机修车间主任岗位职责
2015/04/08 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
python 标准库原理与用法详解之os.path篇
2021/10/24 Python