Android Studio Preview View

使用 tools 命名空间实现 View 的预览

官方文档

在开发过程中,有时候需要对 View 进行预览,以前需要把 application run 到手机或者是模拟器上后才能看到效果,现在,我们有了更加方便快捷的方法。

对于一个 RecyclerView 来说,一般来说,我们会在 xml 文件中写下面这样的代码

1
2
3
4
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_list"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

这时候会在Android Studio 右边的预览窗口中看到这样的画面

这时候我们会在想,能不能把我们的 item 的布局文件也给展示出来呢,这样就可以预览效果了。

当然可以,我们可以借助 tools 命名空间来实现这个想法。
要使用 tools 的一些 xml 属性,我们需要在 xml 文件的根布局中添加 tools 的命名空间,如下

1
2
<RootTag xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" >

这个时候我们就可以开始使用一些属性了。

我们给 RecyclerView 添加 tools:listitem="@layout/xxxx" 的话,我们就可以预览到每个 Item 在 RecyclerView 中的样子了。如下图所示

但这时候你会发现,我们每一个 item 都是一模一样的,没法预览和模拟真实的情景呀。
不用怕,Android Studio 3.0 给我们提供了这么一个功能。

|“@tools:sample/*” resources

我们可以在每个 Item 中使用这些提供给我们使用的资源文件,这些属性允许您将占位符数据或图像插入到视图中。例如,如果要测试布局如何与文本行为相关,但尚未为应用程序定制UI文本,则可以使用占位符文本,如下所示:

1
2
3
4
5
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="@tools:sample/lorem" />

效果如下图所示

系统给我们提供了很多的 sample resource ,如下表所示

Attribute value Description of placeholder data
@tools:sample/full_names Full names that are randomly generated from the combination of @tools:sample/first_names and @tools:sample/last_names.
@tools:sample/first_names Common first names.
@tools:sample/last_names Common last names.
@tools:sample/cities Names of cities from across the world.
@tools:sample/us_zipcodes Randomly generated US zipcodes.
@tools:sample/us_phones Randomly generated phone numbers with the following format: (800) 555-xxxx.
@tools:sample/lorem Placeholder text that is derived from Latin.
@tools:sample/date/day_of_week Randomized dates and times for the specified format.
@tools:sample/date/ddmmyy
@tools:sample/date/mmddyy
@tools:sample/date/hhmm
@tools:sample/date/hhmmss
@tools:sample/avatars Vector drawables that you can use as profile avatars.
@tools:sample/backgrounds/scenic Images that you can use as backgrounds.

但是我们还会发现,我们其实远远不满足于系统提供的这些模拟资源文件,我们需要自己定义一些数据来源怎么办?

当然也没问题

在 Android Studio 中,我们可以新建一个 Sample Data Directory 文件夹,在这个文件夹里,我们可以自己定义一些 json 数据来源,并且更重要的是,这个文件夹里的资源文件并不会被打包到我们的 apk 文件中。

例如我们新建一个 mockData.json 文件,用来存放我们这个 RecyclerView 所对应的模拟数据,比如说

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"menus": [
{
"menuUrl": "",
"menuIcon": "",
"menuName": "",
"showOrder": 0,
"iconUrl": "",
"avatar":"@tools:sample/avatars"
},
{
"menuUrl": "",
"menuIcon": "",
"menuName": "",
"showOrder": 1,
"iconUrl": "",
"avatar":"@tools:sample/avatars"
}
]
}

注意,在这个文件编辑完毕后,我们需要 build 一下工程,才能引用到这里的数据

在 build 完毕后,我们就可以通过 tools:text="@sample/mockdata.json/menus/menuName" 这样的方式引用我们自定义的 json 里的数据了

例如,我们的 item 布局是这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="94dp"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/item_work_icon"
android:layout_width="42dp"
android:layout_height="42dp"
tools:src="@sample/mockdata.json/menus/avatar"
android:scaleType="centerCrop"/>
<TextView
android:id="@+id/item_work_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="9dp"
android:gravity="center"
tools:text="@sample/mockdata.json/menus/menuName" />
</LinearLayout>

这个时候我们可以在预览窗看到我们的预览页面是这样的,已经将文字替换成我们自定义的 json 文件里的数据了。

接着再来看我们的 RecyclerView 的预览窗口,我们把 RecyclerView 的 tools:listitem 的值换成我们上面的这个布局,可以看到我们的预览窗口变成了这样

默认的 RecyclerView 是使用垂直的LinearLayoutManager,那如果我们想修改成九宫格的呢,也没问题。

RecyclerView 中提供了下面的几个属性可供我们修改。

属性 介绍
itemCount 设置展示 item 的数量 数字,例如6
layoutManager 设置布局方式,三种方式可供选择 GridLayoutManager、LinearLayoutManager 以及 StaggeredGridLayoutManager
listitem item 的布局 @layout/xxxx
orientation 布局的方向 horizontal vertical
spanCount 布局横、纵的列数 数字,例如3

举个例子,假如我们的 RecyclerView 是要作为九宫格菜单使用的,平时我们只能在 Java 代码中设置其 LayoutManager 以及 spanCount ,等到跑在手机上以后我们才能预览到效果,但现在,我们可以使用 tools 将这个步骤在开发阶段就提前,在编写 xml 文件时候就可以直接预览了,例如

1
2
3
4
5
6
7
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_third_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:listitem="@layout/item_menu"
tools:layoutManager="GridLayoutManager"
tools:spanCount="3" />

预览图如下图所示