一、问题描述
最近在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>
![](https://i-blog.csdnimg.cn/blog_migrate/f1aa44f18d4824bc3c14db8cfc6ad267.png)
2.3 tools:itemCount 介绍
对于给定的RecyclerView,此属性指定布局编辑器应在“预览”窗口中呈现的项目数。不同的数目,预览的个数不一样。
tools:itemCount 指定为5时
tools:itemCount 指定为9时
这个属性似乎在ListView上无效
![](https://i-blog.csdnimg.cn/blog_migrate/3391183ba69cccd11c583e0cc1e32069.png)
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>