一、项目概述
在项目中美工提供给我们的图片通常是矩形的，我们如何把矩形的图片做成圆角矩形、椭圆形以其圆形效果的图形显示效果，这就是我这篇文章要讲的内容。
效果如下：
我这里使用的是开源项目 RoundedImageView
github上面的开源项目 官方地址为:/vinc3m1/RoundedImageView
二、搭建RoundedImageView的使用环境
下载后，我们得到RoundedImageView文件夹。
将RoundedImageView\roundedimageview\src\main\java\com\makeramen下的三个java文件复制到自己项目中。这是会出现一些错误。
1、直接复制java文件导致包引入的错误，这个只需要修改导入的包名即可。
2、RoundedImageView依赖于picasso-2.3.4.jar，这个需要下载放在制剂项目的libs目录下。下载地址为点击打开链接
3、缺少attrs.xml文件，将\RoundedImageView\roundedimageview\src\main\res\values\attrs.xml复制到自己项目的values目录下。
按照要求排版后，项目结构大致如下：
注意必要文件是 libs下面的picasso.jar , values下面的attrs.xml 、和view包下面的三个java文件（RoundedDrawable,RoundedImageView和RoundedTransformationBuilder）
三、使用RoundedImageView
这里主要是要注意它的几个自定义属性的作用 。
<?xml version="1.0" encoding="utf-8"?><resources><!-- 圆角矩形 椭圆的自定义属性corner_radius : 边角弧度。这个值越大，圆角越明显border_width : 边框宽度border_color : 边框颜色mutate_background : 背景是否变化(这里在demo中改变不明显)oval: 是否以椭圆形式显示 true为以椭圆形式显示 flase以矩形形式显示--><declare-styleable name="RoundedImageView"><attr name="corner_radius" format="dimension" /><attr name="border_width" format="dimension" /><attr name="border_color" format="color" /><attr name="mutate_background" format="boolean" /><attr name="oval" format="boolean" /><attr name="android:scaleType" /></declare-styleable></resources>
本项目的layout.xml为
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/grey"android:orientation="vertical" ><ScrollView android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical" ><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:background="@color/light" ><edu.njupt.javer.view.RoundedImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:padding="10dip"android:scaleType="center"android:src="@drawable/mm1"app:border_color="@color/dark"app:border_width="3dip"app:corner_radius="30dip"app:mutate_background="true"app:oval="false" /></RelativeLayout><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:background="@color/dark" ><edu.njupt.javer.view.RoundedImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:padding="10dip"android:scaleType="center"android:src="@drawable/mm2"app:border_color="@color/light"app:border_width="3dip"app:corner_radius="30dip"app:mutate_background="true"app:oval="true" /></RelativeLayout><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:background="@color/light" ><edu.njupt.javer.view.RoundedImageViewandroid:layout_width="160dp"android:layout_height="160dp"android:layout_centerInParent="true"android:padding="10dip"android:scaleType="center"android:src="@drawable/mm3"app:border_color="@color/dark"app:border_width="3dip"app:corner_radius="30dip"app:mutate_background="true"app:oval="true" /></RelativeLayout></LinearLayout></ScrollView></LinearLayout>
四、项目下载地址：
点击打开链接
五、补充
除了在xml中设置属性外，RoundedImageView也可以在代码中设置属性。
Define in xml:
<com.makeramen.RoundedImageViewxmlns:app="/apk/res-auto"android:id="@+id/imageView1"android:src="@drawable/photo1"android:scaleType="centerCrop"app:corner_radius="30dip"app:border_width="2dip"app:border_color="#333333"app:mutate_background="true"app:oval="true" />
Or in code:
RoundedImageView iv = new RoundedImageView(context);iv.setScaleType(ScaleType.CENTER_CROP);iv.setCornerRadius(10);iv.setBorderWidth(2);iv.setBorderColor(Color.DKGRAY);iv.setMutateBackground(true);iv.setImageDrawable(drawable);iv.setBackground(backgroundDrawable);iv.setOval(true);
Or make a Transformation for Picasso:
Transformation transformation = new RoundedTransformationBuilder().borderColor(Color.BLACK).borderWidthDp(3).cornerRadiusDp(30).oval(false).build();Picasso.with(context).load(url).fit().transform(transformation).into(imageView);
