RecyclerView多布局的简单实现

一、在做项目时，我们经常会遇到如下面的

在一个窗口中，不同行的布局不同，有的是一行一个条目，有的是一行两个条目，还有四个的，还有更多，这里是数量不同，还有的是不同行里条目数量相同而布局不同，都可以用recyclerview的多布局来实现，下面就简单实现布局和数量都不同的recycle人view的多布局实例

1、使用recyclerview要到包

在gradle添加这个依赖同步就行

	compile 'com.android.support:recyclerview-v7:24.2.1'

2、在mainactivity的xml布局里直接写上recyclerview，如下

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.qianfemg.recyclerviewtext.MainActivity">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recy"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
</LinearLayout>

3、在mainactivity里findViewById找到这个控件mainactivity代码如下：

public class MainActivity extends AppCompatActivity {
    protected RecyclerView mRecy;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setContentView(R.layout.activity_main);
        initView();
        initData();
    }
    private void initData() {
        //下面的2代表的一行的size是4
        GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 4);
        gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            //返回position对应的条目所占的size
            @Override
            public int getSpanSize(int position) {
                if (position < 4)
                    //这里返回4，指的是当position满足上面条件时，一个条目占得size是4
                    //也就是说这个条目占一行，因为上面设置的一行的size是4
                    return 4;
                else if (3 <= position && position < 6)
                    //这里返回2，指的是当position满足上面条件时，一个条目占得size是2
                    // 也就是说这个条目占半行，因为上面设置的一行的size是4
                    return 2;
                else
                    //这里返回1，指的是当position满足上面条件时，一个条目占得size是1
                    // 也就是说这个条目占1/4行，因为上面设置的一行的size是4
                    return 1;
            }
        });
        //用来添加分割线
        //mRecy.addItemDecoration();
        //设置管理
        mRecy.setLayoutManager(gridLayoutManager);
        MyRecyclerAdapter adapter = new MyRecyclerAdapter();
        //设置适配器
        mRecy.setAdapter(adapter);
    }
    private void initView() {
        mRecy = (RecyclerView) findViewById(R.id.recy);
    }
}

4、下面是适配器

public class MyRecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

/*

	上面的ViewHolder是这个适配器必要的泛型，必须有。布局里有几种Type，下面就要写几个自定义的

    ViewHlder，这些自定义的ViewHolder都要继承于RecyclerView.ViewHolder。

*/
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = null;
        RecyclerView.ViewHolder viewHolder = null;
        //根据viewType生成viewHolder
        switch (viewType) {
            case 0:
                view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_type1, null);
                viewHolder = new VH(view);
                break;
            case 1:
                view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_type2, null);
                viewHolder = new VH1(view);
                break;
            case 2:
                view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_type3, null);
                viewHolder = new VH2(view);
                break;
        }
        return viewHolder;
    }
    @Override
    public void onBindViewHolder(final RecyclerView.ViewHolder holder, int position) {
        //根据条目的类型给holder中的控件填充数据
        int itemViewType = getItemViewType(position);
        switch (itemViewType) {
            case 0:
                VH vh = (VH) holder;
                vh.mTextView.setText("类型1");
                break;
            case 1:
                VH1 vh1 = (VH1) holder;
                vh1.mTextView.setText("类型2");
                vh1.mImageView.setImageResource(R.drawable.a);
                break;
            case 2:
                VH2 vh2 = (VH2) holder;
                vh2.mTextView.setText("类型3");
                break;
        }
    }
    @Override
    public int getItemCount() {
        //获取条目数，模拟数据，这里是写死的
        return 30;
    }
    @Override
    public int getItemViewType(int position) {
        //跟据position对应的条目返回去对应的样式（Type）
        if (position < 4) {
            return 0;
        } else if (4 <= position && position < 6) {
            return 1;
        } else return 2;
    }
}

5、这里就写几个简单的ViewHolder（其中没个ViewHolder都对应一个布局，同listview中多布局相似）

	第一个ViewHolder

public class VH extends RecyclerView.ViewHolder {
    TextView mTextView;
    public VH(View itemView) {
        super(itemView);
        mTextView = (TextView) itemView.findViewById(R.id.tv_type1);
    }
}

其xml布局为

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="160dp"
              android:background="#8c8a4b"
              android:orientation="vertical"
              android:padding="10dp">
    <TextView
        android:id="@+id/tv_type1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        android:gravity="center"
        android:textColor="#2c602c"
        android:textSize="18sp"/>
</LinearLayout>

第二个ViewHolder

public class VH1 extends RecyclerView.ViewHolder {
    ImageView mImageView;
    TextView mTextView;
    public VH1(View itemView) {
        super(itemView);
        mImageView= (ImageView) itemView.findViewById(R.id.iv_type2);
        mTextView= (TextView) itemView.findViewById(R.id.tv_type2);
    }
}

其xml布局为

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:padding="10dp"
              android:background="#5fb5c4"
              android:layout_height="160dp"
              android:orientation="vertical">
    <TextView
        android:id="@+id/tv_type2"
        android:textColor="#687c3d"
        android:textSize="18sp"
        android:gravity="center_horizontal"
        android:layout_width="match_parent"
        android:layout_height="60dp"/>
    <ImageView
        android:id="@+id/iv_type2"
        android:layout_width="match_parent"
        android:layout_height="80dp"/>
</LinearLayout>

第三个ViewHoler

public class VH2 extends RecyclerView.ViewHolder {
    TextView mTextView;
    public VH2(View itemView) {
        super(itemView);
        mTextView= (TextView) itemView.findViewById(R.id.tv_type3);
    }
}

其xml布局为

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:padding="10dp"
              android:background="#48308e"
              android:layout_width="match_parent"
              android:layout_height="160dp">
    <TextView
        android:id="@+id/tv_type3"
        android:layout_margin="20dp"
        android:textColor="#bf2780"
        android:gravity="center"
        android:textSize="18sp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

6、总结：按上面的思路就能简单的实现recyclerview的多布局，这个控件在开发过程中使用频率还是非常高的，希望通过这次的简单

实例能让你们学会！

RecyclerView多布局的简单实现

猜你喜欢