仿QQ天气预报UI

效果图如下：

图片有些拉伸，可换一套适合的图片，或者计算坐标把图片限定在一个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