目前在應用開發(fā)中证舟,矩形的頭像基本沒有了,大多是圓形或圓角矩形窗骑,本文簡簡單單輕輕松松幫你搞定圓形或圓角矩形的頭像女责。
可以自定義控件實現(xiàn),而本文使用的是第三方開源控件RoundedImageView创译,改控件支持圓形抵知、橢圓、圓角矩形等软族,使用非常方便刷喜。
添加RoundedImageView依賴
使用RoundedImageView有兩種操作方法,實質(zhì)都是添加庫依賴立砸。
方法一: 在Android Studio中掖疮,可進入模塊設置中添加庫依賴。 進入Module結(jié)構(gòu)設置添加庫依賴(如下圖)
方法二: 在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: 邊框?qū)挾?br>
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" />