android模拟小米天气view（下）

github：https://github.com/1181631922/OrliteDemo

由于刚开始没考虑刻度旁边的度数，改起来比较麻烦，和重写花的工作量差不多，现在可以实现刻度变化，度数变化，太阳的转动，当然太阳可以换成云彩，雨，画起来比较麻烦，由于不是圆的也不能转动，云和雨一类的可以采用画笔的其他用法，还可以加入控制颜色的get和set方法，都比较简单，看一下效果

view：

package com.fanyafeng.orlitedemo.myview;

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.util.AttributeSet;
import android.view.View;

/**
 * Created by 365rili on 16/4/22.
 */
public class SpeedCircleView extends View {

    private Paint roundCirclePaint;
    private Paint halfCirclePaint;
    private Paint endCirclePaint;
    private Paint templePaint;
    private Paint statusShapPaint;
    private Paint lightShapPaint;
    private Paint percentCirclePaint;
    private Paint percentEndCirclePaint;
    private int percent;
    private int tempPercent = 0;
    private int tempLight = 0;
    private String templeText = "24";

    public SpeedCircleView(Context context) {
        super(context);
    }

    public SpeedCircleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        roundCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        halfCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        endCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        templePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        statusShapPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        lightShapPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        percentCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        percentEndCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    public SpeedCircleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public String getTempleText() {
        return templeText;
    }

    public void setTempleText(String templeText) {
        this.templeText = templeText;
        invalidate();
    }

    public int getPercent() {
        return percent;
    }

    public void setPercent(int percent) {
        this.percent = percent;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float strokeWidth = 70;
        float endStrokeWidth = strokeWidth + 30;

        roundCirclePaint.setAntiAlias(true);
        roundCirclePaint.setStyle(Paint.Style.STROKE);
        roundCirclePaint.setStrokeWidth(strokeWidth);
        roundCirclePaint.setColor(Color.RED);

        lightShapPaint.setAntiAlias(true);
        lightShapPaint.setStyle(Paint.Style.STROKE);
        lightShapPaint.setColor(Color.RED);

        halfCirclePaint.setAntiAlias(true);
        halfCirclePaint.setStyle(Paint.Style.STROKE);
        halfCirclePaint.setStrokeWidth(strokeWidth);
        halfCirclePaint.setColor(Color.RED);

        percentCirclePaint.setAntiAlias(true);
        percentCirclePaint.setStyle(Paint.Style.STROKE);
        percentCirclePaint.setStrokeWidth(strokeWidth);
        percentCirclePaint.setColor(Color.GREEN);

        endCirclePaint.setAntiAlias(true);
        endCirclePaint.setStyle(Paint.Style.STROKE);
        endCirclePaint.setStrokeWidth(endStrokeWidth);
        endCirclePaint.setColor(Color.RED);

        percentEndCirclePaint.setAntiAlias(true);
        percentEndCirclePaint.setStyle(Paint.Style.STROKE);
        percentEndCirclePaint.setStrokeWidth(endStrokeWidth);
        percentEndCirclePaint.setColor(Color.GREEN);

        templePaint.setAntiAlias(true);
        templePaint.setStyle(Paint.Style.FILL);
        templePaint.setColor(Color.BLUE);
        templePaint.setTextSize(endStrokeWidth);
        templePaint.setTextAlign(Paint.Align.CENTER);
        templePaint.setStrokeWidth(strokeWidth);

        statusShapPaint.setAntiAlias(true);
        statusShapPaint.setStyle(Paint.Style.FILL);
        statusShapPaint.setStrokeWidth(endStrokeWidth);
        statusShapPaint.setColor(Color.RED);

        float startX = getLeft();
        float endX = getRight();
        float startY = getTop();
        float endY = getBottom();
        float height = getHeight();
        float width = getWidth();

        float roundRadius = (endY > endX) ? (endX - startX) / 2 - strokeWidth / 2 : (endY - startY) / 2 - strokeWidth / 2;
        float roundX = width / 2;
        float roundY = height / 2;
//        画最外环的圆
//        canvas.drawCircle(roundX, roundY, roundRadius, roundCirclePaint);
//        给太阳留出显示的位置,先画相同的背景色遮盖圆环,或者直接画外环
        RectF bottomHalfCircle = new RectF(strokeWidth / 2, strokeWidth / 2, width - strokeWidth / 2, height - strokeWidth / 2);
//        canvas.drawArc(bottomHalfCircle, 110f, 320f, false, halfCirclePaint);
        RectF endHalfCircle = new RectF(strokeWidth - endStrokeWidth / 2, strokeWidth - endStrokeWidth / 2, width - strokeWidth + endStrokeWidth / 2, height - strokeWidth + endStrokeWidth / 2);

//        每一个percent对应3度
        float startAngle = 119f;
        float endI = 101;

        for (int i = 0; i < endI; i++) {
            float startItemAngle = startAngle + 3 * i;
            float spaceItemAngle = 1.0f;
            canvas.drawArc((i != 0 && i != (endI - 1)) ? bottomHalfCircle : endHalfCircle, i == (endI - 1) ? startItemAngle + 0.5f : startItemAngle, (i == 0 || i == (endI - 1)) ? spaceItemAngle - 0.5f : spaceItemAngle, false, (i != 0 && i != (endI - 1)) ? halfCirclePaint : endCirclePaint);
        }


        for (int i = 0; i < tempPercent; i++) {
            float startItemAngle = startAngle + 3 * i;
            float spaceItemAngle = 1.0f;
            canvas.drawArc((i != 0 && i != (endI - 1)) ? bottomHalfCircle : endHalfCircle, i == (endI - 1) ? startItemAngle + 0.5f : startItemAngle, (i == 0 || i == (endI - 1)) ? spaceItemAngle - 0.5f : spaceItemAngle, false, (i != 0 && i != (endI - 1)) ? percentCirclePaint : percentEndCirclePaint);
        }

//      中间温度数值
        Rect textBounds = new Rect();
        templePaint.getTextBounds(templeText, 0, templeText.length(), textBounds);
        Paint.FontMetricsInt fontMetricsInt = templePaint.getFontMetricsInt();
        float baseLine = (getMeasuredHeight() - fontMetricsInt.bottom + fontMetricsInt.top) / 2 - fontMetricsInt.top;
        canvas.drawText(tempPercent + "°", roundY, baseLine, templePaint);

//        画底部的太阳
//        先画一个圆,然后再去画光芒,简单来说就是先确认太阳的圆心,剩下的也就好做了
        float statusRadius = strokeWidth / 2;
        float statusShapX = width / 2;
        float statusShapY = height - strokeWidth;
        canvas.drawCircle(statusShapX, statusShapY, statusRadius, statusShapPaint);
//        画光芒
        float lightWidth = statusRadius - 5;
        lightShapPaint.setStrokeWidth(lightWidth);
        RectF lightShap = new RectF(statusShapX - statusRadius * 2 + lightWidth / 2, statusShapY - statusRadius * 2 + lightWidth / 2, statusShapX + statusRadius * 2 - lightWidth / 2, statusShapY + statusRadius * 2 - lightWidth / 2);


        float spaceAngle = 10f;
        float spaceItemAngle = 3.0f;
        tempLight++;
        for (int i = 0; i < 360f / spaceAngle; i++) {
            float startItemAngle = spaceAngle * i + tempLight;
            canvas.drawArc(lightShap, startItemAngle, spaceItemAngle, false, lightShapPaint);
        }
        canvas.save();
        postDelayed(refresh, 100);
        canvas.restore();

    }

    private Runnable refresh = new Runnable() {
        @Override
        public void run() {
            if (tempPercent < percent) {
                tempPercent++;
                invalidate();
            }

        }
    };
}

xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.fanyafeng.orlitedemo.activity.SpeedCircleViewActivity"
    tools:showIn="@layout/activity_speed_circle_view">

    <com.fanyafeng.orlitedemo.myview.SpeedCircleView
        android:id="@+id/view_speed_circle"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

activity

package com.fanyafeng.orlitedemo.activity;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

import com.fanyafeng.orlitedemo.R;
import com.fanyafeng.orlitedemo.myview.SpeedCircleView;

public class SpeedCircleViewActivity extends AppCompatActivity {
    private SpeedCircleView view_speed_circle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_speed_circle_view);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
        initView();
        initData();
    }

    private void initView(){
        view_speed_circle= (SpeedCircleView) findViewById(R.id.view_speed_circle);
    }

    private void initData(){
        view_speed_circle.setPercent(40);
    }

}