看得見的資料結構Android版之開篇前言

摘要： 最近兩個星期研究了一下Android的繪圖，也可以說是自定義控制元件吧。 但僅是如此嗎？那些都是開胃菜，吾現在要放大招了，那就是讓無數新手聞風喪膽的——數!據!結!構! 沒錯，吾要和資料結構進行第三次大規模戰鬥，而這場戰鬥的戰利品將是本篇和之後的n篇，以及我從中獲得的經驗與知識。 ...

最近兩個星期研究了一下Android的繪圖，也可以說是自定義控制元件吧。

但僅是如此嗎？那些都是開胃菜，吾現在要放大招了，那就是讓無數新手聞風喪膽的——數!據!結!構!

沒錯，吾要和資料結構進行第三次大規模戰鬥，而這場戰鬥的戰利品將是本篇和之後的n篇，以及我從中獲得的經驗與知識。

本系列為了測試吾的能力(繪圖能力，分析能力，表述能力，統籌能力)以及為大家換一個角度去看待資料結構。

本系列將會成為吾程式設計生涯的一座 里程碑 和 個人標誌 。 ofollow,noindex">希望你可以和我在Github一同見證：DS4Android

注：本系列的[捷文規範]定位在掘金，簡書同步更新

0.本系列後續更新連結合集：(動態更新)

看得見的資料結構Android版之開篇前言

看得見的資料結構Android版之陣列篇(待完成)

看得見的資料結構Android版之單鏈表篇(待完成)

看得見的資料結構Android版之雙鏈表篇(待完成)

看得見的資料結構Android版之二叉樹篇(待完成)

看得見的資料結構Android版之二分搜尋樹篇(待完成)

看得見的資料結構Android版之AVL樹篇(待完成)

看得見的資料結構Android版之紅黑樹篇(待完成)

更多資料結構---以後再說吧

1.說說我對資料結構的理解吧：

1---資料結構=資料+結構：

2---說到結構，我第一反應就是生物的骨架，而資料則是附著在骨架上的軀體。

3---軀體外顯，骨架內隱，骨架的行為在軀體上表現。很符合資料與結構的關係。

4---簡而言之，我認為結構是資料的載體，資料是結構行為的體現。

5---血肉大同小異，但骨骼千差萬別，有的靈巧嬌小，有的笨重碩大，但各有千秋。

2.總結與展望：我與資料結構的兩次大戰

第一次接觸資料結構是在學程式設計初期，可謂完敗,內心倍受摧殘，從而敬而遠之
第二次接觸資料結構是在前幾個月，原因是感覺程式設計的境界提升很多，資料結構這個瓶頸早晚還是要過的
便決定潛心研究兩個星期，感覺還不錯，可以說平分秋色，收穫頗多，雖然過深的知識我也只能淺嘗輒止。

這次是第三次對資料結構的大戰，基於Android的View來顯示資料結構，讓它的神祕無所遁藏。
就我剛寫完陣列篇來講，確實對我的思維和分析有很大的考驗，對於層次分解也更清晰，
常量的價值、監聽的使用，以及介面的鬼斧神工還有泛型的使用(泛型包泛型我也是佩服自己)都理解得更深了
複製程式碼

3.總體的思路

4.下面是陣列資料結構的檢視：(有沒有很期待)

一、本文是幹嘛的(開場篇當然不能太low)

既然決定對戰資料結構，那擂臺便必不可少，Android的View就是擂臺。本篇解決擂臺的問題。

本篇會解決陣列、單鏈表、雙鏈表、二叉樹、紅黑樹的單體繪製，有什麼視覺方面的想法歡迎留言。

基本樣子大概就是下圖了：

二、下面來繪製一下各種資料結構的單體

以下是安卓原生繪圖結果，也是本篇的重點：

0.統一常量管理類

/**
 * 作者：張風捷特烈<br/>
 * 時間：2018/11/21 0021:14:21<br/>
 * 郵箱：[email protected]<br/>
 * 說明：統一常量管理類
 */
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.可顯示出來的基類

所有資料結構繪製單體的父類

/**
 * 作者：張風捷特烈<br/>
 * 時間：2018/11/21 0021:8:50<br/>
 * 郵箱：[email protected]<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:10:17<br/>
 * 郵箱：[email protected]<br/>
 * 說明：控操作介面
 */
public interface OnCtrlClickListener<T> {

void onAdd(T view);

void onRemove(T view);

void onSet(T view);

void onFind(T view);
}

複製程式碼

後記：捷文規範

1.本文成長記錄及勘誤表

專案原始碼	日期	備註
V0.1--github	2018-11-21	看得見的資料結構Android版之開篇前言

2.更多關於我

筆名	QQ	微信	愛好
張風捷特烈	1981462002	zdl1994328	語言
我的github	我的簡書	我的掘金	個人網站

3.宣告

1----本文由張風捷特烈原創,轉載請註明

2----歡迎廣大程式設計愛好者共同交流

3----個人能力有限，如有不正之處歡迎大家批評指證，必定虛心改正

4----看到這裡，我在此感謝你的喜歡與支援