android 圆形头像方案,android圆形头像实现

今天我们学习圆形头像的实现原理,先上图

a7498f174a32

demo实例

基本上能满足一般的圆形头像功能实现

其中包括控件的大小,控件四个角的弧度控制以及外圈的颜色和宽度

现在我们看看具体的使用:

android:id="@+id/rotating_circle_view"

android:layout_width="100dp"

android:layout_height="100dp"

android:src="@mipmap/pic"

app:circle_color="#f00"

app:circle_kind="all"

app:circle_width="2dp" />

其中有三个自定义属性

app:circle_color 代表外圈的颜色

app:circle_width 代表外圈的宽度

app:circle_kind 代表圆形的展示方式,分五种

从上面的图中我们是可以看出来的,取值分别为:

具体的使用方式就是这么简单,下面我们看看具体是怎么实现的

首先我们需要知道BitmapShader和Matrix这俩个东西

具体的作用说下,BitmapShader用于设置图片平铺方式,分三种:

:CLAMP(拉伸)、MIRROR(镜像)、REPETA(重复)

这里借用别人的图片一下看看是什么样子

a7498f174a32

拉伸

a7498f174a32

镜像

a7498f174a32

重复

大致表达的意思就是当图片大小不足控件的大小时,图片以外空白区域如何展示

该案例里面我们使用了CLAMP功能,具体代码实例:

bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

Matrix 这个本身叫做矩阵,放在图片处理中可以用于图片的拉伸,缩放,倾斜等一些操作,当我们的图片不满我们的控件时,我们可以控件图片的大小以适应控件,大概就是这个作用。

该案例里面我们用了俩个功能,缩放和位移,代码示意:

matrix.setScale(scale, scale);

matrix.postTranslate((int) (dx + 0.5f) + borderWidth, (int) (dy + 0.5f) + borderWidth);

当这俩种各种设置好之后,matrix可以设置给BitmapShader,代码:

bitmapShader.setLocalMatrix(matrix);

bitmapShader可以设置给paint,代码:

imgPaint.setShader(bitmapShader);

从bitmapShader的实例化那里我们就已经获取到了图片bitmap的必要信息,此时经过这些操作,bitmap的信息已经被携带在了paint里面,下面我们就可以利用携带了bitmap信息的paint任意画图,那么圆形头像的实现就很简单了,代码:

canvas.drawCircle(getWidth() / 2, getHeight() / 2, imgRadius, imgPaint);

看见了,就是利用最简单的画圆就可以实现我们的圆形头像,那么外边圆这里就不用细说了吧,再花一个半径比这个大一点的圆即可,好了,今天的自定义view就学习到这,代码实例见:

代码点我1-3

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android Studio中实现圆形头像的方法有以下几种: 1. 使用ImageView的圆形裁剪功能 在布局文件中添加一个ImageView,并设置其src属性为头像图片,然后设置其scaleType为centerCrop,最后使用android:background属性设置圆形背景即可实现圆形头像。 ``` <ImageView android:id="@+id/avatar" android:layout_width="100dp" android:layout_height="100dp" android:scaleType="centerCrop" android:src="@drawable/avatar" android:background="@drawable/circle"/> ``` 其中,circle.xml是一个圆形背景的drawable文件,代码如下: ``` <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#FFFFFF" /> </shape> ``` 2. 使用Glide库实现圆形头像 Glide是一款强大的图片加载库,可以方便地加载网络或本地图片,并提供了很多图片处理的功能,包括圆形裁剪。 在布局文件中添加一个ImageView,并设置其src属性为空,然后在Java代码中使用Glide加载头像图片,并使用Glide提供的Transformations.circleCrop()方法进行圆形裁剪,最后设置到ImageView中即可。 ``` <ImageView android:id="@+id/avatar" android:layout_width="100dp" android:layout_height="100dp"/> Glide.with(this) .load("http://xxx.com/avatar.png") .apply(RequestOptions.circleCropTransform()) .into(imageView); ``` 3. 使用自定义View实现圆形头像 自定义View是一种更灵活、更可定制化的实现方式。可以继承View或其子类,然后在onDraw方法中绘制头像图片,并使用canvas.drawCircle()方法绘制圆形背景。 ``` public class CircleImageView extends ImageView { private Paint mPaint; public CircleImageView(Context context) { super(context); init(); } public CircleImageView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public CircleImageView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setColor(Color.WHITE); } @Override protected void onDraw(Canvas canvas) { Drawable drawable = getDrawable(); if (drawable == null) { super.onDraw(canvas); return; } Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap(); Bitmap circleBitmap = getCircleBitmap(bitmap); canvas.drawBitmap(circleBitmap, 0, 0, null); } private Bitmap getCircleBitmap(Bitmap bitmap) { Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(output); int width = bitmap.getWidth(); int height = bitmap.getHeight(); int radius = Math.min(width, height) / 2; canvas.drawCircle(width / 2, height / 2, radius, mPaint); mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(bitmap, 0, 0, mPaint); return output; } } ``` 在布局文件中使用自定义View即可。 ``` <com.example.CircleImageView android:id="@+id/avatar" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/avatar"/> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值