android天气预报应用开发（三）---- 趋势图界面绘制

几乎所有的天气软件都会有着华丽丽的温度趋势图界面，通过折线图预报未来几天的天气温度走势。原本思路是通过开源项目AchartEngine来绘制，只是绘制的界面差别相当大。AchartEngine适合数据统计。无奈在网上搜到一个自定义实现折线图界面的demo，原理也简单，就重新来实现了下。（可惜源作者的demo链接已找不到了--，）

效果图：

（图片中缺少一段折线是因为实时的天气是因为天气预报网址获取的数据问题）

自定义实现折线图的思路如下：自定义TrendView继承View，在onDraw函数中根据给定值绘制相关图片文字资源。

直接上代码：

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		//自定义温度偏移量倍数为8，可根据屏幕分辨率设定
		int multiple = 8;
		
		// 计算文字高度  
		FontMetrics fontMetrics = mTextPaint.getFontMetrics();  
		float fontHeight = fontMetrics.bottom - fontMetrics.top;  
		
		//从屏幕中间位置作为0℃点
		int h = this.height/2;
		
		//最高温度折线的图片，文字高度
		int topTextH = (int) (h - fontHeight/2);
		int topPicH = (int) (h - fontHeight - Constants.picSize);
		//最低温度折线的图片，文字高度
		int lowTextH = (int) (h + fontHeight);
		int lowPicH = (int) (h + fontHeight);
		
		//绘制最高温度曲线
		for (int i = 0; i < topTem.size(); i++) {
			//温度值对应点在图中的偏移量，即扩以相应倍数，使得温度差明显
			float point = ( - topTem.get(i)) * multiple;	
			//if(topTem.get(i) != 100){
				//绘制两点间直线
				if (i != topTem.size() - 1) {
					//下一个温度值，用以描绘直线
					float pointNext = ( - topTem.get(i+1)) * multiple;	
					canvas.drawLine(x[i], h + point, x[i+1], h + pointNext, mLinePaint1);
				}
				//根据计算的文字高度绘制文字
				canvas.drawText(topTem.get(i) + "°", x[i], topTextH + point, mTextPaint);
				//绘制圆点
				canvas.drawCircle(x[i], h + point, radius, mPointPaint);
				//在文字上方绘制天气图片，要加上文字高度
				canvas.drawBitmap(topBmps[i], x[i]-topBmps[i].getWidth()/2, topPicH + point, null);
			//}
		}
		
		//绘制最低温度曲线
		for (int i = 0; i < lowTem.size(); i++) {
			float point = (-lowTem.get(i)) * multiple;
			//绘制两点间直线
			if (i != lowTem.size() - 1) {
				float pointNext = ( - lowTem.get(i+1)) * multiple;
				canvas.drawLine(x[i], h + point, x[i+1], h + pointNext, mLinePaint2);
			} 
			canvas.drawText(lowTem.get(i) + "°", x[i], lowTextH + point, mTextPaint);
			canvas.drawCircle(x[i], h + point, radius, mPointPaint);
			canvas.drawBitmap(lowBmps[i], x[i]-lowBmps[i].getWidth()/2, lowPicH + point, null);
		}
	}

剩下的就是数据设定的问题了，可在构造函数设值或者通过set设值。

在xml文件中进行引用

<com.example.view.TrendView
            android:id="@+id/trendView"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >
        </com.example.view.TrendView>