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

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

文章图片

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

在代码中设置文字：

@BindView(R.id.group_list_item_gender) QMUICommonListItemView mListItemGender; mListItemGender.setText("性别"); mListItemGender.setDetailText("女");

【QMUI|QMUI Android框架使用7-QMUICommonListItemView的单独使用】运行后的效果如下。

文章图片

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

再设置一下小红点和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));

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