RecyclerView 与 GirdLayout 一起使用实现

2018-03-06 本文已影响574人恒夕

由于之前做一个小项目的时候其中需要展示一个页面，如图所示：

GIF.gif

遇到这样的需求的时候，我的第一印象就是想用 RecyclerView 的嵌套使用。但是由于 RecyclerView 相互嵌套用在这种情况下比较浪费，况且在相互嵌套的情况下出了一些问题我暂时不知道怎么解决。

所以我用了另外一个方式进行替代：GirdLayout 动态添加 view 。
说到 GirdLayout （网格布局）它是 Android 4.0 以后引入的一个新布局。
其中最重要的两个属性是：

android:layout_columnWeight 
android:layout_rowWeight

其中第一个表示的是列数，也就是总共要分为几列。第二个表示的是行数，也就是说要分成几行。显然，这很符合这个页面的展示要求，但是作为商品的部分展示，我们又不能知道商品的数量，所以我们不能在 xml 里面设置。所以我们需要动态添加 view 。let's do it.

整体思路：
recyclerView + GirdLayout 商品的所有相关信息通过 LayoutInflater 转换为 view ，GirdLayout 动态添加 view ,RecyclerView 实现多个不同类型的商品。

其中涉及两个部分：
1.在添加 view 的时候，View 之中涉及图片大小，由于我们设置列数，由于 Gridlayout 宽度设置 match_parent ，所以整个布局的宽度可以确定。但是如果设置行数的话，那么 Gridlayout 长度设置为 match_parent 的话，那么会对于里面的布局会比较难看，但是如果设置固定的长度，那么对于手机适配这一方面，也会有比较大的差别。所以最好的方法是根据图片的宽度来设置高度。设置方法有多种，其中参考网上觉得最容易的一种是重写 ImageView 方法里面的 onMeasure() 方法。将长度与宽度相互联系。

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
    }

这是商品信息的布局文件，RelativeLayout 宽度一定要 match_parent,因为这样才能适应 GirdLayout 在设置列数时能完全占满宽度。SquareView 是重写 onMeasure() 的 ImageView ,由于重写了计算长度的方法，所以 layout_height 可以设置为 0dp ,减少绘制。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

   <com.example.administrator.animationview.SquareView
       android:id="@+id/show_iv_showimg"
       android:layout_width="match_parent"
       android:layout_height="0dp" />

    <LinearLayout
        android:id="@+id/linearLayout_2"
        android:layout_below="@+id/show_iv_showimg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp">
        <TextView
            android:layout_weight="6"
            android:id="@+id/show_service_tv_serviceNick_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12sp"/>
        <TextView
            android:gravity="end"
            android:layout_weight="4"
            android:id="@+id/show_service_tv_servicePrice_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp"/>
    </LinearLayout>
</RelativeLayout>

在动态添加 view 的过程，在 onBindViewHolder() 这个方法中动态添加 view 。

private void addView(ViewHolder viewHolder, final List<MessageBean> messageBeans){
        viewHolder.showMessage.removeAllViews();
        final int columcounts = viewHolder.showMessage.getColumnCount();
        int marginlength = DipUtils.dipTopx(context,6);

        for(int i=0;i<messageBeans.size();i++){
            Log.d("ooo",messageBeans.size()+"");
            GridLayout.Spec rowSpec =  GridLayout.spec(i/columcounts);
            GridLayout.Spec columSpec = GridLayout.spec(i%columcounts,1.0f);

            View view = LayoutInflater.from(viewHolder.showMessage.getContext()).inflate(R.layout.item_gl_show,viewHolder.showMessage,false);
            SquareView squareView = view.findViewById(R.id.show_iv_showimg);
            TextView  nick = view.findViewById(R.id.show_service_tv_serviceNick_2);
            TextView  price = view.findViewById(R.id.show_service_tv_servicePrice_2);
            squareView.setImageResource(messageBeans.get(i).getImg());
            nick.setText(messageBeans.get(i).getNick());
            price.setText(messageBeans.get(i).getPrice());


            final int finalI1 = i;
            squareView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(context,messageBeans.get(finalI1).getNick()+ finalI1,Toast.LENGTH_SHORT).show();
                }
            });

            GridLayout.LayoutParams layoutParams = new GridLayout.LayoutParams(new ViewGroup.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT));
            layoutParams.rowSpec=rowSpec;
            layoutParams.columnSpec=columSpec;
            layoutParams.setMargins(marginlength, marginlength, marginlength, marginlength);
            viewHolder.showMessage.addView(view, layoutParams);
        }

在这段代码中，getColumnCount() 方法就是获取 xml 文件中 GirdLayout 设置的列数。而其中的 dipTopx() 这个方法是 dp 转化为像素的方法，主要是为了之后 GirdLayout 设置 margin 参数。关于 dp ，px，sp 区别与联系这篇文章详细讲解，不再细说。
http://blog.csdn.net/zhoujiyu123/article/details/54407719

然后就是 GirdLayout 的 rowSpec/columnSpec 分别表示的是行/列配置对象，这里分别用（除/模）得到子控件的（行/列）索引值。GridLyout 设置需要 LayoutParams 对象。这里还涉及一个知识点就是 LayoutInflater.inflate 参数问题：
下面链接提供详细参考：
http://blog.csdn.net/u012702547/article/details/52628453
http://blog.csdn.net/runningampH/article/details/51003264

总的来说假如是
inflate(@LayoutRes int resource, @Nullable ViewGroup root，boolean attachToRoot)
三个参数。

假如 root 不为 null ，且 attachToRoot 为 true 的话，那么在父布局 root 中将会添加-这个 resource ，不用再 root.addView() 就已经有该布局。
假如 root 不为 null ，且 attachToRoot 为 false ，那么不会将 resource 添加进去。但是 resource 中的根布局的参数将会有效，因为 layout_width ,layout_height 都是依赖父布局而存在的。
假如 root 为null，不论 attachToRoot 为 true 还是为 false，显示效果都是一样的。当 root 为 null 表示我不需要将第一个参数所指定的布局添加到任何容器中，同时也表示没有任何容器来来协助第一个参数所指定布局的根节点生成布局参数。那么系统就会为我们默认生成一个LayoutParams，通过 generateDefaultLayoutParams() 方法来生成。

protected LayoutParams generateDefaultLayoutParams() {
    return new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
}

而对于两种参数:
public View inflate(@LayoutRes int resource, @Nullable ViewGroup root)

root 不为 null ，则与 attachRoot 为 true 情况相同。
root 为 null ， attchRoot 为 false 或 true 都无关。

RecyclerView 与 GirdLayout 一起使用实现

猜你喜欢

热点阅读