Android開發圓形頭像

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

可以自定義控件實現,而本文使用的是第三方開源控件RoundedImageView,改控件支持圓形、橢圓、圓角矩形等,使用非常方便。
添加RoundedImageView依賴
使用RoundedImageView有兩種操作方法,實質都是添加庫依賴。
方法一: 在Android Studio中,可進入模塊設置中添加庫依賴。 進入Module結構設置添加庫依賴(如下圖)

Paste_Image.png
輸入RoundedImageView然后搜索添加。
Paste_Image.png

方法二: 在Moudle的build.gradle中添加如下代碼,添加完之后在Build中進行下Make Module操作(編譯下Module),使自己添加的依賴生效。

repositories {
    mavenCentral()
}

dependencies {
    compile 'com.makeramen:roundedimageview:2.2.1'
}```
Layout中使用

添加了庫依賴之后,我們就可以使用該控件了。

先看看效果: 
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/5423625-78097e0d0a20d26a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
這里我設置的是圓形:

<com.makeramen.roundedimageview.RoundedImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/zr"
app:riv_oval="true" />```

控件屬性:
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" />
Paste_Image.png
Paste_Image.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容