android开源项目---RoundedImageView制作圆角矩形，椭圆形以其圆形控件

一、项目概述

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

效果如下：

我这里使用的是开源项目  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>
5. <declare-styleable name="RoundedImageView">
6. <attr name="corner_radius" format="dimension" />
7. <attr name="border_width" format="dimension" />
8. <attr name="border_color" format="color" />
9. <attr name="mutate_background" format="boolean" />
10. <attr name="oval" format="boolean" />
11. <attr name="android:scaleType" />
12. declare-styleable>
14. 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:

1. <com.makeramen.RoundedImageView
2. xmlns:app= "http://schemas.android.com/apk/res-auto"
3. android:id= "@+id/imageView1"
4. android:src= "@drawable/photo1"
5. android:scaleType= "centerCrop"
6. app:corner_radius= "30dip"
7. app:border_width= "2dip"
8. app:border_color= "#333333"
9. app:mutate_background= "true"
10. app:oval= "true" />

Or in code:

1. RoundedImageView iv = new RoundedImageView(context);
2. iv.setScaleType(ScaleType.CENTER_CROP);
3. iv.setCornerRadius( 10);
4. iv.setBorderWidth( 2);
5. iv.setBorderColor(Color.DKGRAY);
6. iv.setMutateBackground( true);
7. iv.setImageDrawable(drawable);
8. iv.setBackground(backgroundDrawable);
9. iv.setOval( true);

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);

文章标签： 开源项目 android RoundedImageView 圆角矩形 椭圆形