RecyclerView——垂直，水平，网格滚动视图，瀑布流

    RecycleView能够灵活实现大数据集的展示，视图的复用管理比ListView更好，能够显示列表，网格，瀑布流等形式，且不同的ViewHolder能够实现item多元化的功能。

    使用起来稍微麻烦一点，并且没有类似ListView的onItemClickListener监听事件，需要开发者自己实现。

主要介绍四种recycleView实现的视图效果

一. 垂直列表列表

方便展示，先布局recycleview的xml文件

<?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="match_parent"
    android:orientation="vertical"
   >
<Button
    android:id="@+id/btn_linear"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="列表视图"/>
    <Button
        android:id="@+id/btn_hor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="水平滚动"/>
    <Button
        android:id="@+id/btn_grid"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="网格视图"/>
    <Button
        android:id="@+id/btn_pu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="瀑布流"/>
</LinearLayout>

效果如下

设置垂直滚动列表的布局，如下

接着设置每一个列表项的布局

因为recycleview可以实现多种item，监听器需要开发者自己去实现，所以需要编写一个Adapter来实现，LinearAdapter代码如下：

package com.example.firstapp.recyclereview;

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

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

import com.example.firstapp.R;


public class LinearAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{
    private Context mcontext;
    private onItemClickListener mListener;
    public  LinearAdapter(Context context,onItemClickListener listener){
        this.mcontext = context;
        this.mListener = listener;
    }
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if(viewType == 0){
            return new LinearAdapter.LinearViewHolder(LayoutInflater.from(mcontext).inflate(R.layout.layout_linear_item, parent, false));
        }else{
            return new LinearAdapter.LinearViewHolder2(LayoutInflater.from(mcontext).inflate(R.layout.layout_linear_item2, parent, false));
        }
    }
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
        if(getItemViewType(position)==0){
            ((LinearViewHolder)holder).textView.setText("Hello World!");
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    mListener.onClick(position);
                }
            });
        }else{
            ((LinearViewHolder2)holder).textView.setText("大橙子学安卓开发");
        }

    }

    @Override
    public int getItemViewType(int position) {
        if(position % 2 == 0){
            return 0;
        }else{
            return 1;
        }
    }
    @Override
    public int getItemCount() {
        return 30;
    }
    class LinearViewHolder extends RecyclerView.ViewHolder{
        private TextView textView;
        public LinearViewHolder(@NonNull View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.tv_title);
        }
    }

    class LinearViewHolder2 extends RecyclerView.ViewHolder{
        private TextView textView;
        private ImageView imageView;
        public LinearViewHolder2(@NonNull View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.tv_title);
            imageView = itemView.findViewById(R.id.rv_image);
        }
    }

    public interface onItemClickListener{
        void onClick(int pos);
    }
}

给列表视图按钮设置点击事件LinearRecycleViewActivity

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.graphics.Rect;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import com.example.firstapp.R;

public class LinearRecycleViewActivity extends AppCompatActivity {
    private RecyclerView mRvMain;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_linear_recycle_view);
        mRvMain = (RecyclerView) findViewById(R.id.rv_main);
        mRvMain.addItemDecoration(new MyDecoration());
        mRvMain.setLayoutManager(new LinearLayoutManager(LinearRecycleViewActivity.this));
        mRvMain.setAdapter(new LinearAdapter(LinearRecycleViewActivity.this, new LinearAdapter.onItemClickListener() {
            public void onClick(int pos) {
                Toast.makeText(LinearRecycleViewActivity.this, "click" + pos, Toast.LENGTH_SHORT).show();
            }
        }));
    }
    class MyDecoration extends RecyclerView.ItemDecoration{
        @Override
        public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
            super.getItemOffsets(outRect, view, parent, state);
            outRect.set(0,0,0,getResources().getDimensionPixelOffset(R.dimen.dividerHeight));
        }
    }
}

最终效果如图

 

二. 水平滚动列表

和垂直滚动条基本一致

对于列表的布局稍有不同，就是最外层linearlayout的宽和高都设置为match_parent,如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/rv_hor"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorGray"/>
</LinearLayout>

 对列表里每一个item的布局，设置一个背景颜色

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@color/colorAccent">
<TextView
    android:id="@+id/tv_title"
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:gravity="center"
    android:textColor="#000"
    android:textSize="20sp"
    />
</LinearLayout>

 这里水平滚动的分割条和垂直的不同，滚动条主要是一个细长透明矩形包裹着item，outRect分别设置的是左，上，右，下的样式，垂直滚动，设置第四个变量（下）的值，其余为0，水平滚动设置第二个（右）的值，其余为0.

class MyDecoration extends RecyclerView.ItemDecoration{
        @Override
        public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
            super.getItemOffsets(outRect, view, parent, state);
            outRect.set(0,0,getResources().getDimensionPixelOffset(R.dimen.dividerHeight),0);
        }
    }

在这里设置样式我们引用了res包下面的values包下的dimen.xml文件，设置宽度为2dp的一个透明间距，所以显示出来的空格间距的颜色应该是背景颜色的底色。

其余设置和垂直滚动大同小异。

三.网格视图

同样对于gridview的布局没什么差别

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/rv_grid"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"/>
</LinearLayout>

同样是设置布局管理器为网格型，设置列数为3

package com.example.firstapp.recyclereview;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;
import android.widget.GridView;
import android.widget.Toast;

import com.example.firstapp.R;

public class GridRecycleViewActivity extends AppCompatActivity {
    private RecyclerView mRvGrid;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grid_recycle_view);
        mRvGrid =(RecyclerView) findViewById(R.id.rv_grid);
        mRvGrid.setLayoutManager(new GridLayoutManager(GridRecycleViewActivity.this,3));//差别在这里
        mRvGrid.setAdapter(new GridAdapter(GridRecycleViewActivity.this, new GridAdapter.onItemClickListener() {
            @Override
            public void onClick(int pos) {
                Toast.makeText(GridRecycleViewActivity.this,"click:"+pos,Toast.LENGTH_SHORT).show();
            }
        }));
    }
}

GridAdapter

package com.example.firstapp.recyclereview;

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

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

import com.example.firstapp.R;


public class GridAdapter extends RecyclerView.Adapter<GridAdapter.LinearViewHolder>{
    private Context mcontext;
    private onItemClickListener mListener;
    public GridAdapter(Context context, onItemClickListener listener){
        this.mcontext = context;
        this.mListener = listener;
    }
    @Override
    public GridAdapter.LinearViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        GridAdapter.LinearViewHolder linearViewHolder = new GridAdapter.LinearViewHolder(LayoutInflater.from(mcontext).inflate(R.layout.layout_grid_item, parent, false));
        return linearViewHolder;
    }
    @Override
    public void onBindViewHolder(GridAdapter.LinearViewHolder holder, final int position) {

        holder.textView.setText("Hello");
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mListener.onClick(position);
            }
        });
    }
    @Override
    public int getItemCount() {
        return 80;
    }
    class LinearViewHolder extends RecyclerView.ViewHolder{
        private TextView textView;
        public LinearViewHolder(@NonNull View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.tv_title);
        }
    }
    public interface onItemClickListener{
        void onClick(int pos);
    }
}

对每一个网格视图的item布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
<TextView
    android:id="@+id/tv_title"
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:gravity="center"
    android:textColor="#000"
    android:textSize="20sp"
    />
</LinearLayout>

最终效果：

四. 瀑布流

瀑布流主要是展示不同尺寸大小的图片，交错排列，用的StaggeredGridLayoutManager，其他各项设置和上面一样。

效果如图：