android绘制时钟，canvas学习

最新推荐文章于 2022-05-28 22:58:50 发布

Li_water

最新推荐文章于 2022-05-28 22:58:50 发布

阅读量245

点赞数 1

分类专栏：学习文章标签： android canvas

本文链接：https://blog.youkuaiyun.com/Li_water/article/details/115463126

版权

学习专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍如何在Android中创建一个自定义View，该View继承自View类，实现了显示时钟并允许外部设置时间的功能。通过重写onDraw()方法，使用Canvas进行绘制，包括表盘、时针、分针等元素，并提供了setSHIandFEN()方法供外部调用来更新时间。示例代码展示了如何在XML布局中添加这个自定义View，并在Button点击事件中更新时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义View，新建ClickView类继承View


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import androidx.annotation.Nullable;

public class ClickView extends View {
    private Paint paint; //表盘外框
    private Paint paint1_1; //表中心
    private Paint paint2; //表数字
    private Paint paint3;//表时针
    private Paint paint4;//表分针
    private Integer SHI = 0 ;//时
    private Integer FEN = 0;//分
    private Integer lining = 100; //表盘半径
    private Integer lining_sf = 25; //表内径距离

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

    public ClickView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public ClickView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public ClickView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
    //外部方法，设置时间并刷新
    public void setSHIandFEN(Integer a,Integer b){
        this.SHI = a;
        this.FEN = b;
        //刷新
        invalidate();
    }
    //绘制
    public void onDraw(Canvas canvas){
        super.onDraw(canvas);
        //初始化
        ini();
        //画布移动到中心点 画表盘
        canvas.translate(getWidth()/2,getHeight()/2);
        canvas.drawCircle(0,0,lining,paint);
        draw_ini(canvas);

        //画时针，分针
        setFen(FEN,canvas);
        setShi(SHI,FEN,canvas);
        //画空心表中心
//        canvas.drawOval(new RectF(-5,-5,5,5),paint);
        //画实心表中心
        paint1_1 = new Paint();
        paint1_1.setColor(Color.RED);
        paint1_1.setAntiAlias(true);
        paint1_1.setStyle(Paint.Style.FILL_AND_STROKE);
        paint1_1.setStrokeWidth(3);
        canvas.drawCircle(0,0,10,paint1_1);




    }
    //初始化笔刷
    protected void ini(){
        paint = new Paint();
        paint.setColor(Color.RED);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(3);
        paint2 = new Paint();
        paint2.setColor(Color.BLUE);
        paint2.setAntiAlias(true);
        paint2.setStyle(Paint.Style.STROKE);
        paint2.setStrokeWidth(1);
        paint3 = new Paint();
        paint3.setColor(Color.GREEN);
        paint2.setAntiAlias(true);
        paint3.setStyle(Paint.Style.STROKE);
        paint3.setStrokeWidth(3);
        paint4 = new Paint();
        paint4.setColor(Color.GREEN);
        paint4.setAntiAlias(true);
        paint4.setStyle(Paint.Style.STROKE);
        paint4.setStrokeWidth(2);
    }
    //画表盘 ，通过旋转画布实现
    protected void draw_ini(Canvas canvas){
        canvas.rotate(180,0,0);
        for(int i=0;i<60;i++){
            if(i%5==0){
                canvas.drawLine(0,lining,0,lining-12,paint);
                if(i==0){
                    canvas.drawText(String.valueOf(12),-4f, lining+12f, paint2);
                }else {
                    canvas.drawText(String.valueOf(i/5),-4f, lining+12f, paint2);
                }
            }else {
                canvas.drawLine(0,lining,0,lining-6,paint);
            }
            canvas.rotate(6,0,0);
        }

    }
    //画时针分针，通过旋转画布实现
    private void setShi(Integer SHI,Integer FEN,Canvas canvas){
        canvas.save();
        if(SHI>=12){SHI-=12;}
        if(SHI==0||SHI==12){
            canvas.drawLine(0,0,0,lining-lining_sf-20,paint3);
        }else {
            Integer degree = SHI*30+FEN/2;
            canvas.rotate(degree,0,0);
            canvas.drawLine(0,0,0,lining-lining_sf-20,paint3);
        }
        canvas.restore();
    }
    private void setFen(Integer FEN,Canvas canvas){
        canvas.save();
        if(FEN==0||FEN==60){
            canvas.drawLine(0,0,0,lining-lining_sf,paint4);
        }else {
            Integer degree = FEN*6;
            canvas.rotate(degree,0,0);
            canvas.drawLine(0,0,0,lining-lining_sf,paint4);
        }
        canvas.restore();
    }

}

外部调用
xml文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    >
    //此处的包名按自己的来
<com.sharetv.sharetvhotel.ClickView
                        android:id="@+id/click1"
                        android:layout_width="300dp"
                        android:layout_height="300dp"
                        android:layout_marginRight="50dp"/>
 <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/a1"/>
    </LinearLayout>

  Button a1 = findViewById(R.id.a1);
 a1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //外部调用
                ClickView view = findViewById(R.id.a9);
                view.setSHIandFEN(10,51);
            }
        });

在这里插入图片描述