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



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

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

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@android:color/darker_gray"

android:orientation="vertical">

android:id="@+id/view"

android:layout_width="300dp"

android:layout_height="300dp"

android:layout_centerInParent="true" />

然后在上层写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绘制图形则会因为屏幕的宽高变化成为椭圆而非圆。因此，作为一点儿经验，如果要在项目开发中制作圆形，务必保持正方形的宽高比。

附录：