首页 > 代码库 > Android开发之自定义View专题(一):自定义柱形图
Android开发之自定义View专题(一):自定义柱形图
博主之前做的项目中,需要用到报表功能,之前在网上百度谷歌各种结果,没有一个是能够满足博主的老板的需求的,无奈之前博主只好自己去研究。终于研究出了一个不错的结果。先上效果图:
这是博主的一个项目的一个报表。老板要求可以点击左侧的月份进行月份比较,也可以点击选择月份,右边柱形图条状是可以响应点击事件的,并且可以左右滑动切换月份,如果柱形图内容过长超出界面,也是可以左右滑动查看未显示全的内容的。这里只讲柱形图的生成,其他界面效果博主就不讲解了。实际效果和这样有点差异,但不大,主要是实际效果在柱形图的顶端都还会显示数值。
自定义柱形图提供两种定义方式,可以在XML文件中写入,也可以再代码中new出来后加入一个容器中。这里博主就不在详细描述了,博主花了1个多小时才将该view从项目中独立出来。有兴趣的同学可以下载完整的项目下来学习。
github下载地址:https://github.com/victorfreedom1989/FreedomHistogram
CSDN下载地址:http://download.csdn.net/detail/victorfreedom/8309505
1、自定义柱形图第一步,自定义柱形条:
package com.freedom.histogram; import java.text.DecimalFormat; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; /** * @ClassName: FreedomHistogram * @author victor_freedom (x_freedom_reddevil@126.com) * @createddate 2014-12-28 下午10:44:52 * @Description: */ public class FreedomHistogram { // 柱形条宽度 private int with; // 柱形条高度 private int height; // 柱形条对应数值 private double count; // 起始Y坐标 private int axisY; // 标题起始Y坐标 private int titleY; // 柱形条起始X坐标 private int axisX; private Context context; private DecimalFormat df; private Paint mPaint; public FreedomHistogram(Context context, int with, float axisY) { this.with = with; this.axisY = ScreenUtil.dip2px(context, axisY); this.titleY = ScreenUtil.dip2px(context, axisY + 35); this.context = context; this.df = new DecimalFormat("#0.0"); mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setColor(Color.WHITE); } public FreedomHistogram() { }; public int getAxisX() { return axisX; } public void setAxisX(int axisX) { this.axisX = axisX; } public int getHeight() { return height; } public void setHeight(int height) { this.height = height; } public double getCount() { return count; } public void setCount(double count) { this.count = count; } public void drawHistogram(Canvas canvas, Paint paint) { // 绘制第一层 canvas.drawRect(axisX - 1, axisY - height - 1, with + axisX + 1, axisY, mPaint); // 绘制第二层,让柱形条有白边,好看,根据个人喜好可以不绘制第二层。 canvas.drawRect(axisX, axisY - height, with + axisX, axisY - 1, paint); // 绘制柱形条对应的数值 canvas.drawText(df.format(count), axisX - ScreenUtil.dip2px(context, 5), axisY - height - 10, paint); } public void drawTitle(Canvas canvas, Paint paint, String name) { // 绘制标题 canvas.drawRect(axisX, titleY - height, with + axisX, titleY - 1, paint); canvas.drawText(name, with + axisX + ScreenUtil.dip2px(context, 5), titleY - 1, paint); } }2、自定义柱形图第二步:构建柱形图
package com.freedom.histogram; import java.util.ArrayList; import java.util.List; import java.util.Map; import android.annotation.SuppressLint; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.DashPathEffect; import android.graphics.Paint; import android.graphics.Paint.Style; import android.graphics.PathEffect; import android.graphics.PointF; import android.graphics.Rect; import android.util.AttributeSet; import android.util.FloatMath; import android.view.MotionEvent; import android.view.View; /** * @ClassName: FreedomHistogramView * @author victor_freedom (x_freedom_reddevil@126.com) * @createddate 2014-12-28 下午10:47:33 * @Description: TODO */ public class FreedomHistogramView extends View { private HistogramOnClickListener histogramOnClickListener; public void setHistogramOnClickListener(HistogramOnClickListener listner) { this.histogramOnClickListener = listner; } // 柱形图总数据 private Map<Integer, Double[]> datas; // 柱形图每一组数据 private Double[] perData; // 最大值 private double max; // 平局值 private Double average; // 数据有多少组集合 private ArrayList<Integer> dataKeys; // 每组数据的集合 private ArrayList<Double[]> valuese; // 每组数据对应的区域 private ArrayList<Rect> rects; // 数据有多少组 private int flag; // 平均线数值 private double avergerLine; // 每组数据对应的颜色 private int[] colors = new int[] { 0xff8B008B, 0xff00BFFF, 0xff4800FF, 0xff333333, 0xff006400, 0xff668B8B, 0xffFF83FA, 0xff363636, 0xff000080, 0xff008B8B, 0xffFFDAB9, 0xff90EE90 }; // 柱形图标题对应相距值 private int margin; // 柱形条 private FreedomHistogram freedomHistogram; private Paint paint; // 是否左下角绘制标题 private boolean isTitle = false; private String title[]; // 每组数据柱形条对应的X轴坐标说明 private List<String> nodes; // 柱形条宽度 private int charWith; // 柱形条间距(配合margin使用) private int withX; // Y周对应坐标点的个数 private int numberY; // Y轴各坐标点之间的距离 private float withY; public FreedomHistogramView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } /** * Title: Description:在XML文件中的构建方法 * * @param context * @param attrs */ public FreedomHistogramView(Context context, AttributeSet attrs) { super(context, attrs); TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.FreedomHistogramView); charWith = a.getInteger(R.styleable.FreedomHistogramView_charWith, 20); withX = a.getInteger(R.styleable.FreedomHistogramView_withX, 20); numberY = a.getInteger(R.styleable.FreedomHistogramView_numberY, 10); withY = a.getFloat(R.styleable.FreedomHistogramView_withY, 20); isTitle = a.getBoolean(R.styleable.FreedomHistogramView_isTitle, false); paint = new Paint(); paint.setAntiAlias(true); // xPaint.setAntiAlias(true); // 新建一个柱形条 freedomHistogram = new FreedomHistogram(context, ScreenUtil.dip2px( context, charWith), withY * (numberY - 1) + 10); a.recycle(); } public FreedomHistogramView(Context context) { super(context); } public FreedomHistogramView(Context context, Map<Integer, Double[]> datas, int charWith, int withX, List<String> nodes, int numberY, float withY, boolean isTitle) { super(context); margin = 0; this.datas = datas; this.withX = withX; this.nodes = nodes; this.numberY = numberY; this.withY = withY; this.charWith = charWith; this.isTitle = isTitle; paint = new Paint(); paint.setAntiAlias(true); // xPaint.setAntiAlias(true); // 新建一个柱形条 freedomHistogram = new FreedomHistogram(context, ScreenUtil.dip2px( context, charWith), withY * (numberY - 1) + 10); } public Map<Integer, Double[]> getDatas() { return datas; } public String[] getTitle() { return title; } public void setTitle(String[] title) { this.title = title; } public void setDatas(Map<Integer, Double[]> datas) { this.datas = datas; // invalidate(); } public boolean isTitle() { return isTitle; } public void setTitle(boolean isTitle) { this.isTitle = isTitle; } public List<String> getNodes() { return nodes; } public void setNodes(List<String> nodes) { this.nodes = nodes; // invalidate(); } public int getCharWith() { return charWith; } public void setCharWith(int charWith) { this.charWith = charWith; } public int getwithX() { return withX; } public void setwithX(int withX) { this.withX = withX; } public float getNumberY() { return numberY; } public void setNumberY(int numberY) { this.numberY = numberY; } public float getWithY() { return withY; } public void setWithY(float withY) { this.withY = withY; } public void iniData() { // 取出数值 Integer k; Double[] v; dataKeys = new ArrayList<Integer>(); valuese = new ArrayList<Double[]>(); for (Map.Entry<Integer, Double[]> entry : datas.entrySet()) { k = entry.getKey(); // key dataKeys.add(k); v = entry.getValue(); // value valuese.add(v); } this.flag = dataKeys.size(); double total = 0; int sum = 0; for (Double[] dataMax : valuese) { max = dataMax[0]; for (double data : dataMax) { total += data; max = max > data ? max : data; if (data != 0.0) { sum++; } } } max = dataChange(max); average = max / (numberY - 1); avergerLine = total / sum; } private double dataChange(double data) { StringBuilder sb = new StringBuilder(); String dataString = String.valueOf(data); String dateInt = dataString.substring(0, dataString.lastIndexOf(".")); int length = dateInt.length(); String newDatafirst = dataString.substring(0, 1); if (newDatafirst.equals("9")) { boolean isChange = false; for (int i = 1; i < dataString.length(); i++) { String dataPer = dataString.substring(i, i + 1); if (dataPer.equals("0")) { continue; } else { isChange = true; } } if (isChange) { sb.append("1"); for (int i = 0; i < length; i++) { sb.append("0"); } return Double.valueOf(sb.toString()); } else { return data; } } else { boolean isChange = false; for (int i = 1; i < dataString.length(); i++) { String dataPer = dataString.substring(i, i + 1); if (dataPer.equals("0")) { continue; } else { isChange = true; break; } } if (isChange) { newDatafirst = (Integer.valueOf(newDatafirst) + 1) + ""; sb.append(newDatafirst); for (int i = 0; i < length - 1; i++) { sb.append("0"); } return Double.valueOf(sb.toString()); } else { return data; } } } public void drawAxis(Canvas canvas) { paint.setColor(Color.DKGRAY); paint.setStrokeWidth(ScreenUtil.dip2px(getContext(), 2)); paint.setTextSize(ScreenUtil.sp2px(getContext(), 10)); canvas.drawLine( ScreenUtil.dip2px(getContext(), 50), ScreenUtil.dip2px(getContext(), withY * (numberY - 1) + 10), ScreenUtil.dip2px(getContext(), (withX + (flag - 1) * charWith) * (nodes.size() + 1)), ScreenUtil.dip2px(getContext(), withY * (numberY - 1) + 10), paint); canvas.drawLine(ScreenUtil.dip2px(getContext(), 51), ScreenUtil.dip2px(getContext(), 5), ScreenUtil.dip2px(getContext(), 51), ScreenUtil.dip2px(getContext(), withY * (numberY - 1) + 10), paint); int x = ScreenUtil.dip2px(getContext(), (float) (59 + flag * charWith / 2)); int y = ScreenUtil.dip2px(getContext(), withY * (numberY - 1) + 10); for (int i = 0; i < nodes.size(); i++) { canvas.drawText( nodes.get(i), x, ScreenUtil.dip2px(getContext(), withY * (numberY - 1) + 25), paint); x += ScreenUtil.dip2px(getContext(), withX + (flag - 1) * charWith); } for (int i = 0; i < numberY; i++) { canvas.drawText(average.intValue() * i + "", ScreenUtil.dip2px(getContext(), 3), y, paint); y -= ScreenUtil.dip2px(getContext(), withY); } } public void drawChart(Canvas canvas) { rects = new ArrayList<Rect>(); rects.clear(); paint.setTextSize(ScreenUtil.sp2px(getContext(), 8)); for (int j = 0; j < flag; j++) { paint.setColor(colors[j]); // paint.setStyle(Style.FILL_AND_STROKE); // paint.setStrokeWidth(1); perData = http://www.mamicode.com/valuese.get(j);>
Android开发之自定义View专题(一):自定义柱形图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。