Android tools & sample data: Make preview great again

最新推荐文章于 2021-05-27 02:16:28 发布

jon lee

最新推荐文章于 2021-05-27 02:16:28 发布

阅读量646

点赞数 1

分类专栏： android

本文链接：https://blog.csdn.net/u012842664/article/details/104718194

版权

android 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

    <ImageView
        android: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" />

    <TextView
        android: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" />

    <TextView
        android: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" />

    <TextView
        android: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>

Screen Shot 2020-03-05 at 00.39.46.png

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.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/test_item" />
</androidx.constraintlayout.widget.ConstraintLayout>

Screen Shot 2020-03-06 at 00.08.51.png

除了 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.RecyclerView
        android: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>

Screen Shot 2020-03-06 at 00.21.39.png

其他属性

除了上面介绍的属性之外，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">

    <ImageView
        android: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" />

    <TextView
        android: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" />

    <TextView
        android: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" />

    <TextView
        android: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.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:itemCount="10"
        tools:listitem="@layout/test_sample_data_item" />
</androidx.constraintlayout.widget.ConstraintLayout>

Screen Shot 2020-03-07 at 16.53.09.png

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

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

Screen Shot 2020-03-07 at 15.25.19.png

自定义 sample data

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

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

mynames:

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

mynicknames

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

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

Screen Shot 2020-03-07 at 15.57.19.png

除了上面这种简单文本的定义，我们还可以使用 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">

    <ImageView
        android: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" />

    <TextView
        android: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" />

    <TextView
        android: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" />

    <TextView
        android: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>

Screen Shot 2020-03-07 at 16.41.42.png

效果是不是还不错呢

再说点什么

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

代码

https://github.com/LyCharlie/SampleDataDemo

参考文献

jon lee

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android tools & sample data: Make preview great again

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

扫一扫