QMUIStickySectionLayout使用方法

这里介绍的是Sticky Section for List

QMUIStickySectionLayout 用于解决两个需求场景：

1.可折叠展开的 section 列表（list/grid）

2.类似 iOS 一样可以在列表（list/grid）滚动过程中悬浮（sticky）当前的 section header

截图

二级条目

QMUIStickySectionLayout 的Wiki很简略难以看懂

开始

导入库我们就不说了直接上重点

---

1.通过XML代码构造QMUIStickySectionLayout实例：

<com.qmuiteam.qmui.widget.section.QMUIStickySectionLayout
  android:id="@+id/section_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/>

2. 准备好两个数据模型，头部和脚部

Header

import cn.jiulang.efficiency.UIcomponent.UINote.AccountBook.Tree.ItemBase.SectionHeader;
import com.qmuiteam.qmui.widget.section.QMUISection;

public class SectionHeader implements QMUISection.Model<SectionHeader> {
    private String tvWeek;
    private String tvDate;
    private String tvTotalAmount;
    public SectionHeader(String name1, String name2, String name3) {
        this.tvWeek = name1;
        this.tvDate = name2;
        this.tvTotalAmount = name3;
    }
    public String getWeek() {
        return tvWeek;
    }
    public String getDate() {
        return tvDate;
    }
    public String getTotalAmount() {
        return tvTotalAmount;
    }
    @Override
    public SectionHeader cloneForDiff() {
        return new SectionHeader(getWeek(), getDate(), getTotalAmount());
    }
    @Override
    public boolean isSameItem(SectionHeader other) {
      return tvWeek == other.tvWeek || (tvWeek != null && tvWeek.equals(other.tvWeek))
            && tvDate == other.tvDate || (tvDate != null && tvDate.equals(other.tvDate))
            && tvTotalAmount == other.tvTotalAmount || (tvTotalAmount != null && tvTotalAmount.equals(other.tvTotalAmount));           
    }
    @Override
    public boolean isSameContent(SectionHeader other) {
        return true;
    }
}

Item

public class SectionItem implements QMUISection.Model<SectionItem> {
    private String tvTag;
    private String tvNote;
    private String tvAccount;

    public SectionItem(String name1, String name2, String name3) {
        this.tvTag = name1;
        this.tvNote = name2;
        this.tvAccount = name3;
    }
    public String getTag() {
        return tvTag;
    }
    public String getNote() {
        return tvNote;
    }
    public String getAccount() {
        return tvAccount;
    }
    @Override
    public SectionItem cloneForDiff() {
        return new SectionItem(getTag(), getNote(), getAccount());
    }
    @Override
    public boolean isSameItem(SectionItem other) {
        return //tvTag == other.tvTag || (tvTag != null && tvTag.equals(other.tvTag))
          //  && tvNote == other.tvNote || (tvNote != null && tvNote.equals(other.tvNote))
            tvAccount == other.tvAccount || (tvAccount != null && tvAccount.equals(other.tvAccount));         
    }
    @Override
    public boolean isSameContent(SectionItem other) {
        return true;
    }
}

QMUISection.Model 的接口 isSameItem 与 isSameContent 的概念都来源于 DiffUtil， 如果对 DiffUtil还不了解的话， 可以去官网查看与学习。

在 QMUIDemo 中，提供了 SectionHeader 和 SectionItem 的示例，可点击查看。

在准备好这两个 model 后，我们就可以构建 adapter 需要用到的 QMUISection<H, T> 了, 其中 H、T 就是之前准备的 SectionHeader 和 SectionItem。

3.构建Adapter

public class QDListSectionAdapter extends QMUIDefaultStickySectionAdapter<SectionHeader, SectionItem> {
    private TextView tvTag ,tvNote,tvAccount;
    @NonNull
    @Override
    protected ViewHolder onCreateSectionHeaderViewHolder(@NonNull ViewGroup viewGroup) {
        return new ViewHolder(new QDSectionHeaderView(viewGroup.getContext()));
    }
    public QDListSectionAdapter() {
    }
    public QDListSectionAdapter(boolean removeSectionTitleIfOnlyOneSection) {
        super(removeSectionTitleIfOnlyOneSection);
    }
    @NonNull
    @Override
    protected ViewHolder onCreateSectionItemViewHolder(@NonNull ViewGroup viewGroup) {
        Context context = viewGroup.getContext();
        //这里是通过xml绑定布局，当然你也可以用代码new出来，方法请看头部视图
        View itemView = LayoutInflater.from(context).inflate(R.layout.note_rv_tree_second, viewGroup, false);
       
        return new ViewHolder(itemView);
    }
    @Override
    protected void onBindSectionHeader(final ViewHolder holder, final int position, QMUISection<SectionHeader, SectionItem> section) {
        QDSectionHeaderView itemView = (QDSectionHeaderView) holder.itemView;
        itemView.render(section.getHeader(), section.isFold());
        //点击事件
        itemView.getArrowView().setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {                 
                    int pos = holder.isForStickyHeader ? position : holder.getAdapterPosition();
                    toggleFold(pos, false);
                }
            });
    }
    @Override
    protected void onBindSectionItem(ViewHolder holder, int position, QMUISection<SectionHeader, SectionItem> section, int itemIndex) {
        //获取id
        tvTag = holder.itemView.findViewById(R.id.Tag_text);
        //设置文本
        tvTag.setText(section.getItemAt(itemIndex).getTag());
        tvNote = holder.itemView.findViewById(R.id.Note_text);
        tvNote.setText(section.getItemAt(itemIndex).getNote());
        tvAccount = holder.itemView.findViewById(R.id.Account_text);
        tvAccount.setText(section.getItemAt(itemIndex).getAccount());
       
    }
}

创建头部视图(不然会报空指针)

public class QDSectionHeaderView extends RelativeLayout {

    private TextView tvWeek,tvDate,tvTotalAmount; 
private ImageView mArrowView;  private int headerHeight = QMUIDisplayHelper.dp2px(getContext(), 56);
    public QDSectionHeaderView(Context context) {
        this(context, null);
    }
    public QDSectionHeaderView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        setOrientation(LinearLayout.HORIZONTAL);
        setGravity(Gravity.CENTER_VERTICAL);
        setBackgroundColor(Color.WHITE);
        int paddingHor = QMUIDisplayHelper.dp2px(context, 24);
        mTitleTv = new TextView(getContext());
        mTitleTv.setTextSize(20);
        mTitleTv.setTextColor(Color.BLACK);
        mTitleTv.setPadding(paddingHor, 0, paddingHor, 0);
        addView(mTitleTv, new LinearLayout.LayoutParams(
                0, ViewGroup.LayoutParams.WRAP_CONTENT, 1f));
        mArrowView = new AppCompatImageView(context);
        mArrowView.setImageDrawable(QMUIResHelper.getAttrDrawable(getContext(),
                R.attr.qmui_common_list_item_chevron));
        mArrowView.setScaleType(ImageView.ScaleType.CENTER);
        addView(mArrowView, new LinearLayout.LayoutParams(headerHeight, headerHeight));tvWeek = new TextView(getContext());

        tvWeek.setTextSize(21);

        tvWeek.setTextColor(Color.BLACK);

        RelativeLayout.LayoutParams rlWeek = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

        rlWeek.addRule(RelativeLayout.ALIGN_PARENT_LEFT);

        rlWeek.addRule(RelativeLayout.CENTER_VERTICAL);

        layout.addView(tvWeek, rlWeek);

        tvDate = new TextView(getContext());

        tvDate.setTextSize(16);

        tvDate.setTextColor(Color.BLACK);     

        RelativeLayout.LayoutParams rlDate = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

        //与父组件顶部对齐

        rlDate.addRule(RelativeLayout.ALIGN_PARENT_TOP);

        //横向居中

        rlDate.addRule(RelativeLayout.CENTER_HORIZONTAL); 

        layout.addView(tvDate, rlDate);

        tvTotalAmount = new TextView(getContext());

        tvTotalAmount.setTextSize(19);

        tvTotalAmount.setTextColor(Color.BLACK);

        RelativeLayout.LayoutParams rlTotalAmount = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

        rlTotalAmount.addRule(RelativeLayout.LEFT_OF, mArrowView.getId());

        rlTotalAmount.addRule(RelativeLayout.CENTER_VERTICAL);

        layout.addView(tvTotalAmount, rlTotalAmount);

    }
    public ImageView getArrowView() {
        return mArrowView;
    }
    public void render(SectionHeader header, boolean isFold) {
        mTitleTv.setText(header.getText());
        mArrowView.setRotation(isFold ? 0f : 90f);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec,
                MeasureSpec.makeMeasureSpec(headerHeight, MeasureSpec.EXACTLY));
    }

adaper就写好了

接下来就初始化就行了

private QMUIStickySectionLayout mSectionLayout;
    private RecyclerView.LayoutManager mLayoutManager;
    protected static QMUIStickySectionAdapter<SectionHeader, SectionItem, QMUIStickySectionAdapter.ViewHolder> mAdapter;

    private void initAdapter() {
        mLayoutManager = createLayoutManager();
        mSectionLayout.setLayoutManager(mLayoutManager);
        mAdapter = createAdapter();     
        mSectionLayout.setAnimation(AnimationUtils.loadAnimation(getContext(), R.anim.aword_fade_enter));
    }
    private void initAdapterLogicalOperation() {
        mAdapter.setCallback(new QMUIStickySectionAdapter.Callback<SectionHeader, SectionItem>() {
                @Override
                public void loadMore(final QMUISection<SectionHeader, SectionItem> section, final boolean loadMoreBefore) {
                }
                //点击事件
                @Override
                public void onItemClick(QMUIStickySectionAdapter.ViewHolder holder, int position) {
                    if (holder.getItemViewType() != 1) {
                        int pos = holder.isForStickyHeader ? position : holder.getAdapterPosition();
                        mAdapter.toggleFold(pos, false);                 
                    }
                    //  Toast.makeText(getContext(), "click item " + mAdapter.getItemIndex(position), Toast.LENGTH_SHORT).show();
                }
                //长按事件
                @Override
                public boolean onItemLongClick(QMUIStickySectionAdapter.ViewHolder holder, int position) {
                    int FirstPos = mAdapter.getSectionIndex(position);
                    int SecondPos =mAdapter.getItemIndex(position);             
                  //  ItemPopupWindow.show(getContext(), holder.itemView, holder.getItemViewType(), FirstPos, SecondPos);
                    // Toast.makeText(getContext(), "一级条目" +FirstPos+ "二级"+ SecondPos, Toast.LENGTH_SHORT).show();
                    return true;
                }
            });
        mSectionLayout.setAdapter(mAdapter, true);
        mAdapter.setData(getList(0));
    }

protected QMUIStickySectionAdapter<SectionHeader, SectionItem, QMUIStickySectionAdapter.ViewHolder> createAdapter() {
        return new QDListSectionAdapter(true);
    }
    protected RecyclerView.LayoutManager createLayoutManager() {
        return new LinearLayoutManager(getContext()) {
            @Override
            public RecyclerView.LayoutParams generateDefaultLayoutParams() {
                return new RecyclerView.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            }
        };
    }

最后加载数据

模拟加载

  private static ArrayList<QMUISection<SectionHeader, SectionItem>> getList() {
        ArrayList<QMUISection<SectionHeader, SectionItem>> list = new ArrayList<>();
       
    int n = 0;
    for (int i=0;i < 5;i++) {
        SectionHeader header = new SectionHeader("周末"+i,"时间"+ i,"金额"+ i);             
        ArrayList<SectionItem> contents = new ArrayList<>();
        for (int j = 0; j <20/* 二级条目辅助数据*/; j++) {
            contents.add(new SectionItem("标签"+n, "备注"+n, "金额"+n));
            n++;
        }
        QMUISection<SectionHeader, SectionItem> section = new QMUISection<>(header, contents, i != unfold);         
        list.add(section);
    }
return list;
}

创作不易点个赞吧！