RecyclerView 垂直 水平 网格 瀑布流

RecyclerView能够灵活实现大数据集的展示,视图的复用管理比ListView更好,能够显示列表、网格、瀑布流等形式,且不同.的ViewHolder能够实现item多元化的功能。
但是使用起来会稍微麻烦一点 ,并且没有类似ListView的onItemClickListener监听事件,需要开发者自己实现。

垂直

首先创建一个activity

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 = findViewById(R.id.rv_main);
        mRvMain.setLayoutManager(new LinearLayoutManager(LinearRecycleViewActivity.this));//设置页面排列方式 默认竖直一列
        mRvMain.setAdapter(new LinearAdapter(LinearRecycleViewActivity.this));//适配器 设置单个（item）显示内容布局
        mRvMain.addItemDecoration(new MyDecoration());
    }
    class MyDecoration extends RecyclerView.ItemDecoration{
        @Override
        //RecyclerView.ItemDecoration 该类有三个方法
        //可以用来实现分割线  onDraw方法绘制背景 再将item放上
        //onDrawOver item放上去后再显示
        //getItemOffsets对item周边进行设计
        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.divideHeight));
        }
    }
}

其xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#F50505"
  >
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00FF99"

        />
</RelativeLayout>

创建Adapter 实现item布局

public class LinearAdapter extends  RecyclerView.Adapter<LinearAdapter.LinearViewHolder> {


    private Context mContext;
    public LinearAdapter(Context context){
        this.mContext = context;
    }

    class LinearViewHolder extends  RecyclerView.ViewHolder{

        private TextView textView;
        public LinearViewHolder(@NonNull View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.tv_lin);

        }
    }
    @NonNull
    @Override
    public LinearAdapter.LinearViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new LinearViewHolder(LayoutInflater.from(mContext).inflate(R.layout.layout_linear_item,parent,false));
    }

    @Override
    public void onBindViewHolder(@NonNull LinearViewHolder holder, final int position) {
        holder.textView.setText("Hello 珑瑛");//设置显示文字
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            //设置点击事件
            @Override
            public void onClick(View v) {
                Toast.makeText(mContext,"点击"+position,Toast.LENGTH_SHORT).show();
            }
        });
    }



    @Override
    public int getItemCount() {
        return 30;
    }
}

其xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="#909090">
    <TextView
        android:id="@+id/tv_lin"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="珑瑛"
        android:textSize="20sp"/>
</LinearLayout>

实现下划线
需要在 res/values/里创建一个dimens

<resources>
    <dimen name="fab_margin">16dp</dimen>
    <dimen name="divideHeight">1dp</dimen>
</resources>

在LinearRecycleViewActivity中的MyDecoration 中实现
效果如图

水平

public class HorRecycleViewActivity extends AppCompatActivity {

    private RecyclerView mRvHor;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_hor_recycle_view);
        mRvHor = findViewById(R.id.rv_hor);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(HorRecycleViewActivity.this);
        linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);//设置水平方向
        mRvHor.setLayoutManager(linearLayoutManager);
        mRvHor.setAdapter(new HorAdapter(HorRecycleViewActivity.this));
        mRvHor.addItemDecoration(new HorRecycleViewActivity.MyDecoration());
    }
    class MyDecoration extends RecyclerView.ItemDecoration{
        @Override
        //RecyclerView.ItemDecoration 该类有三个方法
        //可以用来实现分割线  onDraw方法绘制背景 再将item放上
        //onDrawOver item放上去后再显示
        //getItemOffsets对item周边进行设计
        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.divideHeight),0);
        }
    }
}

其他同上

网格

public class GrideRecyclerViewActivity extends AppCompatActivity {

    private RecyclerView mGrid;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_gride_recycler_view);
        mGrid = findViewById(R.id.rv_gride);
        mGrid.setLayoutManager(new GridLayoutManager(GrideRecyclerViewActivity.this,3));//3列
        mGrid.setAdapter(new GrideAdapter(GrideRecyclerViewActivity.this));


    }
}

瀑布流

public class PuRecycleViewActivity extends AppCompatActivity {


    private RecyclerView mRvPu;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_pu_recycle_view);
        mRvPu = findViewById(R.id.rv_pu);
        mRvPu.setLayoutManager(new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL));
        //不规则网格布局 2: 两列或两行 后面定义水平或垂直
        mRvPu.setAdapter(new PuAdapter(PuRecycleViewActivity.this));
        mRvPu.addItemDecoration(new MyDecoration());//设置间距
        
    }
    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);
            int gap = getResources().getDimensionPixelSize(R.dimen.fab_margin);
            outRect.set(gap,gap,gap,gap);
        }
    }
}

使用不同的ViewHolder

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


    private Context mContext;
    public LinearAdapter(Context context){
        this.mContext = context;
    }

    class LinearViewHolder extends  RecyclerView.ViewHolder{

        private TextView textView;
        public LinearViewHolder(@NonNull View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.tv_lin);

        }
    }
    class LinearViewHolder2 extends  RecyclerView.ViewHolder{

        private TextView textView;
        private ImageView imageView;
        public LinearViewHolder2(@NonNull View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.tv_lin);
            imageView = itemView.findViewById(R.id.iv_01);
        }
    }
    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        if (viewType == 0) {
            return new LinearViewHolder(LayoutInflater.from(mContext).inflate(R.layout.layout_linear_item, parent, false));
        }else{
            return new LinearViewHolder2(LayoutInflater.from(mContext).inflate(R.layout.layout_linear_item_2, parent, false));

        }
    }


    @Override
    public int getItemViewType(int position) {
        if(position%2 == 0){
            return 0;
        }else{
            return 1;
        }
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, final int position) {
        if(getItemViewType(position) == 0){

            ((LinearViewHolder)holder).textView.setText("Hello 珑瑛");//设置显示文字

        }else{
            ((LinearViewHolder2)holder).textView.setText(" 珑瑛");//设置显示文字

        }
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            //设置点击事件
            @Override
            public void onClick(View v) {
                Toast.makeText(mContext,"点击"+position,Toast.LENGTH_SHORT).show();
            }
        });
    }



    @Override
    public int getItemCount() {
        return 30;
    }
}