[麻雀虽小]记 简易Markdown阅读器 开发全过程

目录

• [麻雀虽小]记 简易Markdown阅读器 开发全过程
  • 序言
  • 具体实现过程
  • 具体实现[代码篇]
  • 总结

[麻雀虽小]记 简易Markdown阅读器 开发全过程

序言

项目地址： https://github.com/didikee/MDReader
测试文章地址： 2017 Android 面试题 [ 基础与细节 ]
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;
    }

总结

放张截图吧