Android Recyclerview多布局

今天给大家看一个recyclerview多布局的写法，是tablayout是的写法在上一篇文章中，感兴趣的兄弟可以去看看学一学

 这里是动图的地址http://qcloudcos.xunjiepdf.com/xunjievideo/temp/202205111401/45fc6ee39cf44fd5a6adb7e34b489835/video1_1.gif

我们废话不多说，直接上我们最喜欢的代码

添加一下我们的依赖

implementation 'androidx.recyclerview:recyclerview:1.1.0'

implementation 'com.github.bumptech.glide:glide:4.8.0'//glide第三方图片加载所需要的包

然后写我们的recyclerview布局

 <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recyclerview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

然后在我们的Activity或者Fragment中拿到我们的控件，我这边是在fragment中写的

package com.example.map.ui.fragment;

import android.content.Context;
import android.graphics.Rect;
import android.os.Bundle;

import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.widget.Toolbar;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.DividerItemDecoration;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;

import com.example.map.R;
import com.example.map.adapter.MyAdapter;
import com.example.map.api.ApiService;
import com.example.map.bean.WallPaperResponse;
import com.llw.network.NetworkApi;
import com.llw.network.observer.BaseObserver;
import com.llw.network.utils.KLog;
import com.yalantis.phoenix.PullToRefreshView;
import java.util.ArrayList;
import java.util.List;

public class Fragment1 extends Fragment {

    private View view;
    private RecyclerView mRecyclerView;
    private List<WallPaperResponse.ResBean.VerticalBean> list;
    private MyAdapter adapter;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.frament_1, container, false);
        initView();
        return view;
    }

    private void initView() {
        mPullToRefresh = view.findViewById(R.id.pull_to_refresh);
        mRecyclerView = view.findViewById(R.id.recyclerview);
        //创建集合
        list = new ArrayList<>();
        //创建适配器
        adapter=new MyAdapter(list,getActivity());
        //创建布局管理器
        LinearLayoutManager LayoutManager=  new LinearLayoutManager(getActivity(),LinearLayoutManager.VERTICAL, false);
        mRecyclerView.setLayoutManager(LayoutManager);
        //添加适配器
        mRecyclerView.setAdapter(adapter);
        //访问网络
        requestNetwork();

    }

    private void requestNetwork() {
        /**
         * OkHttp+Retrofit+Rxjava 网络框架
         */
        NetworkApi.createService(ApiService.class)
                .getWallPaper()
                .compose(NetworkApi.applySchedulers(new BaseObserver<WallPaperResponse>() {
                    @Override
                    public void onSuccess(WallPaperResponse wallPaperResponse) {
                        List<WallPaperResponse.ResBean.VerticalBean> vertical = wallPaperResponse.getRes().getVertical();
                        if (vertical != null && vertical.size() > 0) {
                            //把请求的数据添加到我们的集合中然后刷新适配器
                            list.addAll(vertical);
                            adapter.notifyDataSetChanged();
                        } else {
                            Toast.makeText(getActivity(), "数据为空", Toast.LENGTH_SHORT).show();
                        }
                    }

                    @Override
                    public void onFailure(Throwable e) {
                        KLog.e("MainActivity", e.toString());
                        Toast.makeText(getActivity(), "访问失败", Toast.LENGTH_SHORT).show();
                    }
                }));
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
    }

    public static Fragment1 newInstance() {
        Fragment1 fragment1 = new Fragment1();
        return fragment1;
    }

}

接下来是我们的适配器

package com.example.map.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;
import com.example.map.R;
import com.example.map.bean.WallPaperResponse;

import java.util.List;

public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private List<WallPaperResponse.ResBean.VerticalBean> list;
    private Context context;
    //三个final分别代表三个不同的布局
    public static final int ITEMONE = 1;
    public static final int ITEMTWO = 2;
    public static final int ITEMTHREE = 3;


    public MyAdapter(List<WallPaperResponse.ResBean.VerticalBean> list, Context context) {
        this.list = list;
        this.context = context;
    }


    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int i) {
        //这时候就要根据这个i来判断加哪一个布局了
        View inflate = null;
        RecyclerView.ViewHolder viewHolder = null;
        switch (i) {
            case ITEMONE:
                inflate = LayoutInflater.from(context).inflate(R.layout.rv_item, parent, false);
                viewHolder = new OneItemHolder(inflate);
                break;
            case ITEMTWO:
                inflate = LayoutInflater.from(context).inflate(R.layout.item_two, parent, false);
                viewHolder = new TwoItemHolder(inflate);
                break;
            case ITEMTHREE:
                inflate = LayoutInflater.from(context).inflate(R.layout.item_three, parent, false);
                viewHolder = new ThreeItemHolder(inflate);
                break;
        }
        return viewHolder;
    }

    /**
     * 绑定控件，这里可以写一些事件方法等
     *
     * @param holder
     * @param position
     */
    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        //如果当前的 holder 属于 OneItemHolder 则执行
        if (holder instanceof OneItemHolder){
            Glide.with(context).load(list.get(position).getImg()).into(((OneItemHolder) holder).image);

        }else if(holder instanceof TwoItemHolder){
            Glide.with(context).load(list.get(position).getImg()).into(((TwoItemHolder) holder).image1);
            Glide.with(context).load(list.get(position).getImg()).into(((TwoItemHolder) holder).image2);
        }else if (holder instanceof ThreeItemHolder){
            Glide.with(context).load(list.get(position).getImg()).into(((ThreeItemHolder) holder).image1);
            Glide.with(context).load(list.get(position).getImg()).into(((ThreeItemHolder) holder).image2);
            Glide.with(context).load(list.get(position).getImg()).into(((ThreeItemHolder) holder).image3);
        }
    }


    @Override
    public int getItemCount() {
        return list.size();
    }
    /**
     * 返回条目类型(这里就做个简单的判断区分)
     *
     * @param position 代表第几个条目
     * @return
     */
    @Override
    public int getItemViewType(int position) {

        if (position % 3 == 0) {
            return ITEMTHREE;
        } else if (position % 2 == 0) {
            return ITEMTWO;
        } else {
            return ITEMONE;
        }
    }
    /**
     * 第一个布局的Holder，要继承自RecyclerView.ViewHolder，这里你可以绑定控件
     */
    private class OneItemHolder extends RecyclerView.ViewHolder {
        private ImageView image;

        public OneItemHolder(View itemView) {
            super(itemView);
            image = itemView.findViewById(R.id.iv_img);
        }
    }
    /**
     * 第二个布局的Holder，要继承自RecyclerView.ViewHolder，这里你可以绑定控件
     */
    private class TwoItemHolder extends RecyclerView.ViewHolder {
        private ImageView image1;
        private ImageView image2;
        public TwoItemHolder(View itemView) {
            super(itemView);
            image1 = itemView.findViewById(R.id.iv_img1);
            image2 = itemView.findViewById(R.id.iv_img2);
        }
    }
    /**
     * 第三个布局的Holder，要继承自RecyclerView.ViewHolder，这里你可以绑定控件
     */
    private class ThreeItemHolder extends RecyclerView.ViewHolder {
        private ImageView image1;
        private ImageView image2;
        private ImageView image3;
        public ThreeItemHolder(View itemView) {
            super(itemView);
            image1 = itemView.findViewById(R.id.iv_img1);
            image2 = itemView.findViewById(R.id.iv_img2);
            image3 = itemView.findViewById(R.id.iv_img3);

        }
    }
}

然后是适配器中的三种布局样式

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

    <ImageView
        android:id="@+id/iv_img"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:layout_margin="5dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/bg_fragment_1" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/iv_img1"
        android:src="@mipmap/bg_fragment_1"
        android:layout_width="150dp"
        android:scaleType="centerCrop"
        android:layout_marginTop="5dp"
        android:layout_height="200dp" />
    <ImageView
        android:id="@+id/iv_img2"
        android:src="@mipmap/bg_fragment_1"
        android:layout_width="150dp"
        android:scaleType="centerCrop"
        android:layout_marginTop="5dp"
        android:layout_height="200dp" />
</LinearLayout>

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

    <ImageView
        android:id="@+id/iv_img1"
        android:layout_width="137dp"
        android:layout_height="200dp"
        android:layout_marginTop="5dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/bg_fragment_1" />

    <ImageView
        android:id="@+id/iv_img2"
        android:layout_width="137dp"
        android:layout_height="200dp"
        android:layout_marginTop="5dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/bg_fragment_1" />

    <ImageView
        android:id="@+id/iv_img3"
        android:layout_width="137dp"
        android:layout_height="200dp"
        android:layout_marginTop="5dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/bg_fragment_1" />
</LinearLayout>

然后这个就是我们的多布局的样式了项目中的网络请求是我自己封装的一个请求，到时候可以给大家发出来