Android Studio中添加RoundedImageView控件的使用简介(消息右上角的数字提示)

一，简单介绍使用步骤：

这里讲的是一种带有类似QQ气泡的布局式样。

1.添加依赖：

implementation 'com.makeramen:roundedimageview:2.2.1'

当然，RoundedImageView这个控件的依赖包已经更新了：

compile 'com.makeramen:roundedimageview:2.3.0' 

别的写法先忽略，这里讲2.2.1的依赖，可能你还需要glide：

implementation 'com.github.bumptech.glide:glide:3.7.0'

布局：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/ll_receipt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center">

                <com.makeramen.roundedimageview.RoundedImageView xmlns:app="http://schemas.android.com/apk/res-auto"
                    android:id="@+id/riv_bigman_logo"
                    android:layout_width="42dp"
                    android:layout_height="42dp"
                    android:layout_gravity="center"
                    android:scaleType="fitCenter"
                    android:src="@mipmap/ic_launcher"
                    app:riv_border_color="#dddddd"
                    app:riv_mutate_background="true"
                    app:riv_oval="true" />

                <RelativeLayout
                    android:id="@+id/rlayout_im_red"
                    android:layout_width="12dp"
                    android:layout_height="12dp"
                    android:layout_marginLeft="38dp"
                    android:background="@drawable/bg_red_dot_corner">

                    <TextView
                        android:id="@+id/tv_im_red"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:text="5"
                        android:textColor="#ffffff"
                        android:textSize="8sp" />

                </RelativeLayout>
            </RelativeLayout>

            <TextView
                android:id="@+id/tv_receipt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="5dp"
                android:ellipsize="marquee"
                android:maxEms="3"
                android:maxLength="4"
                android:singleLine="true"
                android:text="影视记者者者"
                android:textColor="#555"
                android:textSize="13sp" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

bg_red_dot_corner背景色：

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">
    <solid android:color="#f33d3d" />

    <size
        android:width="4dp"
        android:height="4dp" />
</shape>

activity的简单使用：

public class MainActivity extends AppCompatActivity {

    private RoundedImageView riv_bigman_logo;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        riv_bigman_logo = findViewById(R.id.riv_bigman_logo);


        Glide.with(this).load("获取到的图片")
                .centerCrop().placeholder(R.mipmap.ic_launcher).dontAnimate().
                error(R.mipmap.ic_launcher).into(riv_bigman_logo);
    }
}

二，说一说具体的属性和用法：

1.各种圆角的形状你都可以设置出来：

控件属性： 
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" />