Android Livereload-jimu Mirror

Friends who have used Sketch should know a function called Mirror , it can put your design manuscript on the phone preview, for designers to improve a lot of efficiency. And today I want to introduce the Jimu Mirror , and Sketch Mirror Similar, you can put the Android XML live on the phone preview. But the modern IDE has provided the ability to preview XML in real-time within the IDE, what's the use ofJimu Mirror ?

useful! It's still quite useful! This article will use the interface as a reference, in the case of not writing a Java code, the easy implementation of several interfaces.

Reprint Self's blog: http://www.specyci.com/articles/16

1. Install Jimu Mirror

Jimu Mirror Support Android Studio/idea, this article will use Android Studio as the development environment, readers should download the corresponding version.

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

Once the plugin is downloaded, it can be installed in the Android Studio menu with simple operation.

Configure-Plugins, install plugin from disk

Nothing unexpected, you should be able to see Mirror's small icon. ：）

2. Configure Jimu Mirror

If you're using Android Studio, congratulations, you don't have to do anything, connect your phone to the computer! If you are a different IDE, please check the official documentation.

3. Basic operation

First, switch Android Studio's project panel from Android to projectso that we can see all the changes in the file;

Then through the menu, the Mirror Console opens, so that we can observe the operation of Mirror;

At the end of the "start/stop mirror" small icon, the Mirror run up, if no accident, Project will generate a app/mirror directory, while your phone should be running Jimu Mirror the main program.

4. Write the "Chat" list screen

First create a new two layout, one put the ListView one put ListView Item.

• Fragemnt_messages.xml

• List_item_message.xml

To add a ListView to fragment_messages.xml , the code might look like this:

<LinearLayout> <listview android:id= "@+id/listview"/> </LinearLayout>

Then add the required controls to the List_item_message.xml , such as the ImageView that placed the avatar, and place the nickname TextView.

<linearlayout>    < imageview        ...         Android:id= "@+id/avatar"/>    <textview         ...        android:id= "@+id/name"/>     <TextView        ...         android:id= "@+id/content"/>    <textview         ...        android:id= "@+id/time"/></LinearLayout 

Press the "Save" button to see the new output in the Mirror Console, which generates a new Mirror data file for the file you just modified.

Introduction to Mirror XML

Open the app/mirror under the list_item_message.xml, you can see the following XML code:

<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 /> &nbsP;  </_content></screen> 

We can set the properties of the avatar in the closure by ImageView the ID avatar in Layout, which is defined in the Mirror data file, <avatar/> for example, I want to set a src:

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

Similarly, other attributes can be written in a closed property definition.

Implementing the Chat List interface

The above simply illustrates the next Mirror XML, but our goal is to write a list, but not an Item, so to implement the chat list, the real change is app/mirror/fragment_messages.xml .

Open app/mirror/fragment_messages.xml, you can see similar structure.

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

To add data to a ListView with an ID of ListView , place items in the closure;

<items layout= "List_item_message" > <_item> <avatar src= "@drawable/avatar_special"/> < ; name text= "Special"/> <content text= "[Image]"/> <time text= "Evening 11:59"/> </_item> &l t;_item>. </_item> ...</items>

Small Tips: Here the test data, such as drawable, can be placed under the app/mirror/res, so that the test data can be separated from the formal code, very elegant!

In the outermost items , we declare that the layout of the rendering is list_item_message, and the sub- _item also supports defining its own layout, such as in the chat list, with service number, The subscription number records, and their styles may differ from others.

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

Additionally, you can implement the Add duplicate item by setting the Count property.

Chat list Effects

After adding all kinds of simulation data, save all the files, go back to the phone, and select the interface list in Jimu Mirror fragment_messages .

5. Writing the main interface

Currently Jimu Mirror only support Actionbar tab to switch fragments, so the main interface first with Actionbar tab bar.

Create a new layout activity_main.xmland add a viewpager:

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

Modify the corresponding XML file under Mirror:

<screen>    <actionbar title= ""  showtabsfor= "@id/pager"/>     <_content layout= "@layout/activity_main" >         <pager>            <_page  title= "chat"  layout= "Fragment_messages" >                 <listView>                     <items>                     ....                                           </items> &nBsp;              </listview>             </_page>             <_page title= "found"  layout= "Fragment_discovery" >                 <listview >                     <items>                     ....                                          </items>                 </listview>             </_page>             <_page title= "Contacts"  layout= "Fragment_contacts"/>         </pager>    </_content></screen>

<items></items>   is a heap of items in the write chat list above, which is DRY. We can draw items out of an XML and   them; include   go in.

<!---File name:messages.xml---><items layout= "list_item_message" > <_item> <avatar/> <name/> <content/> <time/> </_item> ....</items><!---File Name : Activity_main.xml--->...<_page title= "chat" layout= "fragment_messages" > <listView> <items Inc Lude= "Messages.xml"/> </listview></_page>

Effect

In the layout list of Jimu Mirror choose activity_main, haha, kinda like it!

6. Conclusion

Android-related development tools have been making rapid progress in recent years, and we've struggled with ADT in the last few years, and now an Android Studio, with a genymotion, who misses the simulator? Although this plug-in is not a revolutionary move, but from the efficiency, undoubtedly improve the interface development speed, if the team also has a Dick Fried Day XML Specification Designer, a considerable part of the front-end work can be entrusted to him.

Finally, the relevant resources are enclosed in the project code.

7. Related Resources

• mirrorwechat: This article demonstrates the code, using Jimu Mirror to mimic the interface.

• mirrortutorial: official documentation.

Android Livereload-jimu Mirror