首页 > 代码库 > 环形图 自定义(一)
环形图 自定义(一)
需求:自定义环形图(饼图),实现2项数据配比显示;
效果图:
实现分析:
1.目录结构:
代码实现:
1. color.xml
<?xml version="1.0" encoding="utf-8"?><resources> <!-- 饼图 --> <color name="pie_progress_bank">#fd8f8b</color> <color name="pie_progress_fund">#2999f9</color> <color name="text_tag_bg">#aaaaaa</color> <color name="text_progress_bg">#fb4b45</color> <color name="text_term_bg">#aaaaaa</color></resources>
2. fragment_main.xml
<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" tools:context="com.jjc.demo.MainActivity$PlaceholderFragment" > <com.jjc.demo.RingView android:id="@+id/ringview" android:layout_width="match_parent" android:layout_height="match_parent" /></RelativeLayout>
3. RingView.java
package com.jjc.demo;import java.math.BigDecimal;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.graphics.RectF;import android.graphics.Paint.Style;import android.util.AttributeSet;import android.view.View;/** * 当前环形图实现原理,先画一个完整环形,然后再画一部分环形,两者叠加,显示两种不同的配比; * @author ThinkPad * */public class RingView extends View{ /** 当前进度 */ private int progress; /** 总进度 */ private int max; private Paint paint; private RectF oval; private int width; private int height; private String term = ""; /** 半径 */ private float radius; /** 画笔宽度 */ private float paintWidth; /** 组合字体 */// private float tagTextSize; /** 配比字体 */ private float progressTextSize; // private float tagTextSize; /** 期限字体 */// private float termTextSize; private double rate; /** * 设置总数 * @param max */ public void setMax(int max) { this.max = max; } public void setPaintWidth(float paintWidth) { this.paintWidth = paintWidth; } /** * 设置进度 * @param progress */ public void setProgress(int progress) { this.progress = progress; invalidate(); } /** * 设置收益率 * @param rate */ public void setRate(double rate) { this.rate = round(rate, 2, 4); } public void setTerm(String term) { this.term = term; } public RingView(Context context, AttributeSet attrs) { super(context, attrs); paint = new Paint(); oval = new RectF(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); height = canvas.getHeight(); width = canvas.getWidth(); initRadius(); initPaint(); initDebugLine(canvas ,false); initBankPaint(canvas); initFundPaint(canvas); initDescrip(canvas); } /** * 测试文字是否居中,标尺线 */ private void initDebugLine(Canvas canvas ,boolean isDebug) { if(isDebug){ //竖线 paint.setColor(Color.BLACK); canvas.drawLine(width/2, 0, width/2, height, paint); //横线 paint.setColor(Color.GRAY); canvas.drawLine(0, height/2, width, height/2, paint); } } /** * 比较高度和宽度,然后取短的作为圆环的半径 */ private void initRadius() { if (width > height) { radius = (float) (height * 0.4); } else { radius = (float) (width * 0.4); } } private void initPaint() { if(paintWidth == 0){ paintWidth = radius/10; } paint.setAntiAlias(true);// 设置是否抗锯齿 paint.setFlags(Paint.ANTI_ALIAS_FLAG);// 帮助消除锯齿 } private void initBankPaint(Canvas canvas) { paint.setColor(getResources().getColor(R.color.pie_progress_bank));// 设置银行理财画笔 /** 银行理财标注 */ // 设置样式-填充 paint.setStyle(Style.FILL); // 绘制一个矩形 canvas.drawRect(new Rect(10, height-35, 22, height-15), paint); paint.setTextSize((float) (radius/5.5));// 设置标注文字的大小 canvas.drawText("银行理财", 35, height-18, paint); /** 银行理财的饼图 */ paint.setStrokeWidth(paintWidth);// 设置画笔宽度 paint.setStyle(Style.STROKE);// 设置中空的样式 canvas.drawCircle(width / 2, height / 2, radius, paint); } private void initFundPaint(Canvas canvas) { paint.setColor(getResources().getColor(R.color.pie_progress_fund));// 设置货币基金画笔 /** 货币基金标注 */ // 设置样式-填充 paint.setStyle(Style.FILL); // 绘制一个矩形 canvas.drawRect(new Rect(10, height-65, 22, height-45), paint); paint.setTextSize((float) (radius/5.5));// 设置标注文字的大小 canvas.drawText("货币基金", 35, height-48, paint); /** 货币基金的饼图 */ paint.setStrokeWidth(paintWidth);// 设置画笔宽度 paint.setStyle(Style.STROKE);// 设置中空的样式 oval.set((width / 2 - radius), (height / 2 - radius), (width / 2 + radius), (height / 2 + radius)); canvas.drawArc(oval, -90, ((float) progress / max) * 360, false, paint);// 画圆弧,第二个参数为:起始角度,第三个为跨的角度,第四个为true的时候是实心,false的时候为空心 } private void initDescrip(Canvas canvas) { paint.reset();// 将画笔重置 paint.setStrokeWidth(3);// 再次设置画笔的宽度 progressTextSize = (float) (radius / 2); paint.setTextSize((float) (radius / 7));// 设置标记文字的大小 paint.setColor(getResources().getColor(R.color.text_tag_bg));// 设置画笔颜色 canvas.drawText("组合收益率", (float) (width / 2 - radius / 2.8), (float) (height / 2 - progressTextSize * 0.5), paint); paint.setTextSize((float) (radius / 7));// 设置期限文字的大小 paint.setColor(getResources().getColor(R.color.text_term_bg));// 设置画笔颜色 canvas.drawText(term, (float) (width / 2 - radius / 4.5), (float) (height / 2 + progressTextSize * 0.7), paint); /** 配比数 */ paint.setTextSize(progressTextSize);// 设置进度文字的大小 paint.setColor(getResources().getColor(R.color.text_progress_bg));// 设置画笔颜色 canvas.drawText(rate+"", (float) (width / 2 - progressTextSize * 1.1), (float) (height / 2 + progressTextSize / 2.5), paint); paint.setTextSize((float) (radius / 5));// 设置百分号的大小 canvas.drawText("%", (float) (width / 2 + progressTextSize * 0.9), (float) (height / 2 + progressTextSize / 2.5), paint); } /** * 对double数据进行取精度. * <p> * For example: <br> * double value = http://www.mamicode.com/100.345678;
>@param value * double数据. * @param scale * 精度位数(保留的小数位数). * @param roundingMode * 精度取值方式. * @return 精度计算后的数据. */ private double round(double value, int scale, int roundingMode) { BigDecimal bd = new BigDecimal(value); bd = bd.setScale(scale, roundingMode); double d = bd.doubleValue(); bd = null; return d; } }
4.MainActivity.java
package com.jjc.demo;import android.support.v7.app.ActionBarActivity;import android.support.v4.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.view.ViewGroup;public class MainActivity extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); if (savedInstanceState == null) { getSupportFragmentManager().beginTransaction() .add(R.id.container, new PlaceholderFragment()).commit(); } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } /** * A placeholder fragment containing a simple view. */ public static class PlaceholderFragment extends Fragment { private View rootView; private RingView ringView; public PlaceholderFragment() { } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { rootView = inflater.inflate(R.layout.fragment_main, container, false); return rootView; } @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); initView(); } private void initView() { ringView = (RingView) rootView.findViewById(R.id.ringview); ringView.setMax(100); ringView.setRate(5.43); ringView.setTerm("六个月"); ringView.setProgress(40); } }}
代码:http://pan.baidu.com/s/1eQzk5SQ
环形图 自定义(一)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。