Android 的 LiveReload — jimu Mirror

用過 Sketch 的朋友應該都知道一個叫 Mirror 的功能，它能夠將你的設計稿放到手機上預覽，爲設計師們提升了很多效率。而今天我要介紹的 jimu Mirror ，和 Sketch Mirror 相似，能夠將 Android 的 xml 實時放到手機上預覽。可是現代化的 IDE 都已經提供在 IDE 內實時預覽 xml 的功能，jimu Mirror 有啥用呢？

有用！仍是至關有用！ 本文將以微信的界面做爲參考，在不寫一句 Java 代碼的狀況下，輕鬆實現微信的幾個界面。

轉載自個人博客：http://www.specyci.com/articles/16

---

1. 安裝 jimu Mirror

jimu Mirror 支持 Android Studio / IDEA，本文將以 Android Studio 做爲開發環境，讀者請自行下載對應版本。

http://jimulabs.com/mirror-downloads/

將插件下載下來後，在 Android Studio 菜單進行簡單操做，便可安裝。

Configure -> Plugins -> install plugin from disk

沒什麼意外的話，你應該就能看見 Mirror 的小圖標了。：）

---

2. 配置 jimu Mirror

若是你使用的是 Android Studio，恭喜你，你什麼都不用作，把手機接上電腦就能夠了！若是你是其它 IDE，請查看官方文檔。

---

3. 基本操做

首先，將 Android Studio 的 Project 面板從 Android 切換到 Project，這樣咱們就能觀察全部文件的變化；

再經過菜單，將 Mirror 的 Console 打開，這樣咱們就能觀察 Mirror 的運行狀況；

最後點一下「Start/Stop Mirror」的小圖標，把 Mirror 跑起來，如無心外，Project 下會生成一個 app/mirror 的目錄，同時你的手機應該會跑起 jimu Mirror 的主程序。

---

4. 編寫「聊天」列表界面

先新建兩個 layout，一個放 ListView 一個放 ListView Item。

• fragemnt_messages.xml

• list_item_message.xml

往 fragment_messages.xml 增長一個 ListView，代碼大概以下：

<LinearLayout>
    <ListView
        ...
        android:id="@+id/listView"/>
 </LinearLayout>

而後往 list_item_message.xml 添加所須要的控件，例如放置頭像的 ImageView，放置暱稱的 TextView。

<LinearLayout>
    <ImageView
        ...
        android:id="@+id/avatar"/>
    <TextView
        ...
        android:id="@+id/name"/>
    <TextView
        ...
        android:id="@+id/content"/>
    <TextView
        ...
        android:id="@+id/time"/>
</LinearLayout>

按下「保存」按鈕，能夠看到在 Mirror 的 Console 裏有新的輸出，它爲剛纔修改的文件生成了新的 mirror 數據文件。

Mirror XML 簡介

打開 app/mirror 下的 list_item_message.xml，能夠看到以下 XML 代碼：

<screen>
    <_content layout="@layout/list_item_message">
        <!-- ImageView Examples:
        <avatar src="@drawable/image_resource" />
        <avatar src="relative_path/image.jpg" /> -->
        <avatar />
        <!-- TextView Examples:
        <name text="@string/string_resource" />
        <name text="Text literal" textSize="14sp" /> -->
        <name />
        <content />
        <time />
    </_content>
</screen>

咱們在 layout 中 ID 爲 avatar 的 ImageView，在 Mirror 的數據文件裏被 <avatar/> 閉合所定義，咱們能夠在閉合內設置 avatar 的屬性，例如我要給它設置個 src：

<avatar src="@drawable/image_resource" />

同理地，其它屬性也能夠在閉合裏寫屬性定義。

實現聊天列表界面

上面簡單地說明了下 Mirror XML，可是咱們的目標是編寫一個列表，然不是一個 Item，因此要實現聊天列表，真正要修改的是 app/mirror/fragment_messages.xml。

打開 app/mirror/fragment_messages.xml，能夠看到相似結構。

<screen>
    <_content layout="@layout/fragment_messages">
        <listView>
        </listView>
    </_content>
</screen>

要往 ID 爲 listView 的 ListView 添加數據，往閉合內放 items 便可；

<items layout="list_item_message">
    <_item>
        <avatar src="@drawable/avatar_special"/>
        <name text="Special"/>
        <content text="[圖片]"/>
        <time text="晚上 11:59"/>
    </_item>
    <_item>
    ....    
    </_item>
    ...
</items>

小 Tips: 這裏的測試數據，例如 drawable，能夠放到 app/mirror/res 下，這樣能夠實現測試數據與正式代碼分離，很是優雅！

其中咱們在最外層的 items 聲明瞭渲染的 layout 爲 list_item_message，子 _item 也支持定義它本身的 layout，例如在聊天列表裏，有服務號、訂閱號的記錄，它們的樣式可能與其它不一樣。

<items layout="list_item_message">
    <_item layout="list_item_message_special"/>
    <_item count="5"/>
</items>

另外，經過設置 count 屬性能夠實現添加劇復的 item。

聊天列表效果

添加好各類模擬數據後，保存好全部文件，回到手機上，在 jimu Mirror 的界面列表選擇 fragment_messages。

 

---

5. 編寫主界面

目前 jimu Mirror 暫時只支持 Actionbar Tab 去切換 Fragments，因此主界面先用 Actionbar Tab 吧。

新建 layout activity_main.xml，往裏添加一個 ViewPager：

<LinearLayout>
    <android.support.v4.view.ViewPager android:id="@+id/pager" />
</LinearLayout>

修改 mirror 下對應的 XML 文件：

<screen>
    <actionbar title="微信" showTabsFor="@id/pager"/>
    <_content layout="@layout/activity_main">
        <pager>
            <_page title="聊天" layout="fragment_messages">
                <listView>
                    <items>
                    ....                    
                    </items>
                </listView>
            </_page>
            <_page title="發現" layout="fragment_discovery">
                <listView>
                    <items>
                    ....                    
                    </items>
                </listView>
            </_page>
            <_page title="通信錄" layout="fragment_contacts"/>
        </pager>
    </_content>
</screen>

<items></items> 內就是把上面編寫「聊天列表」的 items 往裏堆，固然這樣很不 DRY。咱們能夠把items抽離出一個 XML，再把它們 include 進去。

<!--- File name: messages.xml --->
<items layout="list_item_message">
    <_item>
        <avatar/>
        <name/>
        <content/>
        <time/>
    </_item>
    ....
</items>

<!--- File name: activity_main.xml --->
...
<_page title="聊天" layout="fragment_messages">
    <listView>
        <items include="messages.xml"/>
    </listView>
</_page>
...

效果

在 jimu Mirror 的 layout 列表裏選擇 activity_main，哈哈，還挺像嘛！

---

6. 結語

這幾年 Android 相關的開發工具都在飛速進步，前幾年咱們還在掙扎 ADT，如今一個 Android Studio 妥妥的，再配個 Genymotion，誰還想念那自帶模擬器呢？ 這個插件雖算不上革命之舉，但從效率上，無疑提升了界面開發速度，若是團隊裏還有屌炸天懂 XML 規範的設計師，至關部分的前端工做能夠託付給他了。

最後，相關資源附上本文項目代碼。

---

7. 相關資源

• MirrorWechat: 本文示範代碼，使用 jimu Mirror 模仿微信界面。

• MirrorTutorial: 官方的說明文檔。