分分鐘帶你搞定Android開發圓形頭像

目前在應用開發中，矩形的頭像基本沒有了，大多是圓形或圓角矩形，本文簡簡單單輕輕鬆鬆幫你搞定圓形或圓角矩形的頭像。

可以自定義控制元件實現，而本文使用的是第三方開源控制元件RoundedImageView，改控制元件支援圓形、橢圓、圓角矩形等，使用非常方便。

新增RoundedImageView依賴

使用RoundedImageView有兩種操作方法，實質都是新增庫依賴。

方法一： 在Android Studio中，可進入模組設定中新增庫依賴。 
進入Module結構設定新增庫依賴（如下圖） 

輸入RoundedImageView然後搜尋新增。 

方法二： 在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中使用

添加了庫依賴之後，我們就可以使用該控制元件了。

先看看效果： 

控制元件屬性： 
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" />