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

時間  2019-11-07
標籤 看得見 數據 結構 android 開篇 前言 總結 欄目 Android 简体版
原文   原文鏈接

零、前言

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

此項目暫時告一段落，之後功力深了再來戰! 但願你能夠和我在Github一同見證：DS4Androidjava

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

數組表

表結構的常規操做

表結構的常規操做.gif

數組的擴容與縮容

數組的擴容與縮容

單鏈表

單鏈表操做合集.gif

雙鏈表:

雙鏈表操做合集.gif

棧

棧操做合集.gif

隊列

數組實現普通隊列：

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

數組實現普通隊列.gif

鏈表實現普通隊列：

隊列綜合操做.gif

二分搜索樹

二分搜索樹操做合集.gif

1、我與數據結構：

1.說說我對數據結構的理解吧：

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

2.總結與展望：我與數據結構的兩次大戰
第一次接觸數據結構是在學編程初期，可謂完敗,心裏倍受摧殘，從而敬而遠之  
第二次接觸數據結構是在前幾個月，緣由是感受編程的境界提高不少，數據結構這個瓶頸遲早仍是要過的  
便決定潛心研究兩個星期，感受還不錯，能夠說勢均力敵，收穫頗多，雖然過深的知識我也只能淺嘗輒止。  

此次是第三次對數據結構的大戰，基於Android的View來顯示數據結構，讓它的神祕無所遁藏。  
就我剛寫完數組篇來說，確實對個人思惟和分析有很大的考驗，對於層次分解也更清晰，  
常量的價值、監聽的使用，以及接口的鬼斧神工還有泛型的使用(泛型包泛型我也是佩服本身)都理解得更深了
複製代碼
項目包的分類

項目包的分類.png

整體的思路

綜述.png

2、本文是幹嗎的(開場篇固然不能太low)

既然決定對戰數據結構，那擂臺便必不可少，Android的View就是擂臺。本篇解決擂臺的問題。 本系列每種數據結構將分爲兩篇：數據結構篇和視圖篇，若是你只偏心其中一種，自選觀看(數據結構接口與java基本保持一致)
本篇會解決數組、單鏈表、雙鏈表、二叉樹、紅黑樹的單體繪製，有什麼視覺方面的想法歡迎留言。編程

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

數據結構視圖單體.png

3、下面來繪製一下各類數據結構的單體

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

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);
}
複製代碼
4、其餘初始：
1.可顯示出來的基類

全部數據結構繪製單體的父類bash

/**
 * 做者：張風捷特烈<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
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程