Android 高仿景丰数字播放器UI，高仿麦景图表UI

2022-07-27 20:01:35

WatchView.java

package com.maijintu.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

import com.maijintu.R;

/**
 * Created by root on 13-4-19.
 */

public class WatchView extends View {
    private final String TAG = "WatchView";

    private Paint paint;
    private Paint textPaint;

    private int mWidth;
    private int mHeight;

    float speed = 0;
    float radius;
    //    private Bitmap back;
    private Bitmap center;
    private Bitmap arrow;
    private int left;
    private int top;

    public  WatchView(Context context) {
        this(context, null, 0);
    }

    public  WatchView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public  WatchView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyWatch, defStyleAttr, 0);
        speed = a.getInt(R.styleable.MyWatch_speed, 0);

        paint = new Paint();
        textPaint = new Paint();
        radius = a.getDimension(R.styleable.MyWatch_radius, 90);
        center = BitmapFactory.decodeResource(getResources(), R.drawable.icon_watch_center);
        arrow = BitmapFactory.decodeResource(getResources(), R.drawable.icon_watch_arrow);
        a.recycle();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        if (widthMode == MeasureSpec.EXACTLY) {//获得view的总宽度
            mWidth = widthSize;
        } else {
            float needWidth = radius * 2+8;
            int desired = (int) (getPaddingLeft() + needWidth + getPaddingRight());
            mWidth = desired;
        }

        if (heightMode == MeasureSpec.EXACTLY) {//获得view的总高度
            mHeight = heightSize;
        } else {
            float needWidth = radius+24;
            int desired = (int) (getPaddingTop() + needWidth + getPaddingBottom());
            mHeight = desired;
        }
        //设置测量尺寸
        setMeasuredDimension(mWidth, mHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        paint.setStrokeWidth(10);
        paint.setColor(getResources().getColor(R.color.watchBlue));
        paint.setStyle(Paint.Style.STROKE);
        //抗锯齿
        paint.setAntiAlias(true);

        //绘制表盘
      /*  RectF oval1 = new RectF(120, 120, radius * 2, radius * 2);// 设置个新的长方形，扫描测量
        canvas.drawArc(oval1, -97, 12, false, paint);*/
        //绘制指针
        paint.setStrokeWidth(3);
        //paint.setColor(Color.WHITE);
        paint.setColor(getResources().getColor(android.R.color.primary_text_light));
        float arc = (float) (speed%109);

        canvas.save(); //记录画布状态
        //canvas.rotate(-97+arc, mWidth / 2, radius);

        if(speed>100) {
            speed = 100;
        }
        Log.i(TAG, "speed:"+speed);
        canvas.rotate(-36+speed, mWidth / 2, radius);
        canvas.drawLine(mWidth / 2, 20, mWidth / 2, radius, paint);//画指针
        canvas.restore();

        //绘制圆心
        // 计算左边位置
       /* left = mWidth / 2 - center.getWidth() / 2;
        // 计算上边位置
        top = mHeight/2 - center.getHeight();
        canvas.drawBitmap(center, left, top, paint);*/

        //按照百分比绘制刻度
        //绘制小刻度
       /*canvas.save(); //记录画布状态
        canvas.rotate(-97, mWidth / 2, radius);
        float rAngle1 = (float) 180.0 / 70;
        //canvas.drawLine(mWidth / 2, 3, mWidth / 2, 40, paint);//画刻度线
        canvas.drawLine(120, 120, 120, 122, paint);//画刻度线

        for (int i = 0; i < 118; i++) {
            canvas.rotate(rAngle1, mWidth / 2, radius);
            canvas.drawLine(mWidth / 2, 10, mWidth / 2, 30, paint);//画刻度线
            //            canvas.drawText("" + i * 10, getWidth() / 2 - mArcWidth * 2, 40, paintouter_Num);//画刻度

        }
        canvas.restore();

        //绘制大刻度和度数
        paint.setColor(getResources().getColor(R.color.watchBlue));

        textPaint.setColor(Color.WHITE);
        textPaint.setTextSize(30);
        textPaint.setTextAlign(Paint.Align.CENTER);
        //抗锯齿
        textPaint.setAntiAlias(true);

        canvas.save(); //记录画布状态
        canvas.rotate(-90, mWidth / 2, radius);
        float rAngle = (float) 180 / 14;
        canvas.drawLine(mWidth / 2, 3, mWidth / 2, 40, paint);//画刻度线
        canvas.drawLine(120, 120, 120, 122, paint);//画刻度线
        canvas.drawText("" + 0, mWidth / 2, 75, textPaint);//画刻度
        for (int i = 0; i < 14; i++) {
            canvas.rotate(rAngle, mWidth / 2, radius);
            canvas.drawLine(mWidth / 2, 4, mWidth / 2, 40, paint);//画刻度线
            canvas.drawText("" + (i+1)* 10, mWidth / 2, 75, textPaint);//画刻度

        }
        canvas.restore();

        //中心数字
        textPaint.setStrokeWidth(4);
        textPaint.setTextSize(90);
*/
        //canvas.drawText(speed % 140 + "", mWidth / 2, mHeight * 2 / 3, textPaint);

    }

    public void setSpeed(float speed) {
        this.speed = speed;
        invalidate();
    }
}

使用了两个小图片,后面一个是透明图片，也就是摆动指针图片：

图片一：图片2：

/values/attrs.xml

 
<declare-styleable name="MyWatch">
        <attr name="speed" format="integer" />
        <attr name="radius" />
    </declare-styleable>

在Activity中：

WatchView watchView = (WatchView)findViewById(R.id.watch_view);

watchView.setSpeed(speed);//输入指针摆动角度数据

xml布局文件：

<com.maijintu.view.WatchView
    android:id="@+id/watch_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    app:radius="396dp" />

如果你希望指针不以表中心位圆心摆动,将修改WatchView 和布局文件如下：

1,修改WatchView,java,替换onDraw()方法：

 @Override
    protected void onDraw(Canvas canvas) {
        paint.setStrokeWidth(10);
        paint.setColor(getResources().getColor(R.color.watchBlue));
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
        paint.setStrokeWidth(3);
        paint.setColor(getResources().getColor(android.R.color.primary_text_light));
        float arc = (float) (speed % 109);
        canvas.save();
        if (speed > 112) {
            speed = 112;
        }
        canvas.rotate(-58 + speed, mWidth / 2, radius);
        canvas.drawLine(mWidth / 2, 20, mWidth / 2, radius, paint);
        canvas.restore();

//绘制圆心
        // 计算左边位置
       /* left = mWidth / 2 - center.getWidth() / 2;
        // 计算上边位置
        top = mHeight/2 - center.getHeight();
        canvas.drawBitmap(center, left, top, paint);*/

        //按照百分比绘制刻度
        //绘制小刻度
       /*canvas.save(); //记录画布状态
        canvas.rotate(-97, mWidth / 2, radius);
        float rAngle1 = (float) 180.0 / 70;
        //canvas.drawLine(mWidth / 2, 3, mWidth / 2, 40, paint);//画刻度线
        canvas.drawLine(120, 120, 120, 122, paint);//画刻度线

        for (int i = 0; i < 118; i++) {
            canvas.rotate(rAngle1, mWidth / 2, radius);
            canvas.drawLine(mWidth / 2, 10, mWidth / 2, 30, paint);//画刻度线
            //            canvas.drawText("" + i * 10, getWidth() / 2 - mArcWidth * 2, 40, paintouter_Num);//画刻度

        }
        canvas.restore();

        //绘制大刻度和度数
        paint.setColor(getResources().getColor(R.color.watchBlue));

        textPaint.setColor(Color.WHITE);
        textPaint.setTextSize(30);
        textPaint.setTextAlign(Paint.Align.CENTER);
        //抗锯齿
        textPaint.setAntiAlias(true);

        canvas.save(); //记录画布状态
        canvas.rotate(-90, mWidth / 2, radius);
        float rAngle = (float) 180 / 14;
        canvas.drawLine(mWidth / 2, 3, mWidth / 2, 40, paint);//画刻度线
        canvas.drawLine(120, 120, 120, 122, paint);//画刻度线
        canvas.drawText("" + 0, mWidth / 2, 75, textPaint);//画刻度
        for (int i = 0; i < 14; i++) {
            canvas.rotate(rAngle, mWidth / 2, radius);
            canvas.drawLine(mWidth / 2, 4, mWidth / 2, 40, paint);//画刻度线
            canvas.drawText("" + (i+1)* 10, mWidth / 2, 75, textPaint);//画刻度

        }
        canvas.restore();

        //中心数字
        textPaint.setStrokeWidth(4);
        textPaint.setTextSize(90);
*/
        //canvas.drawText(speed % 140 + "", mWidth / 2, mHeight * 2 / 3, textPaint);

2，修改Activity 布局文件：

 <com.maijintu.view.WatchView
            android:id="@+id/watch_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:clickable="true"
            android:focusableInTouchMode="true"
            app:radius="396dp" />

有其它疑问或需求，请评论留言和留邮箱.

Android 高仿景丰数字播放器UI，高仿麦景图表UI

码农公寓

相关文章