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

張風捷特烈發表於2018-11-21
資料結構Android

零、前言

一開始也是突發奇想，感覺對安卓的繪圖瞭解比較深了，何不畫畫資料結構呢  
演示操作的專案檔案已經在Github開源了，大家可以下載來自己玩玩，想要研究或完善都很歡迎  
這個專案以及下面幾篇文章是近幾天的成果，相信對認識資料結構的新手應該會有很大的幫助  
本系列測試了吾的能力(繪圖能力，分析能力，表述能力，統籌能力)可以說對我有很多的益處  
畢竟要檢視呈現，關於結構的每一個細小點都不能馬虎，也不再畏懼debug(反而喜歡上了)  
bug是coder的家常便飯,debug便是筷子，吃完了，飯沒了，人飽了，專案便完成了  
複製程式碼

此專案暫時告一段落，以後功力深了再來戰! 希望你可以和我在Github一同見證：DS4Android

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

陣列表

表結構的常規操作

表結構的常規操作.gif

陣列的擴容與縮容

陣列的擴容與縮容

單連結串列

單連結串列操作合集.gif

雙連結串列:

雙連結串列操作合集.gif

棧

棧操作合集.gif

佇列

陣列實現普通佇列：

藍色區域是陣列看見：初始化四個空間，不夠再擴容，空閒太多再縮容

陣列實現普通佇列.gif

連結串列實現普通佇列：

佇列綜合操作.gif

二分搜尋樹

二分搜尋樹操作合集.gif

一、我與資料結構：

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

1---資料結構=資料+結構：
2---說到結構，我第一反應就是生物的骨架，而資料則是附著在骨架上的軀體。
3---軀體外顯，骨架內隱，骨架的行為在軀體上表現。很符合資料與結構的關係。
4---簡而言之，我認為結構是資料的載體，資料是結構行為的體現。
5---血肉大同小異，但骨骼千差萬別，有的靈巧嬌小，有的笨重碩大，但各有千秋。

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

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

專案包的分類.png

總體的思路

綜述.png

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

既然決定對戰資料結構，那擂臺便必不可少，Android的View就是擂臺。本篇解決擂臺的問題。 本系列每種資料結構將分為兩篇：資料結構篇和檢視篇，如果你只偏愛其中一種，自選觀看(資料結構介面與java基本保持一致)
本篇會解決陣列、單連結串列、雙連結串列、二叉樹、紅黑樹的單體繪製，有什麼視覺方面的想法歡迎留言。

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

資料結構檢視單體.png

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

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

0.統一常量管理類
/**
 * 作者：張風捷特烈<br/>
 * 時間：2018/11/21 0021:14:21<br/>
 * 郵箱：1981462002@qq.com<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重合了，你也可以用二次的貝塞爾曲線

陣列畫法.png

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.單連結串列單體的繪製：

單連結串列畫法.png

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.雙連結串列單體的繪製：

雙連結串列畫法.png

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.二叉樹單體的繪製

二叉樹畫法.png

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.紅黑樹的畫法

紅黑樹樹畫法.png

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/>
 * 郵箱：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:10:17<br/>
 * 郵箱：1981462002@qq.com<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----看到這裡，我在此感謝你的喜歡與支援

icon_wx_200.png

相關文章