圆形头像的7种显示方法

JavaScript016

圆形头像的7种显示方法,第1张

牙叔教程 简单易懂

手机: Mi 11 Pro

Android版本: 11

Autojs版本: 9.0.11

图片形状: 正方形

备注: material版本最低要求1.2.0, 因为ShapeableImageView控件是在1.2.0才添加的

默认情况下，所有的view都是矩形的，虽然可以给view设置背景圆形的图片，即可以在界面显示出圆形的内容，但是view的大小实际上依然是矩形，并且设置的图片实际上也是矩形的，只是圆形以外的区域是透明色。

如果根据view大小来生成对应的阴影，就会出现很奇怪的效果，（一个看起来圆形的view展示出的却是一个矩形的阴影）为了解决这个问题，view增加了一个新的描述来指明内容显示的形状，这就是 轮廓

将cardCornerRadius设置为控件宽度的一半即可

和控件宽度一致即可, 注意控件的单位尺寸, 不带单位默认dp, dp和px可以互相转换

使用setBackgroundDrawable给控件设置背景, 在draw事件发生时, 裁剪画板为圆形即可,

重写draw方法, 是自定义控件中最重要的内容之一.

将图片添加到shader, 再给画笔设置shader, 画笔在画板上画一个圆形即可

实例化canvas时, 加入空图片作为实例参数,

然后绘制圆形, 再设置图层叠加模式为SRC_IN,

再绘制图片, 然后把canvas的画板内容保存为图片,

将该图片设置到img控件即可

思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问

--- 牙叔教程

部分内容来自网络

本教程仅用于学习, 禁止用于其他用途

在之前的笔记中，讲了如何实现圆形头像，这里接着上一次的笔记，讲一下怎么修改头像（通过图库和拍照方式）。

重点：

流程： 一般在APP中，修改头像是最基本的功能之一了。一般是两种方式的修改：从相册选择图片或者拍照。那么这里就来讲一下如何具体实现这个功能。

Step1：点击头像 ->手势（UITapGestureRecognizer）

首先，点击头像。因为头像是直接放在ImageView中的，默认情况下当我们点击头像的时候，头像是不会有任何反应的。因此，我们需要给头像的ImageView添加一个点击事件，方法如下：

Step2：弹出选择提示->提示框（UIAlertController）

通过添加UITapGestureRecognizer（手势），系统就知道了我点击了头像，接着，就可以添加具体的方法来进行操作了。在上一步，我为这个手势的action，selector（选择）了一个方法来执行，即alterHeadPortrait：（注意有冒号的），也就是当我们点击了头像之后，会执行alterHeadPortrait：这个方法：

通过UIAlertController（提示框）这个类，我们创建好了一个提示框，如下：

现在，当我们点击取消（或者点击按钮以外的区域）提示框就会被自动取消掉，并将提示框收起来。

Step3：从相册选择或者拍照选择头像->UIImagePickerController

好了，绕了这么久，终于开始进入主题了，即选择图片或者拍照了。那么现在该肿么办呢？好像毫无头绪的样子。。。

这里就需要通过UIImagePickerController，通过它，我们就可以让我们的APP轻松的实现访问相册或者拍照：

操作UIImagePickerController，需要实现两个协议：

进行相册图片选择或者相机拍照的实现代码如下：

运行效果如图：

Step4：替换头像->大功告成！

现在，我们已经能够打开相册，或者拍照（拍照功能模拟机无法拍照，会报错，只有用真机测试）。

可是问题来了，现在选择了新图片，确定之后，头像还是原来的头像，并没有更新。这是因为我们这里还没有对图片选择完全之后的代理方法进行实现：

大功告成：