Android使用tools:listitem属性使xml布局预览时可以显示istView和RecyclerView的item布局

一、问题描述
最近在Check团队成员代码的时候，发现大部分团队使用RecyclerView和ListView的布局文件，都没有很友好的展示出这个布局对应的item布局，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="@null"
        android:scrollbars="none" />

</android.support.constraint.ConstraintLayout>

完全不知道这个界面即将展示出来到底是什么样的效果，如何可以使该布局有一个直观的预览效果呢？

二、tools:listitem 介绍

2.1 使用 属性 tools:itemCount 和 tools:listitem 给RecyclerView添加直观预览效果

因此我建议团队成员如果这个RecyclerView和ListView的布局内容比较简单的话，可以使用tools:listitem来指定item项对应的布局文件，给这个布局加个一个直观的预览效果，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="@null"
        android:scrollbars="none"
        tools:itemCount="5"
        tools:listitem="@layout/item_list" />

</android.support.constraint.ConstraintLayout>

layout/item_list.xml 代码如下所示

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    android:gravity="center_vertical">
    <!-- 英文首字母 或者显示汉字笔画数 -->
    <TextView
        android:id="@+id/sortTitle"
        android:layout_width="match_parent"
        android:layout_height="24dp"
        android:background="#f5f5f5"
        android:paddingLeft="16dp"
        android:gravity="center_vertical"
        tools:text="A"
        android:textColor="#888888"/>

    <!--地区名称-->
    <TextView
        android:id="@+id/country_region_name"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_gravity="center_vertical"
        android:layout_below="@id/sortTitle"
        android:layout_marginLeft="16dp"
        android:gravity="center_vertical"
        tools:text="中国"
        android:textSize="16sp"
        android:textColor="#222222"/>

    <!-- 地区代码 -->
    <TextView
        android:id="@+id/areaCode"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_below="@id/sortTitle"
        android:layout_alignParentRight="true"
        android:layout_marginRight="50dp"
        android:gravity="center_vertical"
        tools:text="+86"
        android:textSize="16sp"
        android:textColor="#888888"/>

    <!--item分割线-->
    <View
        android:id="@+id/area_split_line"
        android:layout_below="@id/country_region_name"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_marginLeft="16dp"
        android:background="#dfdfdf"/>
</RelativeLayout>

上面有两个属性 tools:itemCount 和 tools:listitem，下面来介绍下这两个属性

2.2 tools:listitem 介绍

这个属性可以直接指示 RecyclerView和AdapterView的子类（比如：ListView、GridView）的item的布局文件，这样就可以在布局文件中直接有个很直观的预览效果。

这些属性不适用于Android Studio 2.2中的ListView，但这在2.3中已修复在RecyclerView中使用

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="@null"
        android:scrollbars="none"
        tools:itemCount="5"
        tools:listitem="@layout/item_list" />

</android.support.constraint.ConstraintLayout>

在ListView中使用

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@+id/lv_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="@null"
        android:scrollbars="none"
        tools:listitem="@layout/item_list" />

</android.support.constraint.ConstraintLayout>

2.3 tools:itemCount 介绍

对于给定的RecyclerView，此属性指定布局编辑器应在“预览”窗口中呈现的项目数。不同的数目，预览的个数不一样。

tools:itemCount 指定为5时

tools:itemCount 指定为9时

这个属性似乎在ListView上无效

2.4 tools:listheader 和 tools:listfooter 属性

RecyclerView 现在仅支持了以上两个 tools属性：tools:itemCount 和 tools:listitem

而对于AdapterView 的子类如 ListView, GridView 等, 还支持 tools:listheader 和 tools:listfooter 属性

如下所示：

layout/activity_listview.xml 代码如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ListView
        android:id="@+id/lv_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@null"
        android:scrollbars="vertical"
        tools:listfooter="@layout/footer_list"
        tools:listheader="@layout/header_list"
        tools:listitem="@layout/item_list" />

</RelativeLayout>

添加了一个 Header的预览效果，指定header为layout/header_list.xml

layout/header_list.xml 代码如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    android:gravity="center_vertical">
    <!-- 英文首字母 或者显示汉字笔画数 -->
    <TextView
        android:id="@+id/sortTitle"
        android:layout_width="match_parent"
        android:layout_height="24dp"
        android:background="#f5f5f5"
        android:paddingLeft="16dp"
        android:gravity="center_vertical"
        tools:text="Header Header Header Header"
        android:textColor="#888888"/>
</RelativeLayout>