QMUI Android框架的QMUIGroupListView做设置中心，效果还是挺不错的。对我等专注于程序功能，而对UI设计不擅长的人，确实是一大福利。不过QMUI框架的文档样例实在是太少，哪怕是最有些基本的应用，都没有样例，比如编辑框。被逼无赖之下，只能去看源码。
官方QMUIGroupListView做的效果如下图。
按照上面的效果图，把相应的类进行拆分，那么QMUIGroupListView的类结构图，如下图所示。
每个QMUIGroupListView包含多个QMUIGroupListView.Section，每个Section包含一个QMUIGroupListSectionHeaderFooterView头部、一个QMUIGroupListSectionHeaderFooterView尾部和多个QMUICommonListItemView列表项。头部和尾部是同一个类。
头部看起来最简单，那么就先从头部开始看起吧。官方对QMUIGroupListSectionHeaderFooterView的介绍也是少的可怜，仅仅只有一句话。说作为Section的头部或尾部，也可以单独使用。至于单独如何使用，就没有讲，也没有案例了。
既然如此，那我们只好自己去看源码吧。QMUIGroupListSectionHeaderFooterView类的路径结构如图所示，要切换到Android视图。
点进去看源码吧。先把所有的方法折叠起来，看一个大概。如图所示，方法并不多。
也可以配合Structure进行查看。除了构造函数，就是set和get方法，还有一个init初始化函数，看起来很简单。
看看如何构造吧。展开构造函数，发现这么多构造函数，最终都是调用的第3个。而第3个调用了init函数进行初始化。
那看看init初始化函数吧。主要是从section的布局文件中加载视图，来创建view。同时设置一下对齐方式gravity为bottom。
那进入这个qmui_group_list_section_layout布局视图看看。发现里面就定义了一个TextView，而且id就是group_list_section_header_textView，头部或尾部的文本，就是显示在这个TextView上面。
<?xml version="1.0" encoding="utf-8"?> <merge xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:id="@+id/group_list_section_header_textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="@dimen/qmui_group_list_section_header_footer_text_size" android:textColor="?attr/qmui_config_color_gray_3" android:gravity="left" /> </merge>
那么这里setText的标题，是如何放置到QMUIGroupListView里面去的呢？那就要去看QMUIGroupListView的Section代码了。
Section通过setTitle来设置标题，setTitle调用QMUIGroupListSectionHeaderFooterView的构造函数设置了TextView的显示内容。
/** * 设置 Section 的 title * * @return Section 本身, 支持链式调用 */ public Section setTitle(CharSequence title) { mTitleView = createSectionHeader(title); return this; } /** * 创建 Section Header，每个 Section 都会被创建一个 Header，有 title 时会显示 title，没有 title 时会利用 header 的上下 padding 充当 Section 分隔条 */ public QMUIGroupListSectionHeaderFooterView createSectionHeader(CharSequence titleText) { return new QMUIGroupListSectionHeaderFooterView(mContext, titleText); }尾部也是一样，通过调用setDescription来设置，其也是构造了一个QMUIGroupListSectionHeaderFooterView。
/** * 设置 Section 的 description * * @return Section 本身, 支持链式调用 */ public Section setDescription(CharSequence description) { mDescriptionView = createSectionFooter(description); return this; } /** * Section 的 Footer，形式与 Header 相似，都是显示一段文字 */ public QMUIGroupListSectionHeaderFooterView createSectionFooter(CharSequence text) { return new QMUIGroupListSectionHeaderFooterView(mContext, text, true); }看来这个QMUIGroupListSectionHeaderFooterView类很简单，其基本功能如下：
- 该view继承至LinearLayout，也是一个线性布局。
- 在View视图里面只有一个TextView文本框。通过setText和getText方法来设置文本内容。
- 在使用时，由QMUIGroupListView创建一个Section，由Section通过调用setTitle和setDescription来动态创建一个QMUIGroupListSectionHeaderFooterView 。new这个对象时，构造函数把值传递进去。
那么这个简单的LinearLayout布局和TextView，用了哪些样式属性呢？我们通过构造函数进入到R.attr.QMUIGroupListSectionViewStyle里面去看看。如下图，看来在其他地方定义了。
我们搜索一下。在qmui_theme.xml文件中有定义。
点击QMUI.GroupListSectionView进去看看。看来这里定义了样式。只是设置上下左右各个内边距。
<style name="QMUI.GroupListSectionView"> <item name="android:paddingLeft">?attr/qmui_content_padding_horizontal</item> <item name="android:paddingRight">?attr/qmui_content_padding_horizontal</item> <item name="android:paddingTop"> @dimen/qmui_group_list_section_header_footer_padding_vertical </item> <item name="android:paddingBottom"> @dimen/qmui_group_list_section_header_footer_padding_vertical </item> </style>
那么这些内边距的值又是多少呢？我们点击第一个?attr/qmui_content_padding_horizontal进去看看（用?attr表示启用的是主题样式属性，可以随着主题变化而变化）。来到了qmui_attrs_base.xml文件，在第一行就看到了。这个格式定义成了dimesion。
<resources> <attr name="qmui_content_padding_horizontal" format="dimension"/> <!-- 已废弃 --> <attr name="qmui_content_spacing_horizontal" format="dimension"/> <!-- margin 和 padding 等使用的内容通用水平间距 -->
那我们到dimesion的定义去看看，搜索找到了qmui_dimens.xml文件，里面有qmui_content_padding_horizontal的定义。又指向了qmui_content_spacing_horizontal，而qmui_content_spacing_horizontal被定义为16dp。
<!-- 全局统一的界面左右间距，例如列表分隔线inset --> <dimen name="qmui_content_padding_horizontal">@dimen/qmui_content_spacing_horizontal</dimen> <!-- 已废弃 --> <dimen name="qmui_content_spacing_horizontal">16dp</dimen> <!-- margin 和 padding 等使用的内容通用水平间距 -->看来这个值被定义为了16dp。