一、项目概述

在项目中美工提供给我们的图片通常是矩形的，我们如何把矩形的图片做成圆角矩形、椭圆形以其圆形效果的图形显示效果，这就是我这篇文章要讲的内容。

效果如下：

我这里使用的是开源项目  RoundedImageView

 github上面的开源项目 官方地址为:   https://github.com/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

这里主要是要注意它的几个自定义属性的作用 。

1. <?xml version="1.0" encoding="utf-8"?>
2. <resources>
4. <!-- 圆角矩形 椭圆的自定义属性
5. corner_radius : 边角弧度。这个值越大，圆角越明显
6. border_width : 边框宽度
7. border_color : 边框颜色
8. mutate_background : 背景是否变化(这里在demo中改变不明显)
9. oval : 是否以椭圆形式显示 true为以椭圆形式显示 flase以矩形形式显示
10. -->
11. <declare-styleable name="RoundedImageView">
12. <attr name="corner_radius" format="dimension" />
13. <attr name="border_width" format="dimension" />
14. <attr name="border_color" format="color" />
15. <attr name="mutate_background" format="boolean" />
16. <attr name="oval" format="boolean" />
17. <attr name="android:scaleType" />
18. </declare-styleable>
20. </resources>

本项目的layout.xml为

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:app= "http://schemas.android.com/apk/res-auto"
4. android:layout_width= "match_parent"
5. android:layout_height= "match_parent"
6. android:background= "@color/grey"
7. android:orientation= "vertical" >
10. <ScrollView
11. android:layout_width= "match_parent"
12. android:layout_height= "match_parent">
13. <LinearLayout
14. android:layout_width= "match_parent"
15. android:layout_height= "wrap_content"
16. android:orientation= "vertical" >
18. <RelativeLayout
19. android:layout_width= "match_parent"
20. android:layout_height= "0dp"
21. android:layout_weight= "1"
22. android:background= "@color/light" >
24. <edu.njupt.javer.view.RoundedImageView
25. android:layout_width= "wrap_content"
26. android:layout_height= "wrap_content"
27. android:layout_centerInParent= "true"
28. android:padding= "10dip"
29. android:scaleType= "center"
30. android:src= "@drawable/mm1"
31. app:border_color= "@color/dark"
32. app:border_width= "3dip"
33. app:corner_radius= "30dip"
34. app:mutate_background= "true"
35. app:oval= "false" />
36. </RelativeLayout>
38. <RelativeLayout
39. android:layout_width= "match_parent"
40. android:layout_height= "0dp"
41. android:layout_weight= "1"
42. android:background= "@color/dark" >
44. <edu.njupt.javer.view.RoundedImageView
45. android:layout_width= "wrap_content"
46. android:layout_height= "wrap_content"
47. android:layout_centerInParent= "true"
48. android:padding= "10dip"
49. android:scaleType= "center"
50. android:src= "@drawable/mm2"
51. app:border_color= "@color/light"
52. app:border_width= "3dip"
53. app:corner_radius= "30dip"
54. app:mutate_background= "true"
55. app:oval= "true" />
56. </RelativeLayout>
58. <RelativeLayout
59. android:layout_width= "match_parent"
60. android:layout_height= "0dp"
61. android:layout_weight= "1"
62. android:background= "@color/light" >
64. <edu.njupt.javer.view.RoundedImageView
65. android:layout_width= "160dp"
66. android:layout_height= "160dp"
67. android:layout_centerInParent= "true"
68. android:padding= "10dip"
69. android:scaleType= "center"
70. android:src= "@drawable/mm3"
71. app:border_color= "@color/dark"
72. app:border_width= "3dip"
73. app:corner_radius= "30dip"
74. app:mutate_background= "true"
75. app:oval= "true" />
76. </RelativeLayout>
77. </LinearLayout>
78. </ScrollView>
79. </LinearLayout>

点击打开链接

五、补充

除了在xml中设置属性外，RoundedImageView也可以在代码中设置属性。

Define in xml:

Or in code:

Or make a Transformation for Picasso:

1. Transformation transformation = new RoundedTransformationBuilder()
2. .borderColor(Color.BLACK)
3. .borderWidthDp( 3)
4. .cornerRadiusDp( 30)
5. .oval( false)
6. .build();
8. Picasso.with(context)
9. .load(url)
10. .fit()
11. .transform(transformation)
12. .into(imageView);