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,代码大概如下:
1
2
3
4
5
|
< LinearLayout >
< ListView
...
android:id = "@+id/listView" />
</ LinearLayout >
|
然后往 list_item_message.xml 添加所需要的控件,例如放置头像的 ImageView,放置昵称的 TextView。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
< 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 代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
< 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:
1
|
< avatar src = "@drawable/image_resource" />
|
同理地,其它属性也可以在闭合里写属性定义。
实现聊天列表界面
上面简单地说明了下 Mirror XML,但是我们的目标是编写一个列表,然不是一个 Item,所以要实现聊天列表,真正要修改的是 app/mirror/fragment_messages.xml。
打开 app/mirror/fragment_messages.xml,可以看到类似结构。
1
2
3
4
5
6
|
< screen >
< _content layout = "@layout/fragment_messages" >
< listView >
</ listView >
</ _content >
</ screen >
|
要往 ID 为 listView 的 ListView 添加数据,往闭合内放 items 即可;
1
2
3
4
5
6
7
8
9
10
11
12
|
< 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,例如在聊天列表里,有服务号、订阅号的记录,它们的样式可能与其它不同。
1
2
3
4
|
< 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:
1
2
3
|
< LinearLayout >
< android.support.v4.view.ViewPager android:id = "@+id/pager" />
</ LinearLayout >
|
修改 mirror 下对应的 XML 文件:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
< 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 进去。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!--- 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: 官方的说明文档。
Android 的 LiveReload — jimu Mirror相关推荐
- Android — jimu Mirror
摘要: 用过 Sketch 的朋友应该都知道一个叫 Mirror 的功能,它可以将你的设计稿放到手机上预览,为设计师们提高了不少效率.而今天我要介绍的 jimu Mirror ,和 Sketch Mi ...
- jimu Mirror,加速你的 Android UI 开发
用过 Sketch 的朋友应该都知道一个叫 Mirror 的功能,它可以将你的设计稿放到手机上预览,为设计师们提高了不少效率.而今天我要介绍的 jimu Mirror ,和 Sketch Mirror ...
- jimu Mirror的使用(android快速手机预览xml界面)
1 android studio 1.5以上版本的玩家可直接在 安装插件成功后.. 2 jimu Mirror 安装成功后重启,点击如图app旁边的 mirror按钮,启动jimu 此时需要激活码, ...
- 电视不正常Android镜像投屏,Mirror for Android TV(安卓电视投屏软件) V2.4 Mac版
Mirror for Android TV是一款适用于Mac的安卓电视投屏工具,它可以帮助用户在Mac上即可将视频.电影投屏到安卓电视上,适用于任何电视,设置框或媒体播放器与Android电视操作系统 ...
- Android studio 常用的插件
Android studio 常用的插件 Exynap Effortless Android Development [官网地址]( http://exynap.com/) ![Effortless ...
- Android开发工具集合
Android Studio Android开发环境,基于IntelliJ IDEA,谷歌2013年I/O大会发布,类似 Eclipse ADT:现已更新到1.3版本(截止15年8月),并支持NDK开 ...
- Android 开源组件和第三方库汇总
出自(https://github.com/Tim9Liu9/TimLiu-Android) TimLiu-Android 自己总结的Android开源项目及库. 1. github排名 https: ...
- Android开源项目以及开源库集合(持续更新中)
UI Awesome-MaterialDesign – MaterialDesignCenter改名为Awesome-MaterialDesign,优化了布局,新增了不少库. awesome-andr ...
- Android开源项目及库整理总结
自己总结的Android开源项目及库. github排名https://github.com/trending, github搜索:https://github.com/search UI Aweso ...
最新文章
- 如何生成动态库 .dll 的符号 .lib 文件?
- 计划策略-50-没有最终装配的计划
- Linux bind-utils
- 南工大计算机学院,江南-欢迎访问湖北工业大学计算机学院官方网站
- 数列极差(信息学奥赛一本通-T1427)
- 字节跳动的首款获批游戏曝光 原来是这个
- 穷人怎么慢慢打破阶层?做到这2点,活出最真实的样子,别表演!
- linux安装等宽中文字体,CentOS 5.5安装中文字体文泉驿
- 兽药促销发展分析及新策略谈
- 一小心删除了系统文件NTDETECT.COM怎么办
- 功能测试之电梯的测试用例【杭州多测师】【杭州多测师_王sir】
- android 高德卫星地图数据,白马地图 Bmap for Android v7.3.81 强大高德百度地图应用|张小北...
- gif表情制作一键轻松搞定,教你自制gif表情
- 计算机日期函数公式大全,常用的Excel日期函数大全
- Android-MPChart:PieChart使用小记
- Linux虚拟文件系统、文件描述符、管道
- 在Mac下,如何完美的卸载应用程序?-AppCleaner
- K3S 系列文章-RHEL7.8 离线有代理条件下安装 K3S
- “Gm”选项已否决,并将在将来的版本中移除,“/ZI”和“/Gy-”命令行选项不兼容
- slice thickness 和 slice increment
热门文章
- mysql iops nvme_硬盘性能指标之一的IOPS,今天带你看懂
- MDI窗体与子窗体的显示问题--(如何让主窗体是被控件挡住的子窗体显示)
- SP11 FCTRL - Factorial
- 将numeric转换为数据类型numeric是出现算术溢出错误
- sqlserver中,四舍五入之后,小数点后显示2位的sql文
- What is a Digital Signature?
- mysql中锁原理及for update悲观锁的详解
- cef异常处理_cefSharp在XP下使得程序崩溃记录
- xp计算机能装win系统吗,自己用的电脑要装系统,XP, Win7, Win10到底选哪个?解救小白篇...
- pycharm找不到conda可执行文件怎么办?