使用网格布局在RecyclerView上实现标题的最佳方法是什么?

jmi*_*ela 6 android android-recyclerview

我正在尝试实现下面的图像.我的第一个想法是让网格布局上方的所有内容都是网格的第一行,并使用SpanSizeLookup将跨度大小设置为RecyclerView中的列数,但这感觉就像会给我带来很多问题.

我一直在阅读将RecyclerView放在NestedScrollView中,人们说它有效,但我似乎无法让它正常工作.滚动似乎不正常,我不能让网格甚至在没有设置minHeight的情况下显示,但是它看起来很糟糕.

还有其他选择我不考虑或者是我应该走的方向之一吗?

这就是我想要实现的目标

Jim*_*eux 18

您对SpanSizeLookup有何期待?您可以使用以下几行来实现它(我建议使用integers.xml中的值来提高灵活性).

GridLayoutManager glm = new GridLayoutManager(getContext(), 3);
glm.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
    @Override public int getSpanSize(int position) {
        return (position == 0) ? 3 : 1;
    }
});
Run Code Online (Sandbox Code Playgroud)

如果您的标题布局需要您的常规布局没有的视图和字段,您将需要创建单独的视图并告诉您的适配器.像这样的东西.

@Override
public int getItemViewType(int position) {
    if (position == 0)
        return TYPE_HEADER;
    else
        return TYPE_REGULAR;
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    if (viewType == TYPE_HEADER) {
        MyHeaderView view = (MyHeaderView) LayoutInflater
                .from(parent.getContext())
                .inflate(R.layout.my_header_view, parent, false);
        return new MyHeaderViewHolder(view);
    } else {
        MyRegularView view = (MyRegularView) LayoutInflater
                .from(parent.getContext())
                .inflate(R.layout.my_regular_view, parent, false);
        return new MyRegularViewHolder(view);
    }
}
Run Code Online (Sandbox Code Playgroud)

一个例子标题视图可以是这样的(你会打电话来bindTo()MyHeaderViewHolder).

public final class MyHeaderView extends LinearLayout {
    @Bind(R.id.image) ImageView imageView;
    @Bind(R.id.title) TextView titleView;

    public MyHeaderView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        ButterKnife.bind(this);
    }

    public void bindTo(String imageUrl, String title) {
        Glide.with(getContext())
                .load(imageUrl).into(imageView);
        titleView.setText(title);
    }
}
Run Code Online (Sandbox Code Playgroud)