让预览 RecyclerView 效果更方便的一个小技巧

阅读 1888
收藏 134
2018-02-24
原文链接:zhuanlan.zhihu.com
简评:使用 "@tools:sample/*" 资源来让 RecyclerView(或 ListView)的效果预览更方便。

相信在大多数的 Android 开发中都会和 RecyclerView(或者 ListView)打交道。常有的一个问题就是在编码时,怎么方便的看到和调整每个 item 的显示效果。

当然啦,有经验一些的开发者肯定都知道用 tools:namespace 来帮忙,今天要介绍的当然不只是这么简单。

首先,假设我们要实现的效果类似下面这样(每个 item 左边还有个头像):

这里就是通过 tools:text 来在 Android Studio 的 Preview 视图中直接显示一些简单内容(ImageView 也可以使用 tools:src)。

<TextView
    android:id="@+id/name"
    ...
    tools:text="Mark Allison"/>

现在,在 Android Studio 3.0 或以上版本中我们有了更好的方法来在开发时直接显示一些示例数据 - 那就是使用 "tools:sample/*" 中提供的数据

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
  ...>
 
  <ImageView
    android:id="@+id/avatar"
    ...
    tools:src="@tools:sample/avatars" />
 
  <TextView
    android:id="@+id/name"
    ...
    tools:text="@tools:sample/full_names" />
 
  <TextView
    android:id="@+id/city"
    ...
    tools:text="@tools:sample/cities" />
 
  <TextView
    android:id="@+id/date"
    ...
    tools:text="@tools:sample/date/ddmmyy" />
 
  <TextView
    android:id="@+id/description"
    ...
    tools:text="@tools:sample/lorem/random" />
 
</android.support.constraint.ConstraintLayout>

效果:

当然,这些自带的数据很可能没办法满足你的需求(比如只有英文),我们还可以自己创建 Sample 数据:

点击之后,文件实际所在的位置:

添加头像图片(这里用的是 Android 矢量图,也可以是其他格式的图片):

<ImageView
    android:id="@+id/avatar"
    ...
    tools:src="@sample/avatars" />

更棒的地方在于,我们还可以通过 JSON 文件的方式来组织我们的数据。比如,创建一个名为 users.json 的文件(完成后需要 build 一下):

{
  "data": [
    {
      "city": "北京",
      "avatar": "@sample/avatars",
    },
    {
      "city": "上海",
      "avatar": "@sample/avatars"
    },
    {
      "city": "广州",
      "avatar": "@sample/avatars"
    },
    {
      "city": "深圳",
      "avatar": "@sample/avatars"
    }
  ]
}

item 的部分布局代码:

<ImageView
  android:id="@+id/avatar"
  ...
  tools:src="@sample/users.json/data/avatar" />

<TextView
  android:id="@+id/city"
  ...
  tools:text="@sample/users.json/data/city" />

...

此外,定义的这些 sample data 不会被打包到 APK 中,因此不必担心会增加应用的体积。

官方文档:developer.android.com/studio/writ…

示例:Github - ToolTime

原文:Tool Time – Part 1 & Tool Time – Part 2

日报扩展阅读:

评论