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

时间：2022-03-10 15:30:35


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

    }

}

代码运行结果：

Android View加载圆形图片且同时绘制圆形图片的外部边缘边线及边框：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

相关文章