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

今天药忘吃喽~ 2023-10-17 08:06 0阅读 0赞

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

代码运行结果：

![Center][]

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

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

附录：

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

[Center]: https://img-blog.csdn.net/20160726140930135?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[http_blog.csdn.net_zhangphil_article_details_517209244]: http://blog.csdn.net/zhangphil/article/details/517209244
[http_blog.csdn.net_zhangphil_article_details_51721283]: http://blog.csdn.net/zhangphil/article/details/51721283
[http_blog.csdn.net_zhangphil_article_details_51721816]: http://blog.csdn.net/zhangphil/article/details/51721816
[http_blog.csdn.net_zhangphil_article_details_51944262]: http://blog.csdn.net/zhangphil/article/details/51944262
[http_blog.csdn.net_zhangphil_article_details_52025152]: http://blog.csdn.net/zhangphil/article/details/52025152
[http_blog.csdn.net_zhangphil_article_details_51829650]: http://blog.csdn.net/zhangphil/article/details/51829650