[麻雀雖小]記 簡易Markdown閱讀器 開發全過程

[麻雀雖小]記 簡易Markdown閱讀器 開發全過程

[TOC]

序言

項目地址： https://github.com/didikee/MDReader
測試文章地址： [2017 Android 面試題 [ 基礎與細節 ]](https://github.com/didikee/An...
enjoy.

本文的程序比較簡單，甚至說有些簡陋，簡陋到我連應用程序列表的圖標都不想佔用，只但願你在打開.md文件時不至於沒有什麼app能夠查看，僅此而已。

整個思路我梳理下以下：

1. 程序名稱
2. 程序功能  -->  這個很明確，只是一個能夠查看`Markdown`格式文件。
3. 程序UI及其交互 （這個對於開發人員來講最麻煩，作出來的交互還可能反人類。。。）
4. 功能實現 （這個佔用絕大部分時間，固然包括測試和寫 Demo ）
5. 程序Icon （這個沒有UI幫忙，本身只能用些簡單的，還好目前有很多工具能夠用）
6. 差很少完成了第一個版本 （可用而已）

具體實現過程

1. 程序名稱

我立馬想起來的是MDReader，因此就是差箇中文名字了，就叫Markdown閱讀器好了，重名了就改MD閱讀器好了。再重名再說吧。。。

2. 功能 與 UI

以前我按照Google的官方來，有一個DrawerLayout,可是立馬就發現我要作的原本就是一個很簡單明瞭的東西。若是我爲了把抽屜填滿內容也是能夠，可是我本身都以爲很臃腫。而後我立馬想到了一款App----RE文件瀏覽器，這個App從我剛接觸Android時就是玩機的必備利器，並且功能從那時起就沒有什麼大的改動，只是在UI上跟着潮流在走，並且此APP在GooglePlay的售價和評分都挺高的。我想要的其實就是這種風格的APP，穩定簡單易用。
因此，我擅作主張的把全部的UI都砍掉了！變成一個沒有圖標的工具服務型App。砍完發現確實簡陋了，可是感受挺好的，後期可能加一些CSS樣式方便導出HTML文件。

3. 功能實現

這個就比較靈活了，我是花了一天半的時間的。Markdown to HTML，Google 這個關鍵字，信息仍是挺多的，或者 GitHub 搜索一下 Markdown也能找到不少開源工具。可是大部分都是基於JavaScript的，我對這方面不是很熟悉，只能看看，會一些Android 與JavaScript 的交互而已。因此我更但願有爲Android 量身作的開源庫。

我試過的有：

1. commonmark ： java寫的，可是我使用時不支持表格
2. Markdownj： 也是java 寫的
3. MarkdownView-Android： 拓展不太好，或者沒發拿來直接用，並且他是用的 marked 這個開源庫
4. us.feras.mdv:markdownview： 問題多多，直接放棄
5. marked： 這個看起來很不錯，我借用Webview 用執行JavaScript 方法，而後把解析後的html 回傳給 Android。路是通的，可是有一些問題。
6. markedj： 基於 marked.js 寫的，用起來能夠就沒換了，推薦。

4. 程序圖標Icon

雖然我在程序列表裏不顯示，可是在用戶點擊一個.md格式的文本後，個人app須要匹配到，而且顯示在匹配的列表裏，此時仍是須要icon，Android 默認的icon看着也太寒磣了。而後我就寫了兩個字MD，嗯，Icon也算是作完了，哈哈。

感謝這個在線工具,有興趣的能夠收藏mark下：https://jgilfelt.github.io/AndroidAssetStudio/icons-launcher.html

市場

後期上線的話，可能只會去酷市場和GooglePlay了，固然，上線也只是爲了分享而已。

具體實現[代碼篇]

1. maven 如何在Android 中使用

例如，markedj做者給出了maven倉庫的pom.xml文件：

<dependencies>
  <dependency>
    <groupId>io.github.gitbucket</groupId>
    <artifactId>markedj</artifactId>
    <version>1.0.9</version>
  </dependency>
</dependencies>

在 Android 中只須要把這三個參數用 :鏈接起來就行了，這就是 Gradle能夠用的：

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    // markdej,base on marked.js
    compile 'io.github.gitbucket:markedj:1.0.9'
    compile 'com.android.support:support-annotations:25.1.1'
}

2. 加入CSS樣式

<style> ##你的樣式##</style>

我使用的是MarkdownPad2 的默認css樣式。

樣式的代碼比較長，我就不貼了，能夠去本文頂部的鏈接查看項目。

3. markdown 轉 html

這個都說忘記了，這個耗時最長，可是耗時越長說的就最少了，絕大部分時間都是測試，反覆的看，對比生成的html文件。
目前APP 依賴的Android Webview去展現 html，可是部分手機會出現問題，好比個人OPPO測試機就不能代碼塊左右滑動，致使顯示不全。
此時你能夠用手機裏的瀏覽器打開生成的html文件，應該不會出現上述問題。

4. 匹配 .md 格式文件

個人惟一一個 Activity 的清淡文件：

<activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            >
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
                <data android:host="ruijun.com" android:scheme="http"/>
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.VIEW"/>
                <category android:name="android.intent.category.DEFAULT"/>

                <data android:scheme="file"/>
                <data android:host="*"/>
                <data android:mimeType="*/*"/>
                <data android:pathPattern=".*\\.md"/>
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.VIEW"/>
                <category android:name="android.intent.category.DEFAULT"/>

                <data android:scheme="file"/>
                <data android:host="*"/>
                <data android:mimeType="*/*"/>
                <data android:pathPattern=".*\\.markdown"/>
            </intent-filter>
        </activity>

5. 隱藏程序圖標

<intent-filter>
         <action android:name="android.intent.action.MAIN"/>
         <category android:name="android.intent.category.LAUNCHER"/>
         <data android:host="ruijun.com" android:scheme="http"/>
</intent-filter>

只須要這句最關鍵的：<data android:host="ruijun.com" android:scheme="http"/>

源碼裏的關鍵點在LoaderTask.loadAllAppsByBatch（）方法和Launcher.bindAllApplications（）方法。

參考：隱藏APP圖標

6. 獲得 Intent 裏的文件路徑

這裏面只是版本的問題，不一樣的品牌手機也會有影響

public static String getPathFromUri(Context context, Uri uri) {
        //獲得uri，後面就是將uri轉化成file的過程
        if (context == null || uri == null) {
            return null;
        }
        String pathFromUri;
        int sdkInt = Build.VERSION.SDK_INT;
        if (sdkInt >= 19) {
            pathFromUri = Uri2Path.getRealPathFromURI_API19(context, uri);
        } else if (sdkInt >= 11 && sdkInt < 19) {
            pathFromUri = Uri2Path.getRealPathFromURI_API11to18(context, uri);
        } else {
            pathFromUri = Uri2Path.getRealPathFromURI_BelowAPI11(context, uri);
        }
        return pathFromUri;
    }

總結

放張截圖吧