Android自定义控件(五)——圆形头像最简单的实现方式

简介: Android自定义控件(五)——圆形头像最简单的实现方式

11.png


着色器


今天将接着上一节的内容,讲解着色器Shader更多的用法,不知道大家关注过其他的圆形头像实现方式没有,是不是都有一个共同点,那就是代码非常的长,而博主今天实现的方式,只需要自己写13行代码就可以实现。


着色器函数

经过上一篇的讲解,我们都知道,着色器Shader是一个基类,那么它其实也是有两个函数的,分别是:

setLocalMatrix(Matrix localM)
getLocalMatrix(Matrix localM)


这两个函数是用来设置坐标变换矩阵,比如你可以进行缩放,平移变换等等等等,可以说非常的方便快捷。


实现圆形头像

我们的实现方法,也就用到上面两个函数,所以我们可以直接使用起来,这样看起来也更加的形象,方便于理解,首先,我们自定义一个View:

/***
 * 原型头像自定义控件
 */
public class CircleHeadView extends View {
    private Paint paint;//画笔
    private Bitmap bitmap;//图片
    private BitmapShader bitmapShader;//图片着色器
    public CircleHeadView(Context context) {
        super(context);
    }
    public CircleHeadView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.paint=new Paint();//初始化画笔工具
        this.bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.head_img);//获取头像图片
        this.bitmapShader=new BitmapShader(this.bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);//设置着色器为边缘填充
    }
    public CircleHeadView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}


在这里我们初始化了一个图片着色器BitmapShader,X,Y轴填充模式都是TileMode.CLAMP,虽然没什么用,但参数还是不能少的。


绘图实现

绘图是最关键的地方,我们来理清一下思路,要怎么才能显示圆形头像呢?


首先,因为要用到上面两个函数,所以肯定会要运用矩阵运算工具Matrix类,假如我们的图片很大,或者很小,而我要设置的头像为屏幕宽度,应该怎么做?先来看下代码:

Matrix matrix=new Matrix();
float scale=(float)getWidth()/this.bitmap.getWidth();
matrix.setScale(scale,scale);

因为不管图片大小,我们都需要它显示在整个头像之中,所以必须缩放到控件大小宽度,又因为它是个圆形,必须缩放成一个正方形,所以X,Y轴缩放大小一样。接着我们来看整体的OnDraw()实现:

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Matrix matrix=new Matrix();//初始化矩阵运算类
    float scale=(float)getWidth()/this.bitmap.getWidth();//获取图片要缩放的比例
    matrix.setScale(scale,scale);//设置缩放
    this.bitmapShader.setLocalMatrix(matrix);//设置变换矩阵
    this.paint.setShader(this.bitmapShader);//画笔设置着色器
    float half=(float) getWidth()/2;//获取圆心位置
    canvas.drawCircle(half,half,half,this.paint);//画出头像
}


注释其实很详细,不过,还是解释一下,因为我们的头像宽度为整个屏幕match_parent,所以圆心坐标的横坐标肯定是宽度的一半,又因为它是个正方形,纵坐标也应该和横坐标一样,所以相同,半径同样是整个屏幕的一半,所以最后的一行代码三个参数都是half。


XML代码如下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
   <com.liyuanjinglyj.circleheadapplication.CircleHeadView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"/>
</LinearLayout>

Github下载地址:点击下载

相关文章
|
5月前
|
XML 前端开发 Java
Android Studio App自定义控件中自定义视图的绘制讲解及实战(附源码 包括自定义绘制各种图形)
Android Studio App自定义控件中自定义视图的绘制讲解及实战(附源码 包括自定义绘制各种图形)
77 1
|
Android开发
flutter中实现仿Android端的onResume和onPause方法
flutter中实现仿Android端的onResume和onPause方法
|
8天前
|
缓存 前端开发 Android开发
安卓应用开发中的自定义控件
【9月更文挑战第28天】在安卓应用开发中,自定义控件是提升用户界面和交互体验的关键。本文通过介绍如何从零开始构建一个自定义控件,旨在帮助开发者理解并掌握自定义控件的创建过程。内容将涵盖设计思路、实现方法以及性能优化,确保开发者能够有效地集成或扩展现有控件功能,打造独特且高效的用户界面。
|
1月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义控件
【9月更文挑战第5天】在安卓开发的海洋中,自定义控件如同一艘精致的小船,让开发者能够乘风破浪,创造出既独特又高效的用户界面。本文将带你领略自定义控件的魅力,从基础概念到实战应用,一步步深入理解并掌握这一技术。
|
2月前
|
Android开发 UED 开发者
安卓开发中的自定义控件基础
【8月更文挑战第31天】在安卓应用开发过程中,自定义控件是提升用户界面和用户体验的重要手段。本文将通过一个简易的自定义按钮控件示例,介绍如何在安卓中创建和使用自定义控件,包括控件的绘制、事件处理以及与布局的集成。文章旨在帮助初学者理解自定义控件的基本概念,并能够动手实践,为进一步探索安卓UI开发打下坚实的基础。
|
2月前
|
存储 缓存 前端开发
安卓开发中的自定义控件实现及优化策略
【8月更文挑战第31天】在安卓应用的界面设计中,自定义控件是提升用户体验和实现特定功能的关键。本文将引导你理解自定义控件的核心概念,并逐步展示如何创建一个简单的自定义控件,同时分享一些性能优化的技巧。无论你是初学者还是有一定经验的开发者,这篇文章都会让你对自定义控件有更深的认识和应用。
|
2月前
|
XML 前端开发 Android开发
Android经典实战之Kotlin中实现圆角图片和圆形图片
本文介绍两种实现圆角图像视图的方法。第一种是通过自定义Kotlin `AppCompatImageView`,重写`onDraw`方法使用`Canvas`和`Path`进行圆角剪裁。第二种利用Android Material库中的`ShapeableImageView`,简单配置即可实现圆角效果。两种方法均易于实现且提供动态调整圆角半径的功能。
40 0
|
5月前
|
Android开发
Android实现圆形图像的两种方法(Glide和Picasso)
Android实现圆形图像的两种方法(Glide和Picasso)
218 1
|
5月前
|
XML Java Android开发
Android Studio App自定义控件中视图的构造和测量方法讲解及实战(附源码 实现下拉刷新功能 超详细必看)
Android Studio App自定义控件中视图的构造和测量方法讲解及实战(附源码 实现下拉刷新功能 超详细必看)
70 1
|
缓存 Android开发 Kotlin
Android 弹幕的两种实现及性能对比 | 自定义控件
Android 弹幕的两种实现及性能对比 | 自定义控件
234 0