android 进阶之UI

今天又学到了一个绘制时钟效果的，哈哈，下面就贴下效果图：

大致效果是有了。，全是用代码完成的。不是图片哈。

接下来就把代码贴出来：

1. 我自定义的View MyView.java代码：

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

/**
 * Created by Administrator on 2016/6/10.
 */
public class MyView extends View {
    private Paint paintCircle;
    private Paint paintLine;
    private Paint paintHour;
    private Paint paintMin;

    public MyView(Context context) {
        super(context);
        initPaintCircle();
        initPaintLine();
        initPaintMin();
        initPaintHour();

    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaintCircle();
        initPaintLine();
        initPaintMin();
        initPaintHour();

    }

    /**
     * 初始化圆的画笔
     */
   public void  initPaintCircle(){
       paintCircle=new Paint();
       paintCircle.setStyle(Paint.Style.STROKE);
       paintCircle.setStrokeWidth(5);
       paintCircle.setAntiAlias(true);
    }
    /**
     * 初始化画笔的线条
     */
    public void  initPaintLine(){
        paintLine=new Paint();
        paintLine.setStyle(Paint.Style.STROKE);
        paintLine.setStrokeWidth(5);
        paintLine.setTextSize(20);
    }
    /**
     * 初始化画时 的画笔
     */
    public void  initPaintHour(){
        paintHour=new Paint();
        paintHour.setStyle(Paint.Style.STROKE);
        paintHour.setStrokeWidth(20);
        paintHour.setAntiAlias(true);
    }
    /**
     * 初始化画分 的画笔
     */
    public void  initPaintMin(){
        paintMin=new Paint();
        paintMin.setStyle(Paint.Style.STROKE);
        paintMin.setStrokeWidth(10);
        paintMin.setAntiAlias(true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int mWidth=getWidth();
        int mHeight=getHeight();
        super.onDraw(canvas);
        canvas.drawCircle(mWidth/2,mHeight/2,mWidth/2,paintCircle);
        canvas.save();
        for (int i=0;i<24;i++){
            if (i==0||i==6||i==12||i==18){
                canvas.drawLine(mWidth/2,mHeight/2-mWidth/2
                ,mWidth/2,(mHeight/2-mWidth/2)+60,paintLine);
                String degree=String.valueOf(i);
                canvas.drawText(degree,mWidth/2-paintLine.measureText(degree)/2
                ,(mHeight/2-mWidth/2)+90,paintLine);

            }else {
                paintLine.setStrokeWidth(3);
                paintLine.setTextSize(14);
                canvas.drawLine(mWidth/2,mHeight/2-mWidth/2
                        ,mWidth/2,(mHeight/2-mWidth/2)+30,paintLine);
                String degree=String.valueOf(i);
                canvas.drawText(degree,mWidth/2-paintLine.measureText(degree)/2
                        ,(mHeight/2-mWidth/2)+60,paintLine);

            }
            canvas.rotate(15,mWidth/2,mHeight/2);
        }
        canvas.translate(mWidth/2,mHeight/2);
        canvas.drawLine(0,0,100,100,paintHour);
        canvas.drawLine(0,0,100,200,paintMin);
        canvas.restore();

    }
}

1. 然后再activity_main.xml去
   引用自己定义的view

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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"
    tools:context="com.example.edu.forth.MainActivity">

    <com.example.edu.forth.MyView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

</LinearLayout>

总结：其实 绘图本身并不难，只是坐标关系不好去弄。在安卓上绘图其实跟我们平常在纸上画图差不多。