QMUI Android框架使用7-QMUICommonListItemView的单独使用

官方说QMUICommonListItemView是可以单独使用的，为了能单独使用它，去看了它的源码，了解了它的布局结构。下面这个图，就是QMUICommonListItemView的UI布局结构，上篇文章也进行了源码分析。知道了布局结构，我们就可以灵活使用。

既然是单独使用，那么我们就直接在layout布局文件中引入。代码如下。从源码分析中我们得知，accessory_type、orientation、titleColor、detailColor是可以在布局文件中设置属性的。

            <com.qmuiteam.qmui.widget.grouplist.QMUICommonListItemView
                android:id="@+id/group_list_item_gender"
                android:layout_width="match_parent"
                android:layout_height="@dimen/qmui_list_item_height"
                app:qmui_accessory_type="chevron"
                app:qmui_orientation="vertical"
                app:qmui_commonList_titleColor="@color/qmui_s_link_color"
                app:qmui_commonList_detailColor="@color/qmui_config_color_red"/>

在代码中设置文字：

    @BindView(R.id.group_list_item_gender) QMUICommonListItemView mListItemGender;

        mListItemGender.setText("性别");
        mListItemGender.setDetailText("女");

运行后的效果如下。

说明确实可以直接调整属性值。不过方向qmui_orientation好像没有生效，看源码定义的declare-styleable没有给qmui_orientation设置format。可能这个原因导致设置无效吧，为也不知道是不是。

    <declare-styleable name="QMUICommonListItemView">
        <attr name="qmui_orientation"/>
        <attr name="qmui_accessory_type" format="enum">
            <enum name="none" value="0"/>
            <enum name="chevron" value="1"/>
            <enum name="switcher" value="2"/>
            <enum name="custom" value="3"/>
        </attr>
        <attr name="qmui_commonList_titleColor" format="color"/>
        <attr name="qmui_commonList_detailColor" format="color"/>
    </declare-styleable>

再设置一下小红点和new图标。先设置小红点，代码和效果如下。

        mListItemGender.setRedDotPosition(QMUICommonListItemView.REDDOT_POSITION_LEFT);
        mListItemGender.showRedDot(true);

如果要设置new图标，需要把小红点设置到右边，否则在左边会被覆盖掉。同时也要注意代码顺序，要先showNewTip，在showRedDot。否则如果是后调用showNewTip，那么showNewTip会将小红点隐藏掉（这个在源码中有体现）。

        mListItemGender.setText("性别");
        mListItemGender.setDetailText("女");
        mListItemGender.showNewTip(true);
        mListItemGender.setRedDotPosition(QMUICommonListItemView.REDDOT_POSITION_RIGHT);
        mListItemGender.showRedDot(true);

运行效果如下。可见原点显示在右边并不好，盖在了右边文字的上面。这是因为并没有将右边的文字左移，这也算是一个bug吧。

加上图标看看。添加了最后一行代码。

        mListItemGender.setText("性别");
        mListItemGender.setDetailText("女");
        mListItemGender.showNewTip(true);
        mListItemGender.setRedDotPosition(QMUICommonListItemView.REDDOT_POSITION_RIGHT);
        mListItemGender.showRedDot(true);
        mListItemGender.setImageDrawable(getResources().getDrawable(R.drawable.qmui_icon_checkbox_checked));

运行效果如下。效果还不错，除了小圆点。

那么其他的属性，使用其他也差不多了。单独使用，跟在QMUIGroupListView中使用差不多。