圆形头像的7种显示方法
牙叔教程 简单易懂
效果展示
环境
手机: Mi 11 Pro
Android版本: 11
Autojs版本: 9.0.11
图片形状: 正方形
圆形头像的7种显示方法
第1种: 使用ShapeableImageView控件
备注: material版本最低要求1.2.0, 因为ShapeableImageView控件是在1.2.0才添加的
"ui";
importClass(android.view.ViewOutlineProvider);
importClass(android.content.res.ColorStateList);
importClass(com.google.android.material.shape.RelativeCornerSize);
importClass(com.google.android.material.shape.AbsoluteCornerSize);
importClass(com.google.android.material.shape.CornerFamily);
importClass(com.google.android.material.shape.ShapeAppearanceModel);
ui.layout(<vertical><com.google.android.material.imageview.ShapeableImageViewandroid:id="@+id/image"android:layout_width="110dp"android:layout_height="110dp"android:padding="0dp"margin="20dp"app:strokeColor="#ff0000"android:src="file://./yashu.png"/></vertical>
);imgView = ui.image;
imgView.shapeAppearanceModel = ShapeAppearanceModel.builder().setAllCornerSizes(ShapeAppearanceModel.PILL).build();
第2种: 使用setOutlineProvider设置view的轮廓
默认情况下，所有的view都是矩形的，虽然可以给view设置背景圆形的图片，即可以在界面显示出圆形的内容，但是view的大小实际上依然是矩形，并且设置的图片实际上也是矩形的，只是圆形以外的区域是透明色。
如果根据view大小来生成对应的阴影，就会出现很奇怪的效果，（一个看起来圆形的view展示出的却是一个矩形的阴影）为了解决这个问题，view增加了一个新的描述来指明内容显示的形状，这就是 轮廓
"ui";
importClass(android.view.ViewOutlineProvider);
ui.layout(<vertical><imgandroid:id="@+id/image"android:layout_width="110dp"android:layout_height="110dp"android:padding="0dp"margin="20dp"app:strokeColor="#ff0000"android:src="file://./yashu.png"/></vertical>
);
let img = $images.read("./yashu.png");
imgView = ui.image;
ui.post(function () {viewOutlineProvider = new ViewOutlineProvider({getOutline: function (view, outline) {outline.setRoundRect(0, 0, imgView.width, imgView.height, imgView.width / 2);},});imgView.setOutlineProvider(viewOutlineProvider);imgView.setClipToOutline(true);
});events.on("exit", function () {img.recycle();
});
第3种: 使用card控件
将cardCornerRadius设置为控件宽度的一半即可
ui.layout(<vertical margin="100"><card android:layout_width="100dp" android:layout_height="100dp" cardCornerRadius="50dp"><imgandroid:id="@+id/image"android:layout_width="100dp"android:layout_height="100dp"android:padding="0dp"app:strokeColor="#ff0000"android:src="file://./yashu.png"/></card></vertical>
);
第4种: 设置img控件的cornerRadius属性
和控件宽度一致即可, 注意控件的单位尺寸, 不带单位默认dp, dp和px可以互相转换
ui.layout(<vertical margin="100"><img id="image" src="file://./yashu.png" w="100" h="100" radius="30" scaleType="centerCrop" /></vertical>
);
imageView = ui.image;const scale = context.getResources().getDisplayMetrics().density;
const dp2px = (dp) => Math.floor(dp * scale + 0.5);ui.post(function () {imageView.attr("cornerRadius", dp2px(100)); //没反应imageView.invalidate();
});
第5种: 绘制控件时, 将显示区域裁剪为一个圆形,
使用setBackgroundDrawable给控件设置背景, 在draw事件发生时, 裁剪画板为圆形即可,
重写draw方法, 是自定义控件中最重要的内容之一.
ui.layout(<vertical margin="100"><View id="image" w="100" h="100" /></vertical>
);
imageView = ui.image;
let img = $images.read("./yashu.png");
bitmap = img.getBitmap();
const scale = context.getResources().getDisplayMetrics().density;
const dp2px = (dp) => Math.floor(dp * scale + 0.5);ui.post(function () {var drawable = new android.graphics.drawable.Drawable({draw: function (canvas) {let paint = new Paint();var path = new Path();path.addCircle(imageView.getWidth() / 2, imageView.getHeight() / 2, imageView.getWidth() / 2, Path.Direction.CCW);canvas.clipPath(path);dst = new Rect(0, 0, imageView.getWidth(), imageView.getHeight()); //截取图片左上1/4的区域canvas.drawBitmap(bitmap, null, dst, paint);},});imageView.setBackgroundDrawable(drawable);
});
第6种: 使用BitmapShader
将图片添加到shader, 再给画笔设置shader, 画笔在画板上画一个圆形即可
"ui";
importClass(android.graphics.Rect);
importClass(android.graphics.PorterDuffXfermode);
importClass(android.graphics.Path);
importClass(android.graphics.Xfermode);
importClass(android.graphics.Paint);
importClass(android.graphics.Bitmap);
importClass(android.graphics.BitmapShader);
importClass(android.graphics.Shader);
importClass(android.graphics.Matrix);
importClass(android.graphics.PorterDuff);
ui.layout(<vertical margin="100"><View id="image" w="100" h="100" /></vertical>
);
imageView = ui.image;
let img = $images.read("./yashu.png");
bitmap = img.getBitmap();
const scale = context.getResources().getDisplayMetrics().density;
const dp2px = (dp) => Math.floor(dp * scale + 0.5);ui.post(function () {var drawable = new android.graphics.drawable.Drawable({draw: function (canvas) {let paint = new Paint();radius = imageView.getWidth() / 2;bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);mScale = (radius * 2.0) / Math.min(bitmap.getHeight(), bitmap.getWidth());matrix = new Matrix();matrix.setScale(mScale, mScale);bitmapShader.setLocalMatrix(matrix);paint.setShader(bitmapShader);canvas.drawCircle(radius, radius, radius, paint);},});imageView.setBackgroundDrawable(drawable);
});
events.on("exit", function () {img.recycle();
});
第7种: 使用PorterDuffXfermode
实例化canvas时, 加入空图片作为实例参数,
然后绘制圆形, 再设置图层叠加模式为SRC_IN,
再绘制图片, 然后把canvas的画板内容保存为图片,
将该图片设置到img控件即可
"ui";
importClass(android.graphics.Rect);
importClass(android.graphics.RectF);
importClass(android.graphics.PorterDuffXfermode);
importClass(android.graphics.Path);
importClass(android.graphics.Xfermode);
importClass(android.graphics.Paint);
importClass(android.graphics.Bitmap);
importClass(android.graphics.PorterDuff);
ui.layout(<vertical margin="100"><img id="image" w="100" h="100" /></vertical>
);
imageView = ui.image;
let img = $images.read("./yashu.png");
bitmap = img.getBitmap();
const scale = context.getResources().getDisplayMetrics().density;
const dp2px = (dp) => Math.floor(dp * scale + 0.5);
let newImg;
ui.post(function () {let paint = new Paint();let mBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);let canvas = new Canvas(mBitmap);let rect = new Rect(0, 0, img.getWidth(), img.getWidth());let rectF = new RectF(rect);let ratio = 2;canvas.drawRoundRect(rectF, img.getWidth() / ratio, img.getWidth() / ratio, paint);paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));let dst = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()); //截取图片左上1/4的区域canvas.drawBitmap(bitmap, null, dst, paint);newImg = canvas.toImage();imageView.setImageBitmap(newImg.bitmap);
});events.on("exit", function () {img.recycle();newImg && newImg.recycle();
});
名人名言
思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问
— 牙叔教程
声明
部分内容来自网络
本教程仅用于学习, 禁止用于其他用途
bilibili
牙叔教程
微信公众号 牙叔教程
QQ群
747748653
圆形头像的7种显示方法相关推荐
- Flutter实现圆形头像的几种方法
Flutter的ClipRect的使用场景 ClipRect可以用来裁剪容器内部的子元素,以避免超出容器的范围而溢出.常见的应用场景有: 将一个图像裁剪成不同形状,如圆形.方形.椭圆等: 将一个复杂的 ...
- Android 圆形头像的两种实现方式
Android 圆形头像的两种实现方式 前言 这篇博客只是为了做一个记录而已,方便而后查询,核心代码都是直接采用鸿洋博客里面的代码的. 圆形头像在实际开发中实际很常见,一般来说,主要有两种实现方式: ...
- WordPress制作圆形头像友情链接页面的方法
网上看见过很多种友情链接页面,我比较喜欢的是圆形头像的这种,先看看效果吧:传送门 就是这种上面是圆形的友链用户头像,下面是友链用户网站名,然后鼠标移上去头像会旋转,怎么实现这种效果呢?我在网上找了很多 ...
- android开启照相功能,Android打开系统相机并拍照的2种显示方法
本文实例为大家分享了Android打开系统相机并拍照的具体实现代码,供大家参考,具体内容如下 目标效果: 第二张为点击第一个按钮拍照后显示的,比较模糊,第三章为点击第二个按钮拍照后显示的,比较清楚. ...
- Android imageview 圆形头像
工作中经常用到圆形头像 有两种解决方法 1.处理bitmap /*** * 头像切成圆形显示* **/ public Bitmap toRoundBitmap(Bitmap bitmap) {//圆形 ...
- android 清空canvas部分内容_Android自定义View实现圆形头像效果
在我们的APP中通常会遇到,展示圆形头像的需求,一般通过Glide就能实现,但是让我们做一个圆形头像,如果让我们自定义实现这种效果,该怎样做呢? 好,接下来本文通过三种方式来实现这种效果! 注意:这是 ...
- Andorid显示圆形图片的4种方式
这篇博客主要讲解了Android实现圆形图片的4种方式. Android中并没有一个原生的控件,可以显示圆形或圆角图片,因此需要我们自己去定义这样一个控件. 实现圆形/圆角图片的核心思想,就是按照一定 ...
- Flutter的圆形头像四种简单用法
文章目录 一.ClipOval 二.CircleAvatar 三.ClipRRect 四.Container+BoxDecoration 一.ClipOval 该方式属于绘图功能,只能简单的显示圆形头 ...
- android 头像简称,Android环信显示头像及昵称的简单方法
在我们日常应用开发中,很多时候产品需要IM聊天功能.考虑到时间.难度等问题一般会选择集成一些比较稳定的第三方SDK来实现功能.最近的项目也有IM需求,因为之前用过环信,感觉还不错,所以就再次使用了环信 ...
最新文章
- IDEA 常用设置
- 32位汇编寄存器及汇编指令
- python中的@符号的作用
- C++和 C 的区别
- springboot入门（项目）
- c++ 检查缓冲大小与记录大小是否匹配_后端程序员不得不会的 Nginx 转发匹配规则...
- 如何通过 PL/SQL Developer 将 Excel 数据导入 Oracle 对应的表中
- oracle备份和还原
- leetcode183. 从不订购的客户（SQL）
- 任意占空比的方波程序
- 大学英语综合教程一 Unit 3 课文内容英译中 中英翻译
- 成都以前的计算机学校图片,成都计算机中职图片介绍
- java swing高仿qq聊天_GitHub - sxei/myqq: Java版SWing“高”仿QQ即时通聊天系统
- 使用R，ggplot2绘制NMDS图
- chrome浏览器无法登录印象笔记
- ecshop 模版写php,ecshop 模板直接使用运算符
- c语言y为奇数的关系表达,设y是int型，请写出y为奇数的关系表达式
- HTML圣诞树代码(动态音效)(我非原创作者，原作者是复旦大学的学长，如有侵权请联系）
- 三年前端开发面试经验加感悟(干货分享)
- 时之扉手游如何在电脑上玩 时之扉手游模拟器教程