Android之自定义控件实现天气温度折线图和饼状图
以前写了个天气的APP,最近把他更新了一个版本,就抽取其中的天气温度折现图这个功能写了这篇博客,来与大家分享,希望对你有所帮助。
效果如图:
代码:
MainActivity.Java
/****
* 饼状图和天气折线图
*/
public class MainActivity extends AppCompatActivity { private WeatnerChartView chart1;
private WeatnerChartView chart2;
private PinChart pinChart;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView()
{
chart1= (WeatnerChartView) findViewById(R.id.weather_char1);
chart2= (WeatnerChartView) findViewById(R.id.weather_char2);
pinChart= (PinChart) findViewById(R.id.pinchart);
initData();
}
private void initData()
{
ArrayList<WeatherItem> list= new ArrayList<WeatherItem>();
list.add(new WeatherItem("",18));
list.add(new WeatherItem("",40));
list.add(new WeatherItem("", -1));
list.add(new WeatherItem("",1));
list.add(new WeatherItem("",6));
list.add(new WeatherItem("",2));
list.add(new WeatherItem("", 33));
chart1.SetTuView(list, "最高温度:");//单位: 摄氏度
chart1.invalidate();
ArrayList<WeatherItem> list1= new ArrayList<WeatherItem>();
list1.add(new WeatherItem("",1));
list1.add(new WeatherItem("",15));
list1.add(new WeatherItem("", -6));
list1.add(new WeatherItem("",-2));
list1.add(new WeatherItem("", 3));
list1.add(new WeatherItem("",-1));
list1.add(new WeatherItem("",11));
chart2.SetTuView(list1, "最低温度:");
chart2.invalidate();
} }
饼状图自定义控件 PinChart.java
@SuppressLint("DrawAllocation") public class PinChart extends View { static Canvas c;
private Paint[] mPaints;
private Paint mTextPaint;
private RectF mBigOval;
public float[] mSweep = { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 };
private static final float SWEEP_INC = 1; public static float[] humidity = { 110, 40, 50, 60, 50, 50 }; public PinChart(Context context) {
super(context); } public PinChart(Context context, AttributeSet atr) {
super(context, atr);
} @SuppressLint("DrawAllocation") @Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.TRANSPARENT);// 设置背景颜色(透明) mPaints = new Paint[humidity.length];
for (int i = 0; i < humidity.length; i++) {
mPaints[i] = new Paint();
mPaints[i].setAntiAlias(true);
mPaints[i].setStyle(Paint.Style.FILL);
mPaints[i].setColor(0x880FF000 + i * 0x019e8860);
} mBigOval = new RectF(40, 30, 220, 200);// 饼图的四周边界-->左,上,右,下 mTextPaint = new Paint();// 绘制文本
mTextPaint.setAntiAlias(true);
mTextPaint.setColor(Color.WHITE);
mTextPaint.setTextSize(16F);// 设置温度值的字体大小
float start = 0;
for (int i = 0; i < humidity.length; i++) {
canvas.drawArc(mBigOval, start, mSweep[i], true, mPaints[i]);
start += humidity[i];
if (mSweep[i] < humidity[i]) {
mSweep[i] += SWEEP_INC;
}
canvas.drawRect(new RectF(300, 30 + 15 * i, 312, 42 + 15 * i),
mPaints[i]);
canvas.drawText("测试模块" + i, 320, 40 + 15 * i, mTextPaint);
}
invalidate();
} }
自定义控件 WeatnerChartView.java
public class WeatnerChartView extends View {
private ArrayList<WeatherItem> items;
private String unit;
private String yFormat = "0"; private Context context; public void SetTuView(ArrayList<WeatherItem> list, String unitInfo) {
this.items = list;
this.unit = unitInfo;
} public WeatnerChartView(Context ct) {
super(ct);
this.context = ct;
} public WeatnerChartView(Context ct, AttributeSet attrs) {
super(ct, attrs);
this.context = ct;
} public WeatnerChartView(Context ct, AttributeSet attrs, int defStyle) {
super(ct, attrs, defStyle);
this.context = ct;
} @SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas); if (items == null) {
return;
} int height = getHeight();
int width = getWidth(); int split = dip2px(context, 8);
int marginl = width / 24;//
int margint = dip2px(context, 60);
int margint2 = dip2px(context, 25);
int bheight = height - margint - 2 * split; Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.parseColor("#ffffff"));//#7fffffff paint.setStrokeWidth(4);
paint.setStyle(Style.STROKE);
// 画单位
Paint p = new Paint();
p.setAlpha(0x0000ff);
p.setTextSize(sp2px(context, 15));
p.setColor(Color.parseColor("#28bbff"));
canvas.drawText(unit, split, margint2 + split * 2, p); // 画X坐标
ArrayList<Integer> xlist = new ArrayList<Integer>();
paint.setColor(Color.GRAY);
for (int i = 0; i < items.size(); i++) {
int span = (width - 2 * marginl) / items.size();
int x = marginl + span / 2 + span * i;
xlist.add(x);
drawText(items.get(i).getX(), x, split * 2, canvas);
} float max = Float.MIN_VALUE;
float min = Float.MAX_VALUE;
for (int i = 0; i < items.size(); i++) {
float y = items.get(i).getY();
if (y > max) {
max = y;
}
if (y < min) {
min = y;
}
} float span = max - min;
if (span == 0) {
span = 6.0f;
}
max = max + span / 6.0f;
min = min - span / 6.0f; // 获取点集合
Point[] mPoints = getPoints(xlist, max, min, bheight, margint); // 画线
paint.setColor(Color.parseColor("#7fffffff"));
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(3);//
drawLine(mPoints, canvas, paint); // 画点
paint.setColor(Color.parseColor("#28bbff"));
paint.setStyle(Style.FILL);
for (int i = 0; i < mPoints.length; i++) {
canvas.drawCircle(mPoints[i].x, mPoints[i].y, 8, paint);//radius=12
String yText = new java.text.DecimalFormat(yFormat).format(items
.get(i).getY());
drawText(yText+"°", mPoints[i].x,
mPoints[i].y - dip2px(context, 12), canvas);
}
} private Point[] getPoints(ArrayList<Integer> xlist, float max, float min,
int h, int top) {
Point[] points = new Point[items.size()];
for (int i = 0; i < items.size(); i++) {
int ph = top + h
- (int) (h * ((items.get(i).getY() - min) / (max - min)));
points[i] = new Point(xlist.get(i), ph);
}
return points;
} private void drawLine(Point[] ps, Canvas canvas, Paint paint) {
Point startp = new Point();
Point endp = new Point();
for (int i = 0; i < ps.length - 1; i++) {
startp = ps[i];
endp = ps[i + 1];
canvas.drawLine(startp.x, startp.y, endp.x, endp.y, paint);
}
} private void drawText(String text, int x, int y, Canvas canvas) {
Paint p = new Paint();
p.setAlpha(0x0000ff);
p.setTextSize(sp2px(context, 15));
p.setTextAlign(Paint.Align.CENTER);
p.setColor(Color.WHITE);
canvas.drawText(text, x, y, p);
} public ArrayList<WeatherItem> getItems() {
return items;
} public void setItems(ArrayList<WeatherItem> items) {
this.items = items;
} public String getyFormat() {
return yFormat;
} public void setyFormat(String yFormat) {
this.yFormat = yFormat;
} public int sp2px(Context context, float spValue) {
final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
return (int) (spValue * fontScale + 0.5f);
} public int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
}
Android之自定义控件实现天气温度折线图和饼状图的更多相关文章
- Android绘图机制(四)——使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美
Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美 这里为什么不继续把自定义View写下去呢,因为最近项目 ...
- Qt数据可视化(散点图、折线图、柱状图、盒须图、饼状图、雷达图)开发实例
目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...
- java 柱状图、折线图、饼状图
1.绘制柱状图: //BarChartTool工具类代码 package GUIview; import HibernateTool.HibernateTools; import ProductCla ...
- Android开源图表之树状图和饼状图的官方示例的整理
最近由于工作需要,所以就在github上搜了下关于chart的三方框架 官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Ecli ...
- ECharts 报表事件联动系列四:柱状图,折线图,饼状图实现联动
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- C# 绘制图表(柱状图,线性图,饼状图)
http://blog.csdn.net/gisfarmer/article/details/3736452 Chart饼状图,每根柱子的宽度: int a = Chart1.Series[" ...
- [BOT]自己动手实现android 饼状图,PieGraphView,附源码解析
本文要介绍的是一个参照手机支付宝app里面记账本功能里的"饼状图"实现的控件.通常app中可能的数据展示控件有柱状图,折线图,饼状图等,如果需要一个包含多种View控件的库,那么 ...
- DevExpress使用之ChartControl控件绘制图表(多坐标折线图、柱状图、饼状图)
最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...
- 【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽
本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分. 在[入门 - 第 9.1 章]讲解了如何制作饼状图.饼状图的各部分是用具有宽度的弧线来表示的.在与用户进行交互的时候,如果每一部分都能拖拽,是很有 ...
随机推荐
- pta 习题集5-17 家谱处理
人类学研究对于家族很感兴趣,于是研究人员搜集了一些家族的家谱进行研究.实验中,使用计算机处理家谱.为了实现这个目的,研究人员将家谱转换为文本文件.下面为家谱文本文件的实例: John Robert F ...
- poj2185 Milking Grid【KMP】
Milking Grid Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 10084 Accepted: 4371 Des ...
- java 中的控制台端口的输入
java 中基于控制台端的输入时最基本的操作. 第一步 导入Scanner类 import java.util.Scanner; 第二步 创建输入对象 input Scanner input=new ...
- In ZeroDB, the client is responsible for the database logic. Data encryption, decryption, and compression also happen client side. Therefore, the server never has any knowledge about the data, its str
zerodb/index.rst at master · zerodb/zerodb https://github.com/zerodb/zerodb/blob/master/docs/source/ ...
- Xvfb新建虚拟X窗口,通过x11vnc启动VNC Server并转发Xvfb启动的虚拟窗口
远程运行Linux窗口程序使用X Windows太重量级了,可以使用Xvfb新建虚拟X窗口,通过x11vnc启动VNC Server并转发Xvfb启动的虚拟窗口. 1 2 3 4 5 6 7 8 yu ...
- docker 离线环境安装oracle
因测试需要,需在内网的测试环境搭建一套docker Oracle 11g环境进行测试,测试环境为redhat 6.6 安装docker 1.7,本机windows 7 环境,安装docker 17.1 ...
- 【Python】【爬虫】如何学习Python爬虫?
如何学习Python爬虫[入门篇]? 路人甲 1 年前 想写这么一篇文章,但是知乎社区爬虫大神很多,光是整理他们的答案就够我这篇文章的内容了.对于我个人来说我更喜欢那种非常实用的教程,这种教程对于想直 ...
- Mirror--生成用于镜像用户同步的脚本
USE master GO IF OBJECT_ID ('sp_hexadecimal') IS NOT NULL DROP PROCEDURE sp_hexadecimal GO CREATE PR ...
- marathon-lb-什么是服务发现?(转)
摘要: 将容器应用部署到集群时,其服务地址,即IP和端口, 是由集群系统动态分配的.那么,当我们需要访问这个服务时,如何确定它的地址呢?这时,就需要服务发现(Service Discovery)了.本 ...
- PAT 1127 ZigZagging on a Tree[难]
1127 ZigZagging on a Tree (30 分) Suppose that all the keys in a binary tree are distinct positive in ...