Android_Mars_数独开发03

本文内容来自千锋Mars老师的视频，看完后，整理作为学习笔记。

1、绘制九宫格。

九宫格游戏，是由一个大的九宫格，9个小的九宫格组成。整个界面有9个小小九宫格，每个小九宫格有九个小格子，因此总共有81个格子。

（1）定义画笔：

		//定义画笔对象-->绘制格子线条
		Paint darkPaint = new Paint();
		darkPaint.setColor(getResources().getColor(R.color.shudu_dark));
		
		Paint hilitePaint = new Paint();
		hilitePaint.setColor(getResources().getColor(R.color.shudu_hilite));
		
		Paint lightPaint = new Paint();
		lightPaint.setColor(getResources().getColor(R.color.shudu_light));
		

（2）绘制横线和纵线：

		//绘制九宫格
		for(int i = 0; i<9; i++)
		{
			//绘制横线
			canvas.drawLine(0, i*height, getWidth(), i*height, lightPaint);
			canvas.drawLine(0, i*height+1, getWidth(), i*height+1, hilitePaint);
			
			//绘制纵线
			canvas.drawLine(i*width, 0, i*width, getHeight(), lightPaint);
			canvas.drawLine(i*width+1, 0, i*width+1, getHeight(), hilitePaint);
		}

（3）绘制四根比较醒目的线：

	
		//这个for循环是绘制四根醒目的线
		for(int i = 0; i<9; i++)
		{
			if(i % 3 != 0)
			{
				continue;
			}
			
			//绘制横线
			canvas.drawLine(0, i*height, getWidth(), i*height, darkPaint);
			canvas.drawLine(0, i*height+1, getWidth(), i*height+1, hilitePaint);
			
			//绘制纵线
			canvas.drawLine(i*width, 0, i*width, getHeight(), darkPaint);
			canvas.drawLine(i*width+1, 0, i*width+1, getHeight(), hilitePaint);
		}
		

2、给九宫格绘制数字：

		//绘制数字
		Paint numberPaint = new Paint();
		//设置文字的一系列属性
		numberPaint.setColor(Color.BLACK);
		numberPaint.setStyle(Paint.Style.STROKE);
		numberPaint.setTextSize(height*0.75f);
		numberPaint.setTextAlign(Paint.Align.CENTER);
		
		
		FontMetrics fontMetrics = numberPaint.getFontMetrics();
		float x = width/2;
		float y = height/2 - (fontMetrics.ascent+fontMetrics.descent)/2;
		
		canvas.drawText("1", 4*width+x, y, numberPaint);

在上面的代码中：

		FontMetrics fontMetrics = numberPaint.getFontMetrics();
		float x = width/2;
		float y = height/2 - (fontMetrics.ascent+fontMetrics.descent)/2;

主要是用来使数字在格子中居中，在英文字母的抒写中，具有一个basic line。下面我用一张图，来详细讲解下：

3、整体的代码为：

package com.mars.demo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.view.View;

public class MyView extends View
{
	//定义单元格的宽和高
	public float width;
	public float height;
	
	public MyView(Context context)
	{
		super(context);
		// TODO Auto-generated constructor stub
	}

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh)
	{
		// TODO Auto-generated method stub
		this.width = w/9f;
		this.height = h/9f;
		super.onSizeChanged(w, h, oldw, oldh);
	}
	
	
	
	@Override
	protected void onDraw(Canvas canvas)
	{
		//定义画笔对象-->绘制背景
		Paint paint = new Paint();
		//设置画笔的颜色
		paint.setColor(getResources().getColor(R.color.shudu_background));
		//绘制手机屏幕背景色
		canvas.drawRect(0, 0, getWidth(), getHeight(), paint);
		
		
		//定义画笔对象-->绘制格子线条
		Paint darkPaint = new Paint();
		darkPaint.setColor(getResources().getColor(R.color.shudu_dark));
		
		Paint hilitePaint = new Paint();
		hilitePaint.setColor(getResources().getColor(R.color.shudu_hilite));
		
		Paint lightPaint = new Paint();
		lightPaint.setColor(getResources().getColor(R.color.shudu_light));
		
		//绘制九宫格
		for(int i = 0; i<9; i++)
		{
			//绘制横线
			canvas.drawLine(0, i*height, getWidth(), i*height, lightPaint);
			canvas.drawLine(0, i*height+1, getWidth(), i*height+1, hilitePaint);
			
			//绘制纵线
			canvas.drawLine(i*width, 0, i*width, getHeight(), lightPaint);
			canvas.drawLine(i*width+1, 0, i*width+1, getHeight(), hilitePaint);
		}
		
		//这个for循环是绘制四根醒目的线
		for(int i = 0; i<9; i++)
		{
			if(i % 3 != 0)
			{
				continue;
			}
			
			//绘制横线
			canvas.drawLine(0, i*height, getWidth(), i*height, darkPaint);
			canvas.drawLine(0, i*height+1, getWidth(), i*height+1, hilitePaint);
			
			//绘制纵线
			canvas.drawLine(i*width, 0, i*width, getHeight(), darkPaint);
			canvas.drawLine(i*width+1, 0, i*width+1, getHeight(), hilitePaint);
		}
		
		
		//绘制数字
		Paint numberPaint = new Paint();
		//设置文字的一系列属性
		numberPaint.setColor(Color.BLACK);
		numberPaint.setStyle(Paint.Style.STROKE);
		numberPaint.setTextSize(height*0.75f);
		numberPaint.setTextAlign(Paint.Align.CENTER);
		
		
		FontMetrics fontMetrics = numberPaint.getFontMetrics();
		float x = width/2;
		float y = height/2 - (fontMetrics.ascent+fontMetrics.descent)/2;
		
		canvas.drawText("1", 4*width+x, y, numberPaint);
		//canvas.drawLine(0, y, getWidth(), y, numberPaint);
		
		super.onDraw(canvas);
	}

	
}

效果图如下：