Android tools sample data: Make preview great again

在 Android 界面开发过程中我们经常需要查看页面效果。在远古时期使用 eclipse 开发的时候预览是一件让人头疼的事，代码和预览界面不能同时出现，需要切换 tab，好在 Android Studio 提供的编辑界面可以让我们同时看到代码和预览图，省去我们开会切换的时间。（这是当年驱使我把 eclipse 换成 Android Studio 的主要原因之一）

但是预览界面提供的预览比较弱，只能看一些简单的效果，稍微复杂的效果就需要运行起来才能看到，当工程变得复杂之后，构建一次 app 的时间会比较长，如果编写复杂界面，需要调整好几次的时候，花在构建上的时间可能都要很久，这会在一定程度上影响开发效率。相对于原生，react native 和 flutter 在这方面优势就很突出，只需要 reload 一下马上就能看到更新，不用每次去重新构建。虽然原生也有 instant run 的功能，但是开启之后可能会造成很多莫名其妙问题，所以大部分时候都会关掉 instant run 保平安。

android tools 属性

tools: 替换 android:

tools 属性能帮助我们增强预览效果。比如 tools:text 能够帮助我们预览文本，它的效果跟 android:text 一样，但是在实际运行中并不起作用。eg. 我们在编写 RecyclerView item 的时候需要预览效果，但是因为每个 item 的数据都不同，我们不能写死 android:text。如果我们想要预览文本效果，我们可以在 xml 使用 android:text , 在提交代码的时候删掉，但是这样会比较麻烦，也可能会忘记，这时候我们就可以使用 tools:text 来代替 android:text，预览效果完全相同，并且我们即使不删除代码也不会对运行效果造成影响，可以放心大胆的 push 代码。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gaZxH1ML-1583573217857)(https://i.loli.net/2020/03/05/rHomafPRENxXe4y.png)]

实际上大部分 android:xxx 的属性都能替换成 tools:xxx，这样我们就能在预览的时候看到显示效果，并且不用担心打包的时候不小心把测试数据带上去。

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:id="@+id/imageView"android:layout_width="64dp"android:layout_height="64dp"android:layout_marginStart="16dp"android:layout_marginTop="16dp"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"tools:ignore="ContentDescription"tools:src="@mipmap/ic_launcher" /><TextViewandroid:id="@+id/textView2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="16dp"app:layout_constraintStart_toEndOf="@+id/imageView"app:layout_constraintTop_toTopOf="@+id/imageView"tools:text="Jon Snow"tools:textColor="#000"tools:textSize="20sp" /><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="16dp"app:layout_constraintStart_toStartOf="@+id/textView2"app:layout_constraintTop_toBottomOf="@+id/textView2"tools:text="I know nothing"tools:textColor="#666"tools:textSize="14sp" /><TextViewandroid:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginEnd="24dp"app:layout_constraintBottom_toBottomOf="@+id/imageView"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintTop_toTopOf="@+id/imageView"tools:text="3/8/2020"tools:textColor="#666"tools:textSize="14sp" />
</androidx.constraintlayout.widget.ConstraintLayout>

tools:listitem

listitem 可能帮助我们预览 RecyclerView 的样式。通常情况下我们在 xml 中加入 RecyclerView 控件，as 会生成一个默认的预览样式.默认的样式很简单，我们不能看到实际的效果，需要运行代码才能看到。使用tools:listitem 可以帮助我们实现在编辑的时候预览 RecyclerView 的效果。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/main"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".ui.main.MainFragment"><androidx.recyclerview.widget.RecyclerViewandroid:layout_width="match_parent"android:layout_height="match_parent"tools:listitem="@layout/test_item" />
</androidx.constraintlayout.widget.ConstraintLayout>

除了 tools:listitem，Android 还提供了另外的属性帮助我们更好的预览 RecyclerView。 tools:itemCount 可以设置预览个数，搭配 layoutManager 和 spanCount 我们还能预览 GridLayoutManager 下的样式。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/main"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".ui.main.MainFragment"><androidx.recyclerview.widget.RecyclerViewandroid:layout_width="match_parent"android:layout_height="match_parent"tools:itemCount="10"tools:layoutManager="androidx.recyclerview.widget.GridLayoutManager"tools:listitem="@layout/test_avatar_item"tools:spanCount="3" />
</androidx.constraintlayout.widget.ConstraintLayout>

其他属性

除了上面介绍的属性之外，tools 还有很多别的作用，比如 tools:ignore，tools:context，tools:showIn等，具体可以参考官方文档

sample data

使用 tools 属性后我们能够在一定程度上增强我们的预览效果，但是效果比较一般，比如预览 RecyclerView 的数据时，我们虽然可以使用 tools:listitem 和 tools:itemCount 设置预览数据，但是每个 item 都一样，数据看上去很假，跟实际使用的时候有一些出入。sample data 的出现能够很好的帮我解决这个问题，真正的实现 make preview great again。我们可以使用 as 内置的 sample data，也可以自定义数据，数据会体现在预览界面上，让我们的预览更接近实际运行效果。

as 内置 sample data

Android Studio 内置了一些 sample data，我们可以直接使用。

item.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:id="@+id/imageView"android:layout_width="64dp"android:layout_height="64dp"android:layout_marginStart="16dp"android:layout_marginTop="16dp"android:layout_marginBottom="16dp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"tools:ignore="ContentDescription"tools:src="@tools:sample/avatars" /><TextViewandroid:id="@+id/textView2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="16dp"app:layout_constraintStart_toEndOf="@+id/imageView"app:layout_constraintTop_toTopOf="@+id/imageView"tools:text="@tools:sample/full_names"tools:textColor="#000"tools:textSize="20sp" /><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="16dp"app:layout_constraintStart_toStartOf="@+id/textView2"app:layout_constraintTop_toBottomOf="@+id/textView2"tools:text="@tools:sample/us_phones"tools:textColor="#666"tools:textSize="14sp" /><TextViewandroid:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginEnd="24dp"app:layout_constraintBottom_toBottomOf="@+id/imageView"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintTop_toTopOf="@+id/imageView"tools:text="@tools:sample/date/mmddyy"tools:textColor="#666"tools:textSize="14sp" /></androidx.constraintlayout.widget.ConstraintLayout>

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/main"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".ui.main.MainFragment"><androidx.recyclerview.widget.RecyclerViewandroid:layout_width="match_parent"android:layout_height="match_parent"tools:itemCount="10"tools:listitem="@layout/test_sample_data_item" />
</androidx.constraintlayout.widget.ConstraintLayout>

我们看一下预览效果是不是比之前的好一些呢，每个 item 都有不同的数据，而且我们也不需要引入额外的测试数据。

除了上面用到的 avatar, name 之类的，sample data 还有很多类型，基本上能满足我们的日程需求，具体含义可以参考官方文档。

自定义 sample data

如果 Android Studio 提供的 sample data 还不能满足你的需求，比如内置的姓名只有英文，你一定要预览中文名字，这时候可以自定义数据。

我们可以通过 new -> Sample Data directory 来创建数据目录。在 sampledata 下创建文本文件

mynames:

亚托克斯
阿狸
阿卡丽
阿利斯塔
阿木木
艾尼维亚
安妮
艾希
奥瑞利安·索尔
阿兹尔
巴德
布里茨
布兰德

mynicknames

暗裔剑魔
九尾妖狐
暗影之拳
牛头酋长
殇之木乃伊
冰晶凤凰
黑暗之女
寒冰射手
铸星龙王
沙漠皇帝
星界游神
蒸汽机器人
复仇焰魂

在 xml 中使用 tools:text="@sample/mynicknames" 即可。

除了上面这种简单文本的定义，我们还可以使用 json 来定义数据。

loldata.json:

{"comment": "lol data - loldata.json","data": [{"name": "亚托克斯","nickname": "暗裔剑魔"},{"name": "阿狸","nickname": "九尾妖狐"},{"name": "阿卡丽","nickname": "暗影之拳"},{"name": "阿利斯塔","nickname": "牛头酋长"},{"name": "阿木木","nickname": "殇之木乃伊"},{"name": "艾尼维亚","nickname": "冰晶凤凰"}]
}

在 xml 中使用 tools:text="@sample/loldata.json/data/name" 即可

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:id="@+id/imageView"android:layout_width="64dp"android:layout_height="64dp"android:layout_marginStart="16dp"android:layout_marginTop="16dp"android:layout_marginBottom="16dp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"tools:ignore="ContentDescription"tools:src="@sample/myimg" /><TextViewandroid:id="@+id/textView2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="16dp"app:layout_constraintStart_toEndOf="@+id/imageView"app:layout_constraintTop_toTopOf="@+id/imageView"tools:text="@sample/loldata.json/data/name"tools:textColor="#000"tools:textSize="20sp" /><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="16dp"app:layout_constraintStart_toStartOf="@+id/textView2"app:layout_constraintTop_toBottomOf="@+id/textView2"tools:text="@sample/loldata.json/data/nickname"tools:textColor="#666"tools:textSize="14sp" /><TextViewandroid:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginEnd="24dp"app:layout_constraintBottom_toBottomOf="@+id/imageView"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintTop_toTopOf="@+id/imageView"tools:text="@tools:sample/date/mmddyy"tools:textColor="#666"tools:textSize="14sp" /></androidx.constraintlayout.widget.ConstraintLayout>

效果是不是还不错呢

再说点什么

google 一直在改进编辑界面的功能和体验，特别是 ConstraintLayout 推出之后，编辑和预览的功能更加强大，现在 Google 在各个大会上演示 ConstraintLayout 功能的时候基本都使用拖拽，特别是 ConstraintLayout 2.0 推出 MotionLayout 之后，编辑的功能变得更加强大，能够预览各种炫酷的动画。这些都能很好帮助开发者节省开发时间， make preview great again!

代码

https://github.com/LyCharlie/SampleDataDemo

参考文献

Google I/O '18
官方文档