零、前言：

1.本文的姊妹篇：看得见的数据结构Android版之表的数组实现(数据结构篇)
2.希望你可以和我在Github一同见证：DS4Android的诞生与成长，欢迎star
3.激动人心的时刻到了，要画图了，铅笔、草稿纸、饮料、花生米准备好，现在开始了

先留图镇楼：

表结构的常规操作

数组的扩容与缩容

---

一、先绘制操作界面：

1.自定义View:ArrayView

准备一个主画笔和主路径并确定一些常量
然后用analyze包绘制封装好的网格和坐标系以便查看

/*** 作者：张风捷特烈<br/>* 时间：2018/11/21 0021:8:01<br/>* 邮箱：1981462002@qq.com<br/>* 说明：数组实现表结构---测试视图*/
public class ArrayView<E> extends View {private Point mCoo = new Point(200, 150);//坐标系private Picture mCooPicture;//坐标系canvas元件private Picture mGridPicture;//网格canvas元件private Path mPath;//主路径private Paint mPaint;//主画笔private static final int OFFSET_X = 10;//X空隙private static final int OFFSET_Y = 60;//Y空隙private static final int OFFSET_OF_TXT_Y = 10;//文字的偏移private static final int BOX_RADIUS = 10;//数组盒子的圆角public ArrayView(Context context) {this(context, null);}public ArrayView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);init();//初始化}private void init() {//初始化主画笔mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);mPaint.setColor(Color.BLUE);mPaint.setStrokeWidth(5);mPaint.setTextAlign(Paint.Align.CENTER);mPaint.setTextSize(50);//初始化主路径mPath = new Path();//辅助线mCooPicture = HelpDraw.getCoo(getContext(), mCoo,false);//坐标系：无文字mGridPicture = HelpDraw.getGrid(getContext());//网格}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);HelpDraw.draw(canvas, mGridPicture);canvas.save();canvas.translate(mCoo.x, mCoo.y);//画布移到坐标原点//TODO drawcanvas.restore();HelpDraw.draw(canvas, mCooPicture);}
}

---

2.把后面要用的画笔准备一下：

private void init() {//初始化主画笔mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);mPaint.setColor(Color.BLUE);mPaint.setStrokeWidth(5);mPaint.setTextAlign(Paint.Align.CENTER);mPaint.setTextSize(50);//初始化主路径mPath = new Path();//初始化文字画笔mTxtPaint = new Paint(Paint.ANTI_ALIAS_FLAG);mTxtPaint.setColor(Color.WHITE);mTxtPaint.setTextAlign(Paint.Align.CENTER);mTxtPaint.setTextSize(40);//初始化路径画笔mPathPaint = new Paint(Paint.ANTI_ALIAS_FLAG);mPathPaint.setColor(Color.GRAY);mPathPaint.setStyle(Paint.Style.STROKE);mCooPicture = HelpDraw.getCoo(getContext(), mCoo,false);mGridPicture = HelpDraw.getGrid(getContext());//初始化圆球按钮画笔mCtrlPaint = new Paint(Paint.ANTI_ALIAS_FLAG);mCtrlPaint.setColor(Color.RED);mCtrlPaint.setTextAlign(Paint.Align.CENTER);mCtrlPaint.setTextSize(30);
}

3.准备小球的信息

你也可以将这些信息封装成一个bean,这里为了bean太多容易混淆，用几个数组记录信息

    private static final Point[] CTRL_POS = new Point[]{//控制按钮的点位new Point(-100, 100),//添加new Point(-100, 300),//更新new Point(-100, 500),//查看new Point(-100, 700),//删除new Point(700, -70),//定点添加new Point(700 + 300, -70),//定值查询new Point(700 + 300 * 2, -70),//定点删除new Point(700 + 300 * 3, -70),//清除};private static int[] CTRL_COLOR = new int[]{//控制按钮的颜色0xff1EF519,//添加0xff2992F2,//更新0xffB946F4,//添加0xffF50C0C,//删除0xff1EF519,//定点添加0xffB946F4,//定值查询0xffF50C0C,//定点删除0xffF46410,//清除};private static final String[] CTRL_TXT = new String[]{//控制按钮的文字"添加",//添加"更新",//更新"查寻",//添加"删除",//删除"定点+",//定点添加"值查",//定值查询"定点-",//定点删除"清空",//清除按键};private static final int CTRL_RADIUS = 50;//控制按钮的半径

---

3.绘制小圆球：

人狠话不多----一个循环，一波带走

/*** 控制面板--圆球** @param canvas 画布*/
private void ctrlView(Canvas canvas) {for (int i = 0; i < CTRL_POS.length; i++) {mCtrlPaint.setColor(CTRL_COLOR[i]);canvas.drawCircle(CTRL_POS[i].x, CTRL_POS[i].y, CTRL_RADIUS, mCtrlPaint);canvas.drawText(CTRL_TXT[i], CTRL_POS[i].x, CTRL_POS[i].y + OFFSET_OF_TXT_Y, mTxtPaint);}
}

这就...画完了?对...这就画完了

---

三、小球的点击事件(区域判断)

1.有请吾王麾下十二战神之一：审断之神(JudgeMan.java)

/*** 审断之神能力一：第一形态：区域限定----判断出是否在某点的半径为r圆范围内** @param srcX 目标点X* @param srcY 目标点Y* @param dstX 主动点X* @param dstY 主动点Y* @param r    半径区域* @return 是否在区域内*/
public static boolean judgeCircleArea(float srcX, float srcY, float dstX, float dstY, float r) {return disPos2d(srcX, srcY, dstX, dstY) <= r;
}/*** 审断之神被动能力一：两点间距离函数* @param srcX 目标点X* @param srcY 目标点Y* @param dstX 主动点X* @param dstY 主动点Y* @return 两点间距离函数*/
private static float disPos2d(float srcX, float srcY, float dstX, float dstY) {return (float) Math.sqrt((srcX - dstX) * (srcX - dstX) + (srcY - dstY) * (srcY - dstY));
}

---

2.先写一下回调监听接口：OnCtrlClickListener

兵马未动，粮草先行,有接口好办事

/*** 作者：张风捷特烈<br/>* 时间：2018/11/21 0021:10:17<br/>* 邮箱：1981462002@qq.com<br/>* 说明：控操作接口*/
public interface OnCtrlClickListener<T> {/*** 添加时回调* @param view*/void onAdd(T view);/*** 定点添加时回调* @param view*/void onAddByIndex(T view);/*** 移除时回调* @param view*/void onRemove(T view);/*** 定点移除时回调* @param view*/void onRemoveByIndex(T view);/*** 设置时回调* @param view*/void onSet(T view);/*** 查询时回调* @param view*/void onFind(T view);/*** 定值查询时回调* @param view*/void onFindByData(T view);/*** 清空时回调* @param view*/void onClear(T view);
}

3.触摸事件获取主动点：

还是一个for循环一波带走----(mark:一开始我也是一个一个if，然后发现可以优化，才变得优雅的)
也许无法一步想到位，但可以先实现，然后再优化，我就喜欢这种一波带走的感觉
注意点：downX和downY要相对于canvas的坐标系，所以要偏移一下

private OnCtrlClickListener<ArrayView<E>> mOnCtrlClickListener;//监听器
public void setOnCtrlClickListener(OnCtrlClickListener<ArrayView<E>> onCtrlClickListener) {mOnCtrlClickListener = onCtrlClickListener;
}@Override
public boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:float downX = event.getX() - mCoo.x;float downY = event.getY() - mCoo.y;for (int i = 0; i < CTRL_POS.length; i++) {if (JudgeMan.judgeCircleArea( //区域判定CTRL_POS[i].x, CTRL_POS[i].y,downX, downY, CTRL_RADIUS * 1.2f)) {if (mOnCtrlClickListener != null) {switch (i) {case 0://插入尾部mOnCtrlClickListener.onAdd(this);break;case 1://更新mOnCtrlClickListener.onSet(this);contactTest();break;case 2://查找mOnCtrlClickListener.onFind(this);break;case 3://删除尾部selectIndex = mArrayBoxes.size() - 1;mAnimator.start();break;case 4://定点添加尾部mOnCtrlClickListener.onAddByIndex(this);break;case 5://定值查询mOnCtrlClickListener.onFindByData(this);break;case 6://定点移除mAnimator.start();break;case 7://清空mOnCtrlClickListener.onClear(this);break;}CTRL_COLOR[i] = 0xff54E1F8;//点击更换颜色}}}updayeSelectIndex(downX, downY);//更新selectIndexbreak;case MotionEvent.ACTION_UP://还原颜色CTRL_COLOR[0] = 0xff1EF519;CTRL_COLOR[1] = 0xff2992F2;CTRL_COLOR[2] = 0xffB946F4;CTRL_COLOR[3] = 0xffF50C0C;CTRL_COLOR[4] = 0xff1EF519;CTRL_COLOR[5] = 0xffB946F4;CTRL_COLOR[6] = 0xffF50C0C;CTRL_COLOR[7] = 0xffF46410;break;}invalidate();//记得重绘return true;
}

4.Activity使用接口：

public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);ArrayView<String> view = new ArrayView<>(this);view.setOnCtrlClickListener(new OnCtrlClickListener<ArrayView<String>>() {@Overridepublic void onAdd(ArrayView<String> view) {Toast.makeText(MainActivity.this, "onAdd", Toast.LENGTH_SHORT).show();}@Overridepublic void onAddByIndex(ArrayView<String> view) {Toast.makeText(MainActivity.this, "onAddByIndex", Toast.LENGTH_SHORT).show();}@Overridepublic void onRemove(ArrayView<String> view) {Toast.makeText(MainActivity.this, "onRemove", Toast.LENGTH_SHORT).show();}@Overridepublic void onRemoveByIndex(ArrayView<String> view) {Toast.makeText(MainActivity.this, "onRemoveByIndex", Toast.LENGTH_SHORT).show();}@Overridepublic void onSet(ArrayView<String> view) {Toast.makeText(MainActivity.this, "onSet", Toast.LENGTH_SHORT).show();}@Overridepublic void onFind(ArrayView<String> view) {Toast.makeText(MainActivity.this, "onFind", Toast.LENGTH_SHORT).show();}@Overridepublic void onFindByData(ArrayView<String> view) {Toast.makeText(MainActivity.this, "onFindByData", Toast.LENGTH_SHORT).show();}@Overridepublic void onClear(ArrayView<String> view) {Toast.makeText(MainActivity.this, "onFindByData", Toast.LENGTH_SHORT).show();}});setContentView(view);}
}

OK,完美运行，核心在审断之神的judgeCircleArea

---

三、正文来了，绘制数据结构：

1.可绘制对象单体：使用数据结构单体的父类

拥有坐标、颜色、速度三种核心属性

/*** 作者：张风捷特烈<br/>* 时间：2018/11/21 0021:8:50<br/>* 邮箱：1981462002@qq.com<br/>* 说明：可显示出来的基本条件*/
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.数组表结构单体的绘图承载对象：

数组盒子：拥有索引和数据两个额外属性

/*** 作者：张风捷特烈<br/>* 时间：2018/11/21 0021:8:46<br/>* 邮箱：1981462002@qq.com<br/>* 说明：模型层数组的单体*/
public class ArrayBox<T> extends Viewable {public int index;//数组单体索引public T data;//数据结构承载的核心数据@Overridepublic boolean equals(Object obj) {return ((ArrayBox) obj).data == data;}public ArrayBox(T data) {this.data = data;}public ArrayBox(float x, float y) {super(x, y);}
}

3.绘制数组的长度个空白矩形

1)如何根据索引确定点位

就是稍微画个图，看看有什么关系，找到通式就ok了(代码巧多了，写字就是丑...)
然后我们用上篇的数组表结构来进行测试

2)绘制数组的长度个空白矩形

根据上面的分析图，确定了第x列，第y行的矩形坐标，应该就不难画了
注意：绘制数组的长度个空白矩形,数组的长度!! 数组的长度个!!,不是集合大小

本来应该把数组完全封装在数组表结构中的，这里为了演示扩容和缩容，数组长度还是必要的

//创建一个上篇定义的数组表类，泛型当然是要画的数组盒子了
private IChart<ArrayBox<E>> mArrayBoxes = new ArrayChart<>();/*** 绘制数组的长度个空白矩形** @param canvas*/
private void helpView(Canvas canvas) {for (int i = 0; i < mArrayBoxes.capacity(); i++) {int y = i / 8;//行坐标int x = i % 8;//列坐标mPaint.setStyle(Paint.Style.STROKE);mPaint.setColor(0xff821AFA);canvas.drawRoundRect((Cons.BOX_WIDTH + OFFSET_X) * x, (Cons.BOX_HEIGHT + OFFSET_Y) * y,(Cons.BOX_WIDTH + OFFSET_X) * x + Cons.BOX_WIDTH, (Cons.BOX_HEIGHT + OFFSET_Y) * y + Cons.BOX_HEIGHT,BOX_RADIUS, BOX_RADIUS, mPaint);mTxtPaint.setColor(0xff821AFA);canvas.drawText(i + "",(Cons.BOX_WIDTH + OFFSET_X) * x + Cons.BOX_WIDTH / 2,(Cons.BOX_HEIGHT + OFFSET_Y) * y + 3 * OFFSET_OF_TXT_Y, mTxtPaint);}}

数组初始长度为10，没错

---

4.绘制表结构

根据mArrayBoxes的大小，绘制出mArrayBoxes里面的所有元素。
绘制单体在前言篇已经给出，这里只是加上了偏移量，应该不难理解。

/*** 绘制表结构* @param canvas*/
private void dataView(Canvas canvas) {mPaint.setColor(Color.BLUE);mPaint.setStyle(Paint.Style.FILL);mPath.reset();for (int i = 0; i < mArrayBoxes.size(); i++) {ArrayBox box = mArrayBoxes.get(i);mPaint.setColor(box.color);canvas.drawRoundRect(box.x, box.y, box.x + Cons.BOX_WIDTH, box.y + Cons.BOX_HEIGHT,BOX_RADIUS, BOX_RADIUS, mPaint);mPath.moveTo(box.x, box.y);mPath.rCubicTo(Cons.BOX_WIDTH / 2, Cons.BOX_HEIGHT / 2,Cons.BOX_WIDTH / 2, Cons.BOX_HEIGHT / 2, Cons.BOX_WIDTH, 0);canvas.drawPath(mPath, mPathPaint);canvas.drawText(box.data + "",box.x + Cons.BOX_WIDTH / 2,box.y + Cons.BOX_HEIGHT / 2 + 3 * OFFSET_OF_TXT_Y, mTxtPaint);}
}

5.更新绘制单体的点位

每次增删操作后更新一下点位

/*** 更新绘制单体的点位*/
private void updatePosOfData() {for (int i = 0; i < mArrayBoxes.size(); i++) {int y = i / 8;//行坐标int x = i % 8;//列坐标ArrayBox box = mArrayBoxes.get(i);box.x = (Cons.BOX_WIDTH + OFFSET_X) * x;box.y = (Cons.BOX_HEIGHT + OFFSET_Y) * y;box.vY = 100;box.vX = 100;}
}

6.点击时动态更新选中值：

/*** 点击时动态更新选中值* @param downX 按下点X* @param downY 按下点Y*/
private void updateSelectIndex(float downX, float downY) {float x = downX / (Cons.BOX_WIDTH + OFFSET_X) - 0.5f;float y = downY / (Cons.BOX_HEIGHT + OFFSET_Y) - 0.5f;if (x > -0.5 && y > -0.5) {int indexOfData = Math.round(y) * 8 + Math.round(x);//逆向求取点中的数据索引if (indexOfData < mArrayBoxes.size()) {mArrayBoxes.get(indexOfData).color = ColUtils.randomRGB();selectIndex = indexOfData;}}
}

---

四、操作按钮绘制：

注意：以下操作是在Activity中的点击回调中进行，调用了view层的方法，实现操作与视图分离

1.增加操作：

/*** 视图的数据操作接口方法--添加** @param data 数据*/
public void addData(E data) {ArrayBox<E> arrayBox = new ArrayBox<>(0, 0);arrayBox.data = data;mArrayBoxes.add(arrayBox);updatePosOfData();//更新一下点位
}

 * 视图的数据操作接口方法--根据索引添加** @param index* @param data*/
public void addDataById(int index, E data) {if (mArrayBoxes.size() > 0 && index < mArrayBoxes.size() && index >= 0) {ArrayBox<E> arrayBox = new ArrayBox<>(0, 0);arrayBox.data = data;mArrayBoxes.add(index, arrayBox);updatePosOfData();}
}

---

2.查询和更新操作

/*** 视图的数据操作接口方法--根据id查询操作* @param index* @return*/
public E findData(int index) {if (mArrayBoxes.size() > 0 && index < mArrayBoxes.size() && index >= 0) {return mArrayBoxes.get(index).data;}return null;
}/*** 更新数据* @param index 索引* @param data 数据*/
public void setData(int index, E data) {if (mArrayBoxes.size() > 0 && index < mArrayBoxes.size() && index >= 0) {mArrayBoxes.get(index).data = data;}
}

/*** 视图的数据操作接口方法--根据数据查询操作* @param data* @return*/
public int[] findData(E data) {ArrayBox<E> arrayBox = new ArrayBox<>(0, 0);arrayBox.data = data;return mArrayBoxes.getIndex(arrayBox);
}

---

3.删除操作：

1)删除的核心方法：

/*** 视图的数据操作接口方法--移除末尾*/
public void removeData() {if (mArrayBoxes.size() > 0) {mArrayBoxes.remove();updatePosOfData();}
}
/*** 视图的数据操作接口方法--定索引删除操作** @param index 索引*/
public void removeData(int index) {if (mArrayBoxes.size() > 0 && index < mArrayBoxes.size() && index >= 0) {//更新后面的索引for (int i = index; i < mArrayBoxes.size(); i++) {mArrayBoxes.get(i).index -= 1;}mArrayBoxes.remove(index);selectIndex = -1;updatePosOfData();}
}

2)删除有个移除动画，ValueAnimate来帮忙

//初始化时间流ValueAnimator
mAnimator = ValueAnimator.ofFloat(0, 1);
mAnimator.setRepeatCount(-1);
mAnimator.setDuration(2000);
mAnimator.setRepeatMode(ValueAnimator.REVERSE);
mAnimator.setInterpolator(new LinearInterpolator());
mAnimator.addUpdateListener(animation -> {updateBall();//更新小球位置invalidate();
});

3)更新选中单体信息：updateBall

/*** 更新小球*/
private void updateBall() {if (mArrayBoxes.size() <= 0 && selectIndex < 0) {return;}ArrayBox ball = mArrayBoxes.get(selectIndex);ball.x += ball.vX;ball.y += ball.vY;if (ball.y > 600) {//大于600就执行移除if (mOnCtrlClickListener != null) {mOnCtrlClickListener.onRemoveByIndex(this);//移除监听放在这里了!!mAnimator.pause();//暂停ValueAnimator}}
}

//点击的监听中修改：case 3://删除尾部---这里将移除的选中对象设为最后一个selectIndex = mArrayBoxes.size() - 1;mAnimator.start();//开启Animator

4.联合测试：

private void contactTest() {IChart<ArrayBox<E>> contactArr = new ArrayChart<>();contactArr.add(new ArrayBox<E>((E) "toly1"));contactArr.add(new ArrayBox<E>((E) "toly2"));contactArr.add(new ArrayBox<E>((E) "toly3"));contactData(selectIndex, contactArr);
}public void contactData(int index, IChart<ArrayBox<E>> chart) {mArrayBoxes.contact(index, chart);updatePosOfData();
}

基本上就是这样，思路什么的都理清了，细节方面可参看源码

---

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

看得见的数据结构Android版之开篇前言
看得见的数据结构Android版之表的数组实现(数据结构篇)
看得见的数据结构Android版之表的数组实现(视图篇)
看得见的数据结构Android版之单链表篇(待完成)
看得见的数据结构Android版之双链表篇(待完成)
看得见的数据结构Android版之栈（待完成）
看得见的数据结构Android版之队列（待完成）
看得见的数据结构Android版之二叉树篇(待完成)
看得见的数据结构Android版之二分搜索树篇(待完成)
看得见的数据结构Android版之AVL树篇(待完成)
看得见的数据结构Android版之红黑树篇(待完成)
更多数据结构---以后再说吧

---

后记：捷文规范

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

项目源码	日期	备注
V0.1--github	2018-11-23	看得见的数据结构Android版之表的数组实现(视图篇)

2.更多关于我

笔名	QQ	微信	爱好
张风捷特烈	1981462002	zdl1994328	语言
我的github	我的简书	我的掘金	个人网站

3.声明

1----本文由张风捷特烈原创,转载请注明
2----欢迎广大编程爱好者共同交流
3----个人能力有限，如有不正之处欢迎大家批评指证，必定虚心改正
4----看到这里，我在此感谢你的喜欢与支持

---