零、前言

一开始也是突发奇想，感觉对安卓的绘图了解比较深了，何不画画数据结构呢

演示操作的项目文件已经在Github开源了，大家可以下载来自己玩玩，想要研究或完善都很欢迎

这个项目以及下面几篇文章是近几天的成果，相信对认识数据结构的新手应该会有很大的帮助

本系列测试了吾的能力(绘图能力，分析能力，表述能力，统筹能力)可以说对我有很多的益处

毕竟要视图呈现，关于结构的每一个细小点都不能马虎，也不再畏惧debug(反而喜欢上了)

bug是coder的家常便饭,debug便是筷子，吃完了，饭没了，人饱了，项目便完成了

复制代码

本系列后续更新链接合集：(动态更新)

数组表

表结构的常规操作

数组的扩容与缩容

单链表

双链表:

栈

队列

数组实现普通队列：

蓝色区域是数组看见：初始化四个空间，不够再扩容，空闲太多再缩容

链表实现普通队列：

二分搜索树

一、我与数据结构：

1.说说我对数据结构的理解吧：

1---数据结构=数据+结构：

2---说到结构，我第一反应就是生物的骨架，而数据则是附着在骨架上的躯体。

3---躯体外显，骨架内隐，骨架的行为在躯体上表现。很符合数据与结构的关系。

4---简而言之，我认为结构是数据的载体，数据是结构行为的体现。

5---血肉大同小异，但骨骼千差万别，有的灵巧娇小，有的笨重硕大，但各有千秋。

2.总结与展望：我与数据结构的两次大战

第一次接触数据结构是在学编程初期，可谓完败,内心倍受摧残，从而敬而远之

第二次接触数据结构是在前几个月，原因是感觉编程的境界提升很多，数据结构这个瓶颈早晚还是要过的

便决定潜心研究两个星期，感觉还不错，可以说平分秋色，收获颇多，虽然过深的知识我也只能浅尝辄止。

这次是第三次对数据结构的大战，基于Android的View来显示数据结构，让它的神秘无所遁藏。

就我刚写完数组篇来讲，确实对我的思维和分析有很大的考验，对于层次分解也更清晰，

常量的价值、监听的使用，以及接口的鬼斧神工还有泛型的使用(泛型包泛型我也是佩服自己)都理解得更深了

复制代码

项目包的分类

总体的思路

二、本文是干嘛的(开场篇当然不能太low)

既然决定对战数据结构，那擂台便必不可少，Android的View就是擂台。本篇解决擂台的问题。

本系列每种数据结构将分为两篇：数据结构篇和视图篇，如果你只偏爱其中一种，自选观看(数据结构接口与java基本保持一致)

本篇会解决数组、单链表、双链表、二叉树、红黑树的单体绘制，有什么视觉方面的想法欢迎留言。

基本样子大概就是下图了：

三、下面来绘制一下各种数据结构的单体

以下是安卓原生绘图结果，也是本篇的重点：

0.统一常量管理类

/**

* 作者：张风捷特烈

* 时间：2018/11/21 0021:14:21

* 邮箱：1981462002@qq.com

* 说明：统一常量管理类

*/

public class Cons {

public static final int BOX_HEIGHT = 100;//一个数组盒子的高

public static final int BOX_WIDTH = 200;//一个数组盒子的宽

public static final int LINK_LEN = 100;//链表长度

public static final int ARROW_DX = 20;//链表箭头

public static final int BOX_RADIUS = 10;//盒子圆角

public static final int FONT_SIZE = 40;//数组文字字号

public static final int BST_RADIUS = 50;//二叉树文字字号

}

复制代码

1.数组单体的绘制

控制点1,2重合了，你也可以用二次的贝塞尔曲线

private void arrayView(Canvas canvas) {

//画圆角矩形没什么好说的

canvas.drawRoundRect(

0, 0, Cons.BOX_WIDTH, Cons.BOX_HEIGHT,

Cons.BOX_RADIUS, Cons.BOX_RADIUS, mPaint);

//绘制贝塞尔弧线

mPath.moveTo(0, 0);

mPath.rCubicTo(

Cons.BOX_WIDTH / 2, Cons.BOX_HEIGHT / 2,//控制点1

Cons.BOX_WIDTH / 2, Cons.BOX_HEIGHT / 2,//控制点2

Cons.BOX_WIDTH, 0);//终点

canvas.drawPath(mPath, mPathPaint);

//绘制文字没什么好说的

canvas.drawText("0",Cons.BOX_WIDTH / 2, 3 * 10, mDataPaint);

canvas.drawText("toly",

0 + Cons.BOX_WIDTH / 2, 0 + Cons.BOX_HEIGHT / 2 + 3 * 10, mDataPaint);

}

复制代码

2.单链表单体的绘制：

private void singleLink(Canvas canvas) {

//画圆角矩形没什么好说的

canvas.drawRoundRect(

0, 0, Cons.BOX_WIDTH, Cons.BOX_HEIGHT,

Cons.BOX_RADIUS, Cons.BOX_RADIUS, mPaint);

//画路径

mPath.rCubicTo(

Cons.BOX_WIDTH / 2, Cons.BOX_HEIGHT / 2,

Cons.BOX_WIDTH / 2, Cons.BOX_HEIGHT / 2,

Cons.BOX_WIDTH, 0);

mPath.rLineTo(0, Cons.BOX_HEIGHT / 2f);//往下画线走半高

mPath.rLineTo(Cons.LINK_LEN, 0);//往左画线走线长

mPath.rLineTo(-Cons.ARROW_DX, -Cons.ARROW_DX);//画箭头

canvas.drawPath(mPath, mPathPaint);

//绘制文字没什么好说的

canvas.drawText("0", Cons.BOX_WIDTH / 2, 3 * 10, mDataPaint);

canvas.drawText("toly",

0 + Cons.BOX_WIDTH / 2, 0 + Cons.BOX_HEIGHT / 2 + 3 * 10, mDataPaint);

}

复制代码

3.双链表单体的绘制：

private void DoubleLink(Canvas canvas) {

//画圆角矩形没什么好说的

canvas.drawRoundRect(

0, 0, Cons.BOX_WIDTH, Cons.BOX_HEIGHT,

Cons.BOX_RADIUS, Cons.BOX_RADIUS, mPaint);

//画路径

mPath.rCubicTo(

Cons.BOX_WIDTH / 2, Cons.BOX_HEIGHT / 2,

Cons.BOX_WIDTH / 2, Cons.BOX_HEIGHT / 2,

Cons.BOX_WIDTH, 0);

mPath.lineTo(Cons.BOX_WIDTH, Cons.BOX_HEIGHT / 2.2f);

mPath.rLineTo(Cons.LINK_LEN, 0);

mPath.rLineTo(-Cons.ARROW_DX, -Cons.ARROW_DX);

mPath.moveTo(0, 0);

mPath.rLineTo(0, Cons.BOX_HEIGHT / 1.2f);

mPath.rLineTo(-Cons.LINK_LEN - Cons.ARROW_DX, 0);

mPath.rLineTo(Cons.ARROW_DX, Cons.ARROW_DX);

canvas.drawPath(mPath, mPathPaint);

//绘制文字没什么好说的

canvas.drawText("0",

Cons.BOX_WIDTH / 2,

3 * 10, mDataPaint);

canvas.drawText("toly",

0 + Cons.BOX_WIDTH / 2,

0 + Cons.BOX_HEIGHT / 2 + 3 * 10, mDataPaint);

}

复制代码

4.二叉树单体的绘制

private void BST(Canvas canvas) {

//先画线,圆将先盖住

mPath.moveTo(0 + Cons.BST_RADIUS / 2, 0 + Cons.BST_RADIUS / 2);

mPath.rLineTo(150, 150);

mPath.moveTo(0 - Cons.BST_RADIUS / 2, 0 + Cons.BST_RADIUS / 2);

mPath.rLineTo(-150, 150);

canvas.drawPath(mPath, mPathPaint);

//父节点绘制

canvas.drawCircle(0, 0, Cons.BST_RADIUS, mPaint);

canvas.drawText("0", 0, 10, mDataPaint);

//绘制子节点

int offsetX = 150;//子圆心偏移X

int offsetY = 150;//子圆心偏移Y

canvas.drawCircle(0 - offsetX, 0 + offsetY, Cons.BST_RADIUS, mPaint);

canvas.drawText("null", 0 - offsetX, 10 + offsetY, mDataPaint);

canvas.drawCircle(offsetX, offsetY, Cons.BST_RADIUS, mPaint);

canvas.drawText("null", offsetX, 10 + offsetY, mDataPaint);

}

复制代码

5.红黑树的画法

private void bAr(Canvas canvas) {

mPath.moveTo(0 + Cons.BST_RADIUS / 2, 0 + Cons.BST_RADIUS / 2);

mPath.rLineTo(150, 150);

mPath.moveTo(0 - Cons.BST_RADIUS / 2, 0 + Cons.BST_RADIUS / 2);

mPath.rLineTo(-150, 150);

canvas.drawPath(mPath, mPathPaint);

mPaint.setColor(Color.BLACK);

canvas.drawCircle(0, 0, Cons.BST_RADIUS, mPaint);

canvas.drawText("50", 0, 10, mDataPaint);

//绘制子节点

int offsetX = 150;//子圆心偏移X

int offsetY = 150;//子圆心偏移Y

mPaint.setColor(Color.RED);

canvas.drawCircle(0 - offsetX, 0 + offsetY, Cons.BST_RADIUS, mPaint);

canvas.drawText("35", 0 - offsetX, 10 + offsetY, mDataPaint);

mPaint.setColor(Color.BLACK);

canvas.drawCircle(offsetX, offsetY, Cons.BST_RADIUS, mPaint);

canvas.drawText("78", offsetX, 10 + offsetY, mDataPaint);

}

复制代码

四、其他初始：

1.可显示出来的基类

所有数据结构绘制单体的父类

/**

* 作者：张风捷特烈

* 时间：2018/11/21 0021:8:50

* 邮箱：1981462002@qq.com

* 说明：可显示出来的基本条件

*/

public class Viewable {

public float x;//单体的x坐标

public float y;//单体的y坐标

public int color = 0xff43A3FA;//单体的颜色

public float vX;//单体的水平速度

public float vY;//单体的数值速度

public Viewable() {

}

public Viewable(float x, float y) {

this.x = x;

this.y = y;

}

}

复制代码

2.控操作接口

/**

* 作者：张风捷特烈

* 时间：2018/11/21 0021:10:17

* 邮箱：1981462002@qq.com

* 说明：控操作接口

*/

public interface OnCtrlClickListener {

void onAdd(T view);

void onRemove(T view);

void onSet(T view);

void onFind(T view);

}

复制代码

后记：捷文规范

1.本文成长记录及勘误表

2.更多关于我

笔名QQ微信爱好张风捷特烈1981462002zdl1994328语言

3.声明

1----本文由张风捷特烈原创,转载请注明

2----欢迎广大编程爱好者共同交流

3----个人能力有限，如有不正之处欢迎大家批评指证，必定虚心改正

4----看到这里，我在此感谢你的喜欢与支持