前言

圆形头像的制作方法有很多种，除了去导入别人写好的库，总的来说都很麻烦。特此，有了以下快速制作头像的方法，使用shape绘画，然后覆盖，达到圆形的视觉效果。超级简单易学。还可以制作成其他形状的图片哦~
话不多说，教学开始……

一、实现原理

打个比方，我们有两张纸片一张黑色正方形纸片，一张白色圆形纸片（大小为正方形外圆大小完全覆盖正方形纸片）。我们在白色纸片上裁剪出一个圆（黑色正方形纸片内圆的大小），然后白色圆形纸片就变成了类似救生圈的圆圈。然后我们将白色圆圈纸片完全覆盖黑色正方形纸片，中间就形成了一个黑色的圆（正方形内圆），多出来的四个边角会被覆盖。这样一个圆形就出来了，其他形状也是同理。

二、具体实现

1.绘画圆圈框架

在res资源目录的drawable下新建文件xml文件，在新建的时候，在根元素这个选项里输入s会弹出提示，选择shape然后填入文件名即可。
文件建好之后我们开始写带边框的圆形。我们只需要添加两个属性即可，一个是圆角属性，一个是描边属性。圆角属性要写的非常非常大，它默认的形状是长方形（长得高）所以加圆角会变成椭圆，我们把圆角它放到正方形里去他就是一个圆了。这样才能变成圆形。描边属性必须要有颜色和描边宽度。这里的颜色取决于你圆形图片所处位置的背景颜色。然后就是宽度，这个宽度是有限制的不能大于50dp,否则中间的圆就会被覆盖掉。为了省去一大堆麻烦就和我保持一致填25dp(或者可以自行研究体会)。

代码如下（示例）：

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><!--添加圆角度数--><corners android:radius="999999dp"/><!--添加白色边框--><stroke android:color="@color/white" android:width="25dp"/></shape>

效果展示:

2.实战体会

开始表演……

我们需要两个图片控件ImageView，以下图为例ImageView01是最上面一层的控件，而ImageView02是第二层的控件，处于底层（不是最底层哦~最底层是父控件，也就是这整个布局）。然后将两个控件叠在一起，小的一定要中心对齐大的控件，无论你采用的是什么布局方式，都要中心对齐。
温馨提示：无论是手拖ImageView，还是手写ImageView，第一个写（拖）的处于下层，依次向上叠加。在xml中就是，上面的代码控件处于下层，下面的处于上层。懂我意思吧 0-0
这里要注意控件的宽高不是随便设置的（出了问题我不负责）。我们在之前设置上层圆形框架的时候（此时ImageView01的背景background）将描边宽度设置为25dp，重点来了，这25dp实际上就是ImageView02到ImageView01的距离。由此得公式：

ImageView01的高= ImageView02的高+25dp+25dp
ImageView01的宽 = ImageView02的高+25dp+25dp

示例图：

以上我们基本完成了圆形头像的基本设置，我们将写好的圆形框架设置到ImageView01的background属性上，将正放心图片赋予ImageView02,就完成了。相信至此已经学会了快速制作圆形上，要是还不会，上源码直接粘吧……0.0……

代码如下（示例）：

 <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:id="@+id/imageView13"android:layout_width="100dp"android:layout_height="100dp"app:layout_constraintBottom_toBottomOf="@+id/imageView14"app:layout_constraintEnd_toEndOf="@+id/imageView14"app:layout_constraintStart_toStartOf="@+id/imageView14"app:layout_constraintTop_toTopOf="@+id/imageView14"tools:srcCompat="@tools:sample/avatars" /><ImageViewandroid:id="@+id/imageView14"android:layout_width="150dp"android:layout_height="150dp"android:background="@drawable/back"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"tools:srcCompat="@tools:sample/avatars" /></androidx.constraintlayout.widget.ConstraintLayout>

三、总结

全剧终……

Android实战开发--制作圆形头像（简易篇）相关推荐

Android实战开发-Kotlin教程（入门篇-RecyclerView数据列表的实现）
在移动应用开发中,很多时候我们需要去展示数据记录,如电商应用中的商品列表.订单列表等等一系列的数据记录的展示时,我们需要用到Android的列表组件展示这些数据,列表组件应该是我们遇到到比较常见也是必 ...
Android实战开发-Kotlin教程（布局篇 3.1）
上一篇我们对Android常用的组件已经有了一个初步的了解,本篇我们开始了解Android常用的布局方式什么是布局?怎么去理解布局了?简单的来说,布局就是一种约束,比如你把一堆的东西放到地上,他就是 ...
Android实战开发-Kotlin教程（组件篇 2.3）
上一篇我们对TextView的使用以及相关属性有了一定的了解,本篇我们开始了解Button和EditText.ImageView的使用 Button Button是UI中的一个小部件,主要用于交互中用 ...
Android实战开发-Kotlin教程（语法篇 1.2）
上一篇我们介绍了Kotlin语法的一些基础用法,本章我们来学习一下Kotin的语法知识 if表达式 if表达式在开发过程中最常见的判断表达式 if后面的括号代表判断的条件表达式,如条件表达式的结果为t ...
Android开发之制作圆形头像自定义View,直接引用工具类，加快开发速度。带有源代码学习
作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 博客园主页:http://www.cnblogs.com/mcxiaobing ...
Android开发之制作圆形头像自定义View,直接引用工具类，加快开发速度。带有源代码学习...
作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 博客园主页:http://www.cnblogs.com/mcxiaobing ...
Android实战开发——引导页面（ViewPager）篇
Android实战开发之引导页面文章目录 Android实战开发之引导页面前言一.概述二.操作步骤 1.操作准备 2.初始化 3.适配器设置 3.圆点的滑动事件三.总结前言本篇文章主要介 ...
Android UI开发第三十九篇——Tab界面实现汇总及比较
Tab布局是iOS的经典布局,Android应用中也有大量应用,前面也写过Android中TAb的实现,<Android UI开发第十八篇--ActivityGroup实现tab功能>.这 ...
Android自定义View之圆形头像
记录贴现在制作圆形头像的第三方工具已经很多了,本帖只为记录自定义view学习过程. 1.主体代码部分 public class CirclePhotoView extends View {priva ...
html img 圆头像_html圆形头像简易实现
html圆形头像简易实现 html圆形头像简易实现 html圆形头像简易实现效果如下代码如下原型头像样式实现 * { padding: 0px; margin: 0px; } html,body ...

Android实战开发--制作圆形头像（简易篇）

文章目录

前言