通过2048学习自定义view（一）

简介

在刚学安卓的时候就尝试着用TextView和LinearLayout写过一个没有动画的2048，现在自学了快半年了，想着写一个2048View来巩固一下之前学的自定义view的知识。（写这篇文章时只完成了开始部分，后面的下一篇文章再补）

在这里强烈推荐：HenCoder 的自定义view教程

本篇目标

作为自定义view，所有的绘制过程都应该在onDraw()里完成，而且应该满足各种尺寸。效果如下：

正片

几个重要的属性：（Coordinate是一个存放坐标的类下文给出）

    private int length;//view的长宽private int[][] numOfGrid = new int[4][4];//记录每一个格中的数字private Coordinate[][] coor;//坐标private int padding;//方格之间的距离

首先为了保持整个view一直是正方形，重写onMeasure()方法：

@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int widthSize = MeasureSpec.getSize(widthMeasureSpec);int heightSize = MeasureSpec.getSize(heightMeasureSpec);if (widthSize < heightSize) {length = widthSize;} else {length = heightSize;}setMeasuredDimension(length, length);//使长和宽相等，且为二者最小的那个coor = Coordinate.CreateCoordinate(length);//创建坐标，计算各个方格的坐标padding = length / 50;}

Coordinate类：

public class Coordinate {public final int X;public final int Y;public Coordinate(int y, int x) {X = x;Y = y;}//创建16个方块对应的坐标public static Coordinate[][] CreateCoordinate(int width) {Coordinate[][] res = new Coordinate[4][4];int part = width / 4;for (int i = 0; i < 4; i++) {   //j是x,i是yfor (int j = 0; j < 4; j++) {res[i][j] = new Coordinate(part * i, part * j);}}return res;}
}

之后就是重头戏onDraw()：
我的想法是自底向上一层一层地铺。首先画一个大正方形作为背景，然后换颜色画16个小的空白的带圆角的正方形（通过循环画的，用到了之前计算出来的各个方格的坐标），一个空的棋盘就画好了。

 @Overrideprotected void onDraw(Canvas canvas) {Paint paint = new Paint();paint.setColor(getResources().getColor(R.color.paint));//画背景 and 16个格子canvas.drawRect(0, 0, length, length, paint);paint.setColor(getResources().getColor(R.color.background));for (int i = 0; i < 4; i++) {for (int j = 0; j < 4; j++) {canvas.drawRoundRect(coor[i][j].X + padding, coor[i][j].Y + padding,coor[i][j].X + length / 4 - padding, coor[i][j].Y + length / 4 - padding,padding, padding, paint);}}drawGrid(canvas, paint);//根据 numOfGrid 画每一个格子}

之后便是画带数字的格子了：
首先随机生成两个数字‘2’，即令numOfGrid数组中的两个随机位置的值等于2（默认为0）。接着循环遍历一遍numOfGrid，当里面的值不为0的时候，在对应的xy坐标的位置画一个正方形（颜色与数字相关，通过color.set.get(2-2048)得到，相关代码请脑补）。

数字是用canvas.drawText()画的，这个方法与其他draw方法不一样，起始坐标是从左下角开始算的（其他的drawXXX()是从左上角开始算的），请务必注意。为了满足所有尺寸都可以，数字的size必须与总长度相关，试了几次感觉size为总长度的1/8最好。

    private void drawGrid(Canvas canvas, Paint paint) {int num = 0;for (int i = 0; i < 4; i++) {   //j是x,i是yfor (int j = 0; j < 4; j++) {num = numOfGrid[i][j];if (num == 0) continue;paint.setColor(Color.parseColor(color.set.get(num)));canvas.drawRoundRect(coor[i][j].X + padding, coor[i][j].Y + padding,coor[i][j].X + length / 4 - padding, coor[i][j].Y + length / 4 - padding,padding, padding, paint);//画数字paint.setColor(Color.parseColor(color.set.get(0)));paint.setTextSize(length / 8);//这个8是试出来的。。canvas.drawText(num + "", coor[i][j].X + length / 11, coor[i][j].Y + length / 6, paint);}}}

剩下的内容下篇再见。。

通过2048学习自定义view（一）相关推荐

自己动手，丰衣足食 —— 学习自定义View（一）
自己动手,丰衣足食 -- 学习自定义View(一) 前言我们经常在做项目的时候遇到这样的情况,客户提出需求,UI把设计稿拿出来,你发现直接用现成的开源库好像不行哎,多多少少有些不同.这时候你就会想: ...
以小米时钟为demo学习自定义view过程总结
首选感谢这位博主的分享,让我等新生有很好的范例学习 http://blog.csdn.net/qq_31715429/article/details/54668668点击打开链接点击打开链接点击打 ...
学习自定义View（二）仿58同城加载
之前用58同城app的时候看到它的加载界面不错,但是那时候还不知道如何实现~接触自定义View后,于是自己试着模仿写了一个先看效果图: 录制的GIF上有一点卡,其实在真机上面运行很流畅的~ 其实感觉 ...
Android开源中国客户端学习 (自定义View)左右滑动控件ScrollLayout
左右滑动的控件我们使用的也是非常多了,但是基本上都是使用的viewpager 等 android基础的控件,那么我们有么有考虑过查看他的源码进行定制呢?当然,如果你自我感觉非常好的话可以自己定制一个, ...
步步学习自定义View:Hencoder 精简版学习笔记(一)
自定义控件一直是让很多人包括我头疼的地方,难度较高且学习资料零碎直到我发现扔物线大神的HenCoder进阶手册. 这篇文章记录一下学习过程,以及途中经过精简的内容.便于日后查阅 1.1 绘制基础 ...
自定义view学习-手把手教你制作一个可扩展日历控件
来看看效果图先,手把手教你实现一个简易,但高扩展度的日历控件,可自由扩展成签到,单选,多选日期. 首先我们来分析实现思路.对于上图的效果,很明显是一个6x7的表格. 我们可以两个for循环控制绘制每个 ...
自定义view学习-创建自己的九宫格解锁view
先上效果图效果如上,接下来是如何实现,并没有那么快上代码,不看代码不舒服的请迅速下翻. 九宫格解锁还是比较经典的,作为学习自定义view的入门. 对于九宫格解锁,我的实现思路是这样的: 1.先在屏幕 ...
Android 自定义View中坐标点的理解学习(一)
本文主要是记录学习自定义view中看到的资料,为了方便记忆做了保存整理便于自己学习也方便其他Android开发爱好者学习,参考资料看底部链接. 一.getLocationInWindow和getLoc ...
android绘制心形_Android自定义View系列（一）——打造一个爱心进度条
写作原因:Android进阶过程中有一个绕不开的话题--自定义View.这一块是安卓程序员更好地实现功能自主化必须迈出的一步.下面这个系列博主将通过实现几个例子来认识安卓自定义View的方法.从自定义 ...
手把手带你画一个漂亮蜂窝view Android自定义view
上一篇做了一个水波纹view 不知道大家有没有动手试试呢点击打开链接这个效果做起来好像没什么意义,如果不加监听回调图片就能直接替代.写这篇博客的目的是锻炼一下思维能力,以更好的面多各种自定义vi ...

通过2048学习自定义view（一）

简介

本篇目标

正片

通过2048学习自定义view（一）相关推荐

最新文章

热门文章