Android View加载圆形图片且同时绘制圆形图片的外部边缘边线及边框：LayerDrawable实现

Android View加载圆形图片且同时绘制圆形图片的外部边缘边线及边框：LayerDrawable实现

LayerDrawable实现的结果和附录文章1,2,3中的layer-list一致。我写个例子，这次使用LayerDrawable把附录文章4的功能再次实现走通一遍。
写一个布局，简单放一个正方形的View：

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="@android:color/darker_gray"  
6.     android:orientation="vertical">  
7.   
8.     <View  
9.         android:id="@+id/view"  
10.         android:layout_width="300dp"  
11.         android:layout_height="300dp"  
12.         android:layout_centerInParent="true" />  
13.   
14. </RelativeLayout>  

然后在上层写Java代码：

[java]  view plain  copy

1. package zhangphil.app;  
2.   
3. import android.graphics.BitmapFactory;  
4. import android.graphics.Color;  
5. import android.graphics.Paint;  
6. import android.graphics.drawable.Drawable;  
7. import android.graphics.drawable.LayerDrawable;  
8. import android.graphics.drawable.ShapeDrawable;  
9. import android.graphics.drawable.shapes.OvalShape;  
10. import android.support.v4.graphics.drawable.RoundedBitmapDrawable;  
11. import android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory;  
12. import android.support.v7.app.AppCompatActivity;  
13. import android.os.Bundle;  
14. import android.view.View;  
15.   
16. public class MainActivity extends AppCompatActivity {  
17.   
18.     @Override  
19.     protected void onCreate(Bundle savedInstanceState) {  
20.         super.onCreate(savedInstanceState);  
21.         setContentView(R.layout.activity_main);  
22.   
23.         int width = 50;  
24.   
25.         //最外部的白色环形边框  
26.         OvalShape ovalShape0 = new OvalShape();  
27.         ShapeDrawable drawable0 = new ShapeDrawable(ovalShape0);  
28.         drawable0.getPaint().setColor(Color.WHITE);  
29.         drawable0.getPaint().setStyle(Paint.Style.FILL);  
30.         drawable0.getPaint().setAntiAlias(true);  
31.         drawable0.getPaint().setStrokeWidth(width);  
32.   
33.         //黄色边框  
34.         OvalShape ovalShape1 = new OvalShape();  
35.         ShapeDrawable drawable1 = new ShapeDrawable(ovalShape1);  
36.         drawable1.getPaint().setColor(Color.YELLOW);  
37.         drawable1.getPaint().setStyle(Paint.Style.FILL);  
38.         drawable1.getPaint().setAntiAlias(true);  
39.         drawable1.getPaint().setStrokeWidth(width);  
40.   
41.         //红色边框  
42.         OvalShape ovalShape2 = new OvalShape();  
43.         ShapeDrawable drawable2 = new ShapeDrawable(ovalShape2);  
44.         drawable2.getPaint().setColor(Color.RED);  
45.         drawable2.getPaint().setStyle(Paint.Style.FILL);  
46.         drawable2.getPaint().setAntiAlias(true);  
47.         drawable2.getPaint().setStrokeWidth(width);  
48.   
49.         //最里面的图像  
50.         RoundedBitmapDrawable drawable3 = RoundedBitmapDrawableFactory.create(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.zhangphil));  
51.         drawable3.setCircular(true);  
52.         drawable3.setAntiAlias(true);  
53.   
54.         Drawable[] layers = new Drawable[4];  
55.         layers[0] = drawable0;  
56.         layers[1] = drawable1;  
57.         layers[2] = drawable2;  
58.         layers[3] = drawable3;  
59.   
60.         LayerDrawable layerDrawable = new LayerDrawable(layers);  
61.   
62.         //针对每一个图层进行填充，使得各个圆环之间相互有间隔，否则就重合成一个了。  
63.         layerDrawable.setLayerInset(0, width, width, width, width);  
64.         layerDrawable.setLayerInset(1, width * 2, width * 2, width * 2, width * 2);  
65.         layerDrawable.setLayerInset(2, width * 3, width * 3, width * 3, width * 3);  
66.         layerDrawable.setLayerInset(3, width * 4, width * 4, width * 4, width * 4);  
67.   
68.         final View view = findViewById(R.id.view);  
69.         view.setBackgroundDrawable(layerDrawable);  
70.     }  
71. }  

代码运行结果：

最里面的图像是我csdn博客的头像。

需要注意的是，我在写xml布局时候，特意写了一个正方形的View，假设这个View不是正方形，那么在上层java代码中使用OvalShape绘制图形则会因为屏幕的宽高变化成为椭圆而非圆。因此，作为一点儿经验，如果要在项目开发中制作圆形，务必保持正方形的宽高比。

附录：

1，《Android layer-list（1）》链接地址：http://blog.csdn.net/zhangphil/article/details/517209244
2，《Android layer-list：联合shape（2）》链接地址：http://blog.csdn.net/zhangphil/article/details/51721283  
3，《Android layer-list（3）》链接地址：http://blog.csdn.net/zhangphil/article/details/51721816 
4，《Android ImageView加载圆形图片且同时绘制圆形图片的外部边缘边线及边框》链接地址：http://blog.csdn.net/zhangphil/article/details/51944262 
5，《Android ShapeDrawable之OvalShape、RectShape、PaintDrawable、ArcShape》链接地址：http://blog.csdn.net/zhangphil/article/details/52025152 
6，《Android RoundedBitmapDrawable：Android官方的圆角图形图象实现方案》链接地址：http://blog.csdn.net/zhangphil/article/details/51829650