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

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

官方文档

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

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

<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 的命名空间，如下

<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文本，则可以使用占位符文本，如下所示：

<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 所对应的模拟数据，比如说

{
  "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 布局是这样的

<?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 文件时候就可以直接预览了，例如

<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" />

预览图如下图所示