效果图如下:
图片有些拉伸,可换一套适合的图片,或者计算坐标把图片限定在一个box内,这里我就不处理了。
使用模拟天气数据
public static final String wees[]={
"今天","星期二","星期三","星期四","星期五"};
public static final String dayWeather[]={
"晴天","小雨","小雨","中雨","小雨"};
public static final int dayRes[]={R.drawable.w0,R.drawable.w7,R.drawable.w7,R.drawable.w8,R.drawable.w7};
public static final int dayTemp[]={
23,22,23,20,17};
public static final int nightTemp[]={
18,17,18,12,11};
public static final int nightRes[]={R.drawable.w2,R.drawable.w7,R.drawable.w7,R.drawable.w8,R.drawable.w7};
public static final String nightWeather[]={
"小雨","小雨","小雨","中雨","小雨"};
public static final String date[]={
"02/20","02/21","02/22","02/23","02/24"};
public static final String wind[]={
"南风","东风","西风","东南风","西北风"};
public static final String windVilue[]={
"微风","3-4级","5-6级","2-3级","微风"};
这样的View最重要的就是构建坐标系。
private void drawHorizontalLine(Canvas canvas) {
float startX,startY,endX,endY;
for(int i=0;i<(mHorizontalCount+1);i++){
startX=getPaddingLeft();
startY=getPaddingTop()+i*itemHeight;
endX=getWidth()-getPaddingRight();
endY=startY;
canvas.drawLine(startX,startY,endX,endY,verticalLinePaint);
}
}
private void drawverticalLine(Canvas canvas) {
float startX;
float startY;
float endX;
float endY;
for(int i=1;i<mCount;i++){
startX=getPaddingLeft()+i*itemWidth;
startY=getPaddingTop();
endX=startX;
endY=getHeight()-getPaddingBottom();
canvas.drawLine(startX,startY,endX,endY,verticalLinePaint);
}
}
效果如图:
根据新建的坐标系绘制
private void drawText(Canvas canvas) {
float weekX,weekY;
float dayWeatherX,dayWeatherY;
float dayResX,dayResY;
float nightWeatherX,nightWeatherY;
float dateX,dateY;
float windVilueX,windVilueY;
for(int i=0;i<mCount;i++){
//绘制星期
weekX=(getPaddingLeft()+itemWidth)/2+i*itemWidth;
weekY=getPaddingTop()+itemHeight+getTextPaintOffset(textPaint);
c