android自定义view----等分饼图，实现每个块中间的间隔

android自定义view—-等分饼图，实现每个块中间的间隔

android 饼图使用比较广泛，本图是个等分饼图，各位有哪里需要用的请拿去随意用，先上图：

首先看核心代码PieView

使用到画扇形的apicanvas.drawArc(rect,startAngle, angle, true, arcPaint),rect为圆的外接矩形，startAngle扇形开始角度，angle扇形角度，true为画的为扇形，arcPaint画笔；

使用画布移动api，canvas.save();保存画布，保存完以后可以移动或放大缩小或旋转画布等等，本文中使用了平移画布，并且是根据一定的角度移动，最后在执行canvas.restore();还原画布；

package biz.com.piedemo;

import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PointF;
import android.graphics.RectF;
import android.os.Build;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import java.util.List;

/**
* Created by cmc on 2015/12/3.
*/
public class PieView extends View {
private int normalColor = Color.rgb(240,240,240);
private int selectColor = Color.GREEN;
private int normalTextColor = Color.GRAY;
private int selectTextColor = Color.WHITE;
private int circleColor = Color.WHITE;
private Paint arcPaint;
private Paint textPaint;
private int selectPosition = 1;
private PointF circle;
private List<Data> list;
private OnItemSelectListener onItemSelectListener;

public PieView(Context context) {
super(context);
}

public void setOnItemSelectListener(OnItemSelectListener onItemSelectListener) {
this.onItemSelectListener = onItemSelectListener;
}

public List<Data> getList() {
return list;
}

/**
* 设置饼图数据、显示文字，图片
* @param list
*/
public void setList(List<Data> list) {
this.list = list;
}

public void setSelectTextColor(int selectTextColor) {
this.selectTextColor = selectTextColor;
}

public void setNormalTextColor(int normalTextColor) {
this.normalTextColor = normalTextColor;
}

public void setSelectColor(int selectColor) {
this.selectColor = selectColor;
}

public void setNormalColor(int normalColor) {
this.normalColor = normalColor;
}

public PieView(Context context, AttributeSet attrs) {
this(context, attrs, -1);

}

public PieView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.pieView);
int count = ta.getIndexCount();
for(int i = 0;i<count;i++){
int index = ta.getIndex(i);
switch (index){
case R.styleable.pieView_normal_color:
normalColor = ta.getColor(i,Color.rgb(240,240,240));
break;

case R.styleable.pieView_select_color:
selectColor = ta.getColor(i,Color.GREEN);
break;
case R.styleable.pieView_normal_text_color:
normalTextColor = ta.getColor(i,Color.GRAY);
break;

case R.styleable.pieView_select_text_color:
selectTextColor = ta.getColor(i,Color.WHITE);
break;
case R.styleable.pieView_circle_color:
circleColor = ta.getColor(i,Color.WHITE);
break;
}
}
init();
}

private void init() {
arcPaint = new Paint();
arcPaint.setAntiAlias(true);
textPaint = new Paint();
textPaint.setAntiAlias(true);
textPaint.setTextAlign(Paint.Align.CENTER);
textPaint.setTextSize(28);
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public PieView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//确定中心点
circle = new PointF(getWidth()/2f,getHeight()/2f);
//确定圆半径 取高和宽小的一部分作为直径
float min = getHeight()>getWidth()?getWidth():getHeight();
//减20作为拉开间距
float arcRadio = min/2f-20;
//圆的外接矩形
RectF rect = new RectF(circle.x-arcRadio,circle.y-arcRadio,circle.x+arcRadio,circle.y+arcRadio);
if(list!=null&&list.size()>0) {
for (int i = 0; i < list.size(); i++) {
String title = "";
int bitmapReId = R.mipmap.ic_launcher;
Data date = list.get(i);
if (date.name != null)
title = date.name;
//设置选中改变图标和字体颜色
if (i == selectPosition) {
textPaint.setColor(selectTextColor);
arcPaint.setColor(selectColor);
if (date.selectDrawbleId != 0)
bitmapReId = date.selectDrawbleId;
} else {
arcPaint.setColor(normalColor);
textPaint.setColor(normalTextColor);
if (date.drawableID != 0)
bitmapReId = date.drawableID;
}
//按角度移动画布，确定间隙
canvas.save();
//按角度移动画布，
canvas.translate((float) (Math.sin((180/list.size() + 360/list.size() * i) * Math.PI / 180) * 10), -(float) (10 * Math.cos((180/list.size() + 360/list.size() * i) * Math.PI / 180)));
canvas.drawArc(rect, 270 + 360/list.size() * i, 360/list.size(), true, arcPaint);
canvas.restore();
canvas.save();
canvas.translate((float) (Math.sin((180/list.size() + 360/list.size() * i) * Math.PI / 180) * arcRadio / 1.5), -(float) (arcRadio / 1.5 * Math.cos((180/list.size() + 360/list.size() * i) * Math.PI / 180)));
Bitmap bit = BitmapFactory.decodeResource(getResources(), bitmapReId);
canvas.drawBitmap(bit, circle.x - bit.getWidth() / 2, circle.y - bit.getHeight(), arcPaint);
canvas.drawText(title, circle.x, circle.y + 28, textPaint);
canvas.restore();
}
}
//画中心圆
arcPaint.setColor(circleColor);
canvas.drawCircle(circle.x, circle.y, arcRadio / 2.5f, arcPaint);
}

/**
* 百度查到别人写的一个方法，在我多个饼图中都有使用这个方法，确认无误
* @param radiusX 圆心
* @param radiusY 圆心
* @param x1      触摸点
* @param y1      触摸点
* @return
* @throws
* @Title: getTouchedPointAngle
* @Description: 计算触摸角度
*/
private float getTouchedPointAngle(float radiusX, float radiusY, float x1,
float y1) {
float differentX = x1 - radiusX;
float differentY = y1 - radiusY;
double a = 0.0D;
double t = differentY
/ Math.sqrt(differentX * differentX + differentY * differentY);

if (differentX > 0.0F) {
// 0~90
if (differentY > 0.0F)
a = 6.283185307179586D - Math.asin(t);
else
// 270~360
a = -Math.asin(t);
} else if (differentY > 0.0F)
// 90~180
a = 3.141592653589793D + Math.asin(t);
else {
// 180~270
a = 3.141592653589793D + Math.asin(t);
}
return (float) (360.0D - a * 180.0D / 3.141592653589793D % 360.0D);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
float cx = circle.x;
float cy = circle.y;
float r = getHeight();
float r1 = (float) ((getHeight()/2f-20)/2.5);
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
if ((x - cx) * (x - cx) + (y - cy) * (y - cy) - r * r <= 0.0F && (x - cx) * (x - cx) + (y - cy) * (y - cy) - r1 * r1 >= 0.0F) {
selectPosition = getSelectPosition(getTouchedPointAngle(cx,cy,x,y));
if(onItemSelectListener!=null)
onItemSelectListener.selectPosition(selectPosition,this);
invalidate();
}
break;
}
return super.onTouchEvent(event);
}

private int getSelectPosition(float touchedPointAngle) {
Log.i("TAG",touchedPointAngle+"");
//当为4块及以下时，第一块的范围为270-360+所以加上一下代码
if(list.size()<=4){
if(touchedPointAngle>270||touchedPointAngle<=(270+360/list.size())%360){
return 0;
}
}
for(int i = 0;i<list.size();i++){
if(touchedPointAngle>(270+i*360/list.size())%360&&touchedPointAngle<=(270+(i+1)*360/list.size())%360){
return i;
}
}
return 1;
}

public static class Data {
public Data() {
}

public Data(String name, int drawableID, int selectDrawbleId) {
this.name = name;
this.drawableID = drawableID;
this.selectDrawbleId = selectDrawbleId;
}

public String name;
public int drawableID;
public int selectDrawbleId;
}
public interface OnItemSelectListener{
void selectPosition(int position,PieView pieView);
}
}

再看layout代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:pieview="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity">

<biz.com.piedemo.PieView
android:id="@+id/pv"
android:layout_width="match_parent"
android:background="#ff0000"
pieview:select_color="#0000ff"
pieview:normal_color="#dddddd"
pieview:normal_text_color="#0570E9"
pieview:select_text_color="#ffffff"
pieview:circle_color="#ffffff"
android:layout_height="300dp" />

</RelativeLayout>

actvity代码

public class MainActivity extends ActionBarActivity {

private PieView pv;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
pv = (PieView) findViewById(R.id.pv);
List<PieView.Data> list = new ArrayList<>();
list.add(new PieView.Data("第一块",R.mipmap.icon_normal,R.mipmap.icon_select));
list.add(new PieView.Data("第二块",R.mipmap.icon_normal,R.mipmap.icon_select));
list.add(new PieView.Data("第三块",R.mipmap.icon_normal,R.mipmap.icon_select));
list.add(new PieView.Data("第四块",R.mipmap.icon_normal,R.mipmap.icon_select));
list.add(new PieView.Data("第五块", R.mipmap.icon_normal,R.mipmap.icon_select));
//        list.add(new PieView.Data("第六块", R.mipmap.icon_normal,R.mipmap.icon_select));
//        list.add(new PieView.Data("第七块", R.mipmap.icon_normal,R.mipmap.icon_select));
//        list.add(new PieView.Data("第八块", R.mipmap.icon_normal,R.mipmap.icon_select));
pv.setList(list);
pv.setOnItemSelectListener(new PieView.OnItemSelectListener() {
@Override
public void selectPosition(int position, PieView pieView) {
if (pieView.getList() != null)
Toast.makeText(MainActivity.this, pieView.getList().get(position).name, Toast.LENGTH_SHORT).show();
}
});
}
}

代码下载链接