QMUI Android框架使用6-QMUIGroupListSectionHeaderFooterView的3种用法

上2篇文章分析了QMUIGroupListSectionHeaderFooterView的源码结构和属性样式，大概知道了它是怎么被调用的，以及设置了哪些属性样式，那么我们就可以手动的创建出跟官方一模一样的样式效果了。

那么现在就来体验吧。使用3种方式做出QMUIGroupListSectionHeaderFooterView的效果：官方QMUIGroupListView的用法，QMUIGroupListSectionHeaderFooterView的用法，和自定义TextView的用法。

1、先看看官方QMUIGroupListView的用法。

官方的用法比较简单，就是调用QMUIGroupListView的newSection方法创建一个新的section后，再调用setTitle设置标题即可。如果不设置标题，则会默认留空白间距。

整个布局文件的代码如下，只是添加了一个QMUIGroupListView。

<LinearLayout 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"
    android:background="?attr/app_primary_color"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".GridLayoutActivity">

    <com.qmuiteam.qmui.widget.QMUITopBar
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/qmui_topbar_height" />
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/qmui_config_color_background">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <!--官方QMUIGroupListView的用法-->
            <com.qmuiteam.qmui.widget.grouplist.QMUIGroupListView
                android:id="@+id/group_list_item_contact"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </LinearLayout>

    </ScrollView>
</LinearLayout>

代码部分，可以添加一个QMUICommonListItemView，用于增加显示效果。其余的就如官方演示的那样，newSection后就setTitle，然后addTo成员变量即可。

至于这个变量mGroupListContact，则在头部定义。

@BindView(R.id.group_list_item_contact)
    QMUIGroupListView mGroupListContact;

        QMUICommonListItemView listItemName = mGroupListContact.createItemView("平台名称");
        listItemName.setDetailText("优快云");
        listItemName.setAccessoryType(QMUICommonListItemView.ACCESSORY_TYPE_CHEVRON);

        QMUIGroupListView.newSection(this)
                .setTitle("基本信息-官方用法")
                .addItemView(listItemName,null)
                .addTo(mGroupListContact);

上面的代码，放到相应Activity的onCreate函数即可。运行后的效果图如下。

2、单独直接使用QMUIGroupListSectionHeaderFooterView的用法。

官方说了，QMUIGroupListSectionHeaderFooterView是可以单独使用的，那么我们就单独使用一下。

在布局文件中添加QMUIGroupListSectionHeaderFooterView控件，这个需要手动的添加代码。代码如下。为了对比效果，我们在后面也添加了一个TextView。

            <!--官方QMUIGroupListView的用法-->
            <com.qmuiteam.qmui.widget.grouplist.QMUIGroupListView
                android:id="@+id/group_list_item_contact"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
            <!--单独直接使用QMUIGroupListSectionHeaderFooterView的用法-->
            <com.qmuiteam.qmui.widget.grouplist.QMUIGroupListSectionHeaderFooterView
                android:id="@+id/group_list_section_header_contact"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="@dimen/qmui_list_item_height"
                android:paddingLeft="@dimen/common_content_spacing"
                android:background="@drawable/qmui_s_list_item_bg_with_border_double"
                android:ellipsize="end"
                android:gravity="left|center_vertical"
                android:includeFontPadding="false"
                android:textSize="?attr/qmui_common_list_item_title_h_text_size"
                android:textColor="?attr/qmui_config_color_gray_1"
                android:text="平台名称"/>

可以看到，布局文件里面并未做任何设置。需要在代码里面设置内容。代码方面，先定义这个的成员变量，然后只需要调用setText设置文本内容即可。

    @BindView(R.id.group_list_section_header_contact)
    QMUIGroupListSectionHeaderFooterView mHeaderFooterContact;

在onCreate函数里面初始化。

        //第二种用法，设置标题内容
        mHeaderFooterContact.setText("第二种：使用QMUIGroupListSectionHeaderFooterView");

最后运行，看看效果，跟第一种是一样的。

3、自定义TextView样式的用法。

自定义的用法，就是说我们不使用QMUI框架的类，用我们自己的TextView，来达到同样的效果。

创建一个TextView用作QMUIGroupListSectionHeaderFooterView，看看上篇文章中应用了哪些样式，那么我们就应用这些样式。布局文件xml的代码如下。

            <!--自定义的用法。第一个TextView就是QMUIGroupListSectionHeaderFooterView-->
            <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"
                android:paddingLeft="?attr/qmui_content_padding_horizontal"
                android:paddingRight="?attr/qmui_content_padding_horizontal"
                android:paddingTop="@dimen/qmui_group_list_section_header_footer_padding_vertical"
                android:paddingBottom="@dimen/qmui_group_list_section_header_footer_padding_vertical"
                android:text="第三种：自定义用法"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="@dimen/qmui_list_item_height"
                android:paddingLeft="@dimen/common_content_spacing"
                android:background="@drawable/qmui_s_list_item_bg_with_border_double"
                android:ellipsize="end"
                android:gravity="left|center_vertical"
                android:includeFontPadding="false"
                android:textSize="?attr/qmui_common_list_item_title_h_text_size"
                android:textColor="?attr/qmui_config_color_gray_1"
                android:text="平台名称"/>

至于代码部分，则不需要代码。直接在layout布局文件中设置样式即可。最后运行的效果如下，跟上两种的效果一样。

最后总结：3种方法各有各的用处，灵活运用，就可以使用不同的场景，并且可以自己改造。