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



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

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

写一个布局，简单放一个正方形的View：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/darker_gray"
    android:orientation="vertical">

    <View
        android:id="@+id/view"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true" />

</RelativeLayout>

然后在上层写Java代码：

package zhangphil.app;

import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.support.v4.graphics.drawable.RoundedBitmapDrawable;
import android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

        int width = 50;

        //最外部的白色环形边框
        OvalShape ovalShape0 = new OvalShape();
        ShapeDrawable drawable0 = new ShapeDrawable(ovalShape0);
        drawable0.getPaint().setColor(Color.WHITE);
        drawable0.getPaint().setStyle(Paint.Style.FILL);
        drawable0.getPaint().setAntiAlias(true);
        drawable0.getPaint().setStrokeWidth(width);

        //黄色边框
        OvalShape ovalShape1 = new OvalShape();
        ShapeDrawable drawable1 = new ShapeDrawable(ovalShape1);
        drawable1.getPaint().setColor(Color.YELLOW);
        drawable1.getPaint().setStyle(Paint.Style.FILL);
        drawable1.getPaint().setAntiAlias(true);
        drawable1.getPaint().setStrokeWidth(width);

        //红色边框
        OvalShape ovalShape2 = new OvalShape();
        ShapeDrawable drawable2 = new ShapeDrawable(ovalShape2);
        drawable2.getPaint().setColor(Color.RED);
        drawable2.getPaint().setStyle(Paint.Style.FILL);
        drawable2.getPaint().setAntiAlias(true);
        drawable2.getPaint().setStrokeWidth(width);

        //最里面的图像
        RoundedBitmapDrawable drawable3 = RoundedBitmapDrawableFactory.create(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.zhangphil));
        drawable3.setCircular(true);
        drawable3.setAntiAlias(true);

        Drawable[] layers = new Drawable[4];
        layers[0] = drawable0;
        layers[1] = drawable1;
        layers[2] = drawable2;
        layers[3] = drawable3;

        LayerDrawable layerDrawable = new LayerDrawable(layers);

        //针对每一个图层进行填充，使得各个圆环之间相互有间隔，否则就重合成一个了。
        layerDrawable.setLayerInset(0, width, width, width, width);
        layerDrawable.setLayerInset(1, width * 2, width * 2, width * 2, width * 2);
        layerDrawable.setLayerInset(2, width * 3, width * 3, width * 3, width * 3);
        layerDrawable.setLayerInset(3, width * 4, width * 4, width * 4, width * 4);

        final View view = findViewById(R.id.view);
        view.setBackgroundDrawable(layerDrawable);
    }
}

代码运行结果：

最里面的图像是我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