搞定Android开发圆形头像

最新推荐文章于 2024-09-29 09:48:44 发布

原创最新推荐文章于 2024-09-29 09:48:44 发布 · 700 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

功能

本文介绍了如何使用RoundedImageView控件来实现圆形、椭圆及不同圆角效果的图片展示。通过设置不同属性，可以轻松调整边框宽度、颜色以及圆角弧度等。

前言

目前市面上的应用基本都是圆形头像，不再使用矩形头像，目前常见的实现方式有两种，一种是自定义控件(对我们的要求比较高),另一种是使用三方开源控件，本博客就采用市面上比较流行的RoundedImageView。

使用

首先添加依赖:
在Moudle的build.gradle中添加如下代码:

repositories {
    mavenCentral()
}

上述代码和dependencies属于同一级。

这里写图片描述

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：右下角弧度

布局文件使用代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical"
    tools:context="com.cc.csdndemo.MainActivity">

    <!-- 圆形头像-->
    <com.makeramen.roundedimageview.RoundedImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:src="@drawable/user"
        app:riv_border_color="#ffffff"
        app:riv_border_width="2dp"
        app:riv_oval="true"/>

    <!-- 圆角矩形-->
    <com.makeramen.roundedimageview.RoundedImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:src="@drawable/user"
        app:riv_border_width="2dp"
        app:riv_corner_radius="10dp"
        app:riv_oval="false"/>

    <com.makeramen.roundedimageview.RoundedImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:src="@drawable/user"
        app:riv_border_width="2dp"
        app:riv_corner_radius_bottom_right="25dp"
        app:riv_corner_radius_top_left="25dp"
        app:riv_mutate_background="true"
        app:riv_oval="false"/>

    <com.makeramen.roundedimageview.RoundedImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:scaleType="fitCenter"
        android:src="@drawable/user"
        app:riv_border_width="2dp"
        app:riv_corner_radius_bottom_left="25dp"
        app:riv_corner_radius_top_right="25dp"
        app:riv_mutate_background="true"
        app:riv_oval="false"/>

    <!--椭圆-->
    <!-- FIT_XY / fitXY  把图片不按比例扩大/缩小到View的大小显示-->
    <com.makeramen.roundedimageview.RoundedImageView
        android:layout_width="96dp"
        android:layout_height="72dp"
        android:layout_gravity="center"
        android:scaleType="fitXY"
        android:src="@drawable/user"
        app:riv_border_width="2dp"
        app:riv_corner_radius="25dp"
        app:riv_mutate_background="true"
        app:riv_oval="true"/>

</LinearLayout>