在Android Studio中添加RoundedImageView控件

谁践踏了优雅 2022-06-15 02:14 365阅读 0赞

> 转载请注明来源： [http://blog.csdn.net/kjunchen/article/details/50573326][http_blog.csdn.net_kjunchen_article_details_50573326]

# 分分钟带你搞定Android开发圆形头像 #

目前在应用开发中，矩形的头像基本没有了，大多是圆形或圆角矩形，本文简简单单轻轻松松帮你搞定圆形或圆角矩形的头像。

可以自定义控件实现，而本文使用的是第三方开源控件RoundedImageView，改控件支持圆形、椭圆、圆角矩形等，使用非常方便。

--------------------

## 添加RoundedImageView依赖 ##

使用RoundedImageView有两种操作方法，实质都是添加库依赖。

方法一： 在[Android][] Studio中，可进入模块设置中添加库依赖。  
进入Module结构设置添加库依赖（如下图）  
![1.png][]

输入RoundedImageView然后搜索添加。  
![2.png][]

方法二： 在Moudle的build.gradle中添加如下代码，添加完之后在Build中进行下Make Module操作（编译下Module），使自己添加的依赖生效。

repositories {
        mavenCentral()
    }
    
    dependencies {
        compile 'com.makeramen:roundedimageview:2.2.1'
    }
     
      
       1 
       2 
       3 
       4 
       5 
       6 
       7 
      
     
      
       1 
       2 
       3 
       4 
       5 
       6 
       7

--------------------

## Layout中使用 ##

添加了库依赖之后，我们就可以使用该控件了。

先看看效果：  
![screenshot1.png][]

![screenshot2.png][]

控件属性：  
riv\_border\_width： 边框宽度  
riv\_border\_color： 边框颜色  
riv\_oval： 是否圆形  
riv\_corner\_radius： 圆角弧度  
riv\_corner\_radius\_top\_left：左上角弧度  
riv\_corner\_radius\_top\_right： 右上角弧度  
riv\_corner\_radius\_bottom\_left：左下角弧度  
riv\_corner\_radius\_bottom\_right：右下角弧度

<com.makeramen.roundedimageview.RoundedImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:src="@mipmap/avatar"
              app:riv_border_color="#333333"
              app:riv_border_width="2dp"
              app:riv_oval="true" />
    
        <com.makeramen.roundedimageview.RoundedImageView
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:scaleType="fitCenter"
              android:src="@mipmap/avatar"
              app:riv_border_color="#333333"
              app:riv_border_width="2dp"
              app:riv_corner_radius="10dp"
              app:riv_mutate_background="true"
              app:riv_oval="false"
              app:riv_tile_mode="repeat" />
    
        <com.makeramen.roundedimageview.RoundedImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:scaleType="fitCenter"
              android:src="@mipmap/avatar"
              app:riv_border_color="#333333"
              app:riv_border_width="2dp"
              app:riv_corner_radius_top_left="25dp"
              app:riv_corner_radius_bottom_right="25dp"
              app:riv_mutate_background="true"
              app:riv_oval="false"
              app:riv_tile_mode="repeat" />
    
       <com.makeramen.roundedimageview.RoundedImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:scaleType="fitCenter"
              android:src="@mipmap/avatar"
              app:riv_border_color="#333333"
              app:riv_border_width="2dp"
              app:riv_corner_radius_top_right="25dp"
              app:riv_corner_radius_bottom_left="25dp"
              app:riv_mutate_background="true"
              app:riv_oval="false"
              app:riv_tile_mode="repeat" />
    
       <com.makeramen.roundedimageview.RoundedImageView
              android:layout_width="96dp"
              android:layout_height="72dp"
              android:scaleType="center"
              android:src="@mipmap/avatar"
              app:riv_border_color="#333333"
              app:riv_border_width="2dp"
              app:riv_corner_radius="25dp"
              app:riv_mutate_background="true"
              app:riv_oval="true"
              app:riv_tile_mode="repeat" />

[http_blog.csdn.net_kjunchen_article_details_50573326]: http://blog.csdn.net/kjunchen/article/details/50573326
[Android]: http://lib.csdn.net/base/android
[1.png]: https://raw.githubusercontent.com/junkchen/Documents/master/Android/RoundImageViewDemo/1.png
[2.png]: https://raw.githubusercontent.com/junkchen/Documents/master/Android/RoundImageViewDemo/2.png
[screenshot1.png]: https://raw.githubusercontent.com/junkchen/Documents/master/Android/RoundImageViewDemo/screenshot1.png
[screenshot2.png]: https://raw.githubusercontent.com/junkchen/Documents/master/Android/RoundImageViewDemo/screenshot2.png