AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

圆形头像的7种显示方法

2022-06-27 227
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 牙叔教程 简单易懂

牙叔教程 简单易懂


效果展示



环境

手机: 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.ShapeableImageView
      android: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>
    <img
      android: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">
      <img
        android: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文档, 最后才是群里问问
--- 牙叔教程


声明


部分内容来自网络
本教程仅用于学习, 禁止用于其他用途


文章标签：
前端开发
Android开发
小凡晓宇
目录
相关文章
郏国上
|
3月前
|
定位技术 iOS开发
在地图页面，自动布局控件开始是隐藏或在屏幕外需要正常显示时再为正常的显示状态的，需要在显示之前加入
在地图页面，自动布局控件开始是隐藏或在屏幕外需要正常显示时再为正常的显示状态的，需要在显示之前加入
郏国上
34 0
时义龙
|
8月前
qrc-标签和按钮、调色板加载图片
qrc-标签和按钮、调色板加载图片
时义龙
41 0
andyahui
|
定位技术
百度地图开发-绘制点线提示框 07
百度地图开发-绘制点线提示框 07
andyahui
193 0
百度地图开发-绘制点线提示框 07
anny_4243
SwiftUI—如何以动画的方式显示或隐藏指定的位图
SwiftUI—如何以动画的方式显示或隐藏指定的位图
anny_4243
309 0
SwiftUI—如何以动画的方式显示或隐藏指定的位图
redrain.
|
C++
duilib corner属性的贴图技巧——让图片自动贴到控件的的某一边或者一角并自适应控件的大小
转载请说明原出处，谢谢~~          Duilib给控件贴图功能可以附带多个属性，各个属性的配合可以达到许多效果。以下是duilib支持的所有贴图属性： 贴图描述：          Duilib的表现力丰富很大程度上得益于贴图描述的简单强大。
redrain.
1757 0
韩曙亮
|
API Android开发
【Android 内存优化】自定义组件长图组件 ( 长图滚动区域解码 | 手势识别 GestureDetector | 滑动计算类 Scroller | 代码示例 )
【Android 内存优化】自定义组件长图组件 ( 长图滚动区域解码 | 手势识别 GestureDetector | 滑动计算类 Scroller | 代码示例 )
韩曙亮
144 0
【Android 内存优化】自定义组件长图组件 ( 长图滚动区域解码 | 手势识别 GestureDetector | 滑动计算类 Scroller | 代码示例 )
莫非有道
|
Android开发 索引
Android图片控件，跟随列表(recyclerView)的上下滚动而同步平移。
莫非有道
10170 0
技术小胖子
|
索引
ListBox自绘，列表显示一系列图片
技术小胖子
1131 0
余二五
|
iOS开发 开发工具
iphone开发之自定义UIControl对象的视图 UISwitch的字体和颜色
余二五
1167 0
ihtcboy
|
Web App开发 iOS开发 API
教你如何强制显示一个竖屏的不能侧滑返回的SFSafariViewController
强制让控制器竖屏显示 - (BOOL)shouldAutorotate { return NO; } - (UIInterfaceOrientationMask)supportedInterfaceOrientations { ret...
ihtcboy
1326 0