Android的RecycleView(控件)和Viewpager2(控件)

RecycleView

        RecycleView简介          

                   从Android 5.0开始,谷歌公司推出了一个用于大量数据展示的新控件RecylerView可以用来代替 传统的ListView ,更加强大和灵活。
                   RecyclerView 是一个强大的滑动组件,与经典的 ListView 相比,同样拥有 item 回收复用的功能,这 一点从它的名字Recyclerview 即回收 view 也可以看出。
                   RecyclerView 支持 线性布局 网格布局 瀑布流布局 三种,而且同时还能够控制横向还是纵向滚 动。

        

        RecycleView是什么?

                        容器性质的控件,展示大量数据的控件,其具备三个布局形式布局:线性布局、网格布局、瀑布流布局

        RecycleView的用法是什么?

                        布局文件:

                                    1. 主布局文件中添加<RecycleView>
                                    2. 创建子项布局文件,并对其内部控件设置id

                         代码:      

  1. 创建实体类(如果有需求)

  2. 创建适配器

  3. 在活动中创建并设置适配器

  4. 在活动中设置排列方式及分隔线

  5. 设置点击事件

    案列:

第一步:布局

步骤就是
        1. 在主布局中引入控件
        2. 编写好子项布局
布局第一步 :主要是在主布局中引入 RecyclerView 控件。
注意:因为是远程导入的,所以需要把完整的包名写出来 activity_main.xml
<?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"
    android:orientation="vertical"
    android:padding="20dp"
    tools:context=".MainActivity" >

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/rv_view"/>
</LinearLayout>
布局第二步 :创建子布局,然后在子布局中,写好自己的子项布局
addressbook_item.xml
<?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"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@color/teal_700">

    <ImageView
        android:id="@+id/iv_img"
        android:layout_width="60dp"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/boy" />

    <TextView
        android:layout_marginLeft="5dp"
        android:id="@+id/tv_name"
        android:textSize="16sp"
        android:textColor="@color/white"
        android:layout_gravity="center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="男孩" />
</LinearLayout>
第二步:代码
步骤就是
        1. 编写实体类
        2. 创建适配器
        3. 在主活动中使用

 代码第一步:编写实体类

AddressBook.java

package com.hp.demo.model;

public class AddressBook {
    private String name;
    private int imgID;

    public AddressBook(String name, int imgID) {
        this.name = name;
        this.imgID = imgID;
    }

    public String getName() {
        return name;
    }

    public int getImgID() {
        return imgID;
    }
}
代码第二步 :创建适配器和点击事件
AddressBookAdapter.java
package com.hp.demo.adapter;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

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


import com.hp.demo.R;
import com.hp.demo.model.AddressBook;

import java.util.List;

public class AddressBookAdapter extends RecyclerView.Adapter<AddressBookAdapter.ViewHolder> {
    private List<AddressBook> list;

    public AddressBookAdapter(List<AddressBook> list) {
        this.list=list;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.addressbook_item,parent,false);
        ViewHolder viewHolder=new ViewHolder(view);
        return viewHolder;
    }
    public void AddressBookAdapter(List<AddressBook> list) {
        this.list = list;
    }
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        AddressBook addressBook=list.get(position);
        holder.iv_img.setImageResource(addressBook.getImgID());
        holder.tv_name.setText(addressBook.getName());
        holder.iv_img.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(view.getContext(), addressBook.getImgID()+"被点击", Toast.LENGTH_SHORT).show();
            }
        });
        holder.view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(view.getContext(),addressBook.getName()+ "被点击", Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public int getItemCount() {
        return list.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder{
        View view;
        private ImageView iv_img;
        private  TextView tv_name;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            view=itemView;
            iv_img=itemView.findViewById(R.id.iv_img);
            tv_name=itemView.findViewById(R.id.tv_name);
        }
    }
}
代码第三步 :在主活动中使用
1. 获取 RecyclerView 的实例
2. 创建 LinearLayoutManager 对象
3. 创建 AddressBookAdapter 实例
4. 模拟数据
5. 将模拟数据传入 AddressBookAdapter 的构造函数中
6. 调用 setAdapter() 方法完成适配器设置
MainActivity.java
package com.hp.demo;

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

import android.os.Bundle;
import android.widget.LinearLayout;

import com.hp.demo.adapter.AddressBookAdapter;
import com.hp.demo.model.AddressBook;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private String[] names={"小红","小黄","小绿","小白","小黑","小蓝","小青","小芬","小慧","小灰"};
    private int[] imgs={R.mipmap.gay,R.mipmap.wa,R.mipmap.nan1,R.mipmap.boy,R.mipmap.lao,R.mipmap.nv,R.mipmap.wa,R.mipmap.nv,R.mipmap.gay,R.mipmap.lao};
    //组合的数据存放的地方
    private List<AddressBook> list=new ArrayList<>();
    private RecyclerView rv_view;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initData();

        rv_view=findViewById(R.id.rv_view);
        AddressBookAdapter adapter=new AddressBookAdapter(list);
        //在设置适配器之前需要设置布局管理器
        //要不然报:RecyclerView:No layout manager attached; skipping layout
        LinearLayoutManager layoutManager=new LinearLayoutManager(this);
        //layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);加上此句话,效果会变为横向的
        //GridLayoutManager layoutManager1=new GridLayoutManager(this,2);网格布局
        rv_view.setLayoutManager(layoutManager);

        rv_view.setAdapter(adapter);
        //加上分割线VERTICAL:纵向分割
        rv_view.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL));
    }

    private void initData() {
        for (int i = 0; i < names.length; i++) {
            AddressBook addressBook=new AddressBook(names[i],imgs[i]);
            list.add(addressBook);
        }
    }
}

ViewPager2

概述

ViewPager2 是基于 RecyclerView 实现的,自然继承了 RecyclerView 的众多优点,并且针对
        ViewPager 存在的问题做了优化。
        支持垂直方向的滑动且实现极其简单。
        完全支持 RecyclerView 的相关配置功能。
        支持多个 PageTransformer
        支持 DiffUtil ,局部数据刷新和 Item 动画。
        支持模拟用户滑动与禁止用户操作。

 ViewPager2是什么?

                容器性质的控件,也是继承自RecycleView,布局管理器允许左右翻转带数据的页面

ViewPager2的用法?

           布局文件:      

 1. 主布局文件中添加<ViewPager2>
 2. 创建子项布局文件,并对其内部控件设置id

           代码:

  1. 创建实体类(如果有需求)

  2. 创建适配器

  3. 在活动中创建并设置适配器

  4. 在活动中设置排列方式及分隔线

  5. 设置点击事件

 案列

布局
<?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"
    tools:context=".MainActivity2">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/vp_roller"
        android:layout_width="match_parent"
        android:layout_height="200dp" />
</LinearLayout>
Adapter
因为 ViewPager2 是基于 RecyclerView 的,所以在使用上与 RecyclerView 的使用基本一致,而且
Adapter 用的也是 RecyclerView.Adapter。
RollerAdapter.java
package com.hp.demo.adapter;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RelativeLayout;
import android.widget.TextView;

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

import com.hp.demo.R;
import com.hp.demo.model.Roller;

import java.util.List;


public class RollerAdapter extends RecyclerView.Adapter<RollerAdapter.ViewHolder> {
    private List<Roller> list;

    public RollerAdapter(List<Roller> list){
        this.list=list;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.roller_item,parent,false);
        ViewHolder viewHolder=new ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        int i=position%4;//往右一直滑动
        Roller roller= list.get(i);//往右一直滑动
        //Roller roller= list.get(position);//固定页面
        holder.tv_title.setText(roller.getTitle());
        holder.rl_id.setBackgroundColor(roller.getColors());
    }

    @Override
    public int getItemCount() {
        //return list.size();//固定轮播
        return Integer.MAX_VALUE;//实现无限轮播
    }

    public class ViewHolder extends RecyclerView.ViewHolder{
        TextView tv_title;
        RelativeLayout rl_id;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            tv_title=itemView.findViewById(R.id.tv_title);
            rl_id=itemView.findViewById(R.id.rl_id);
        }
    }
}
MainActivity2
package com.hp.demo;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.RecyclerView;
import androidx.viewpager2.widget.CompositePageTransformer;
import androidx.viewpager2.widget.MarginPageTransformer;
import androidx.viewpager2.widget.ViewPager2;

import android.graphics.Color;
import android.os.Bundle;
import android.view.View;


import com.hp.demo.adapter.RollerAdapter;
import com.hp.demo.model.Roller;
import com.hp.demo.util.ScaleInTransformer;

import java.util.ArrayList;
import java.util.List;

public class MainActivity2 extends AppCompatActivity {
    private ViewPager2 vp_roller;
    private List<Roller> list=new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        initData();

        vp_roller=findViewById(R.id.vp_roller);
        RollerAdapter adapter=new RollerAdapter(list);

        //MarginPageTransformer,如果页面只有一个的翻动效果
        //MarginPageTransformer marginPageTransformer=new MarginPageTransformer(20);
        //vp_roller.setPageTransformer(marginPageTransformer);

        //如多页面有多个的翻动效果
        CompositePageTransformer compositePageTransformer=new CompositePageTransformer();
        compositePageTransformer.addTransformer(new MarginPageTransformer(20));
        compositePageTransformer.addTransformer(new ScaleInTransformer());
        vp_roller.setPageTransformer(compositePageTransformer);

        //预加载一个页面
        View view=vp_roller.getChildAt(0);
        if (view!=null&&view instanceof RecyclerView){
            view.setPadding(100,0,100,0);
            ((RecyclerView) view).setClipToPadding(false);
        }
        vp_roller.setAdapter(adapter);
    }

    private void initData() {
        Roller roller=new Roller(Color.YELLOW,"黄色");
        list.add(roller);
        Roller roller1=new Roller(Color.GREEN,"绿色");
        list.add(roller1);
        Roller roller2=new Roller(Color.BLUE,"蓝色");
        list.add(roller2);
        Roller roller3=new Roller(Color.BLACK,"黑色");
        list.add(roller3);
    }
}

自定义工具类(使轮播效果更美化)

ScaleInTransformer
package com.hp.demo.util;

import android.view.View;

import androidx.annotation.NonNull;
import androidx.viewpager2.widget.ViewPager2;

public class ScaleInTransformer implements ViewPager2.PageTransformer {
    public static final float DEFAULT_MIN_SCALE = 0.85f;
    public static final float DEFAULT_CENTER = 0.5f;

    private float mMinScale = DEFAULT_MIN_SCALE;
    @Override
    public void transformPage(@NonNull View page, float position) {
        int pageWidth = page.getWidth();
        int pageHeight = page.getHeight();
        //动画锚点设置为View中心
        page.setPivotX(pageWidth/2);
        page.setPivotY(pageHeight/2);
        if(position < -1){
            //屏幕左侧不可见时
            page.setScaleX(mMinScale);
            page.setScaleY(mMinScale);
            page.setPivotY(pageWidth / 2);
        } else if(position <= 1){
            if (position < 0) {
                //屏幕左侧
                //(0,-1)
                float scaleFactor = (1 + position) * (1 - mMinScale) + mMinScale;
                page.setScaleX(scaleFactor);
                page.setScaleY(scaleFactor);
                page.setPivotX(pageWidth);
            } else {
                //屏幕右侧
                //(1,0)
                float scaleFactor = (1 - position) * (1 - mMinScale) + mMinScale;
                page.setScaleX(scaleFactor);
                page.setScaleY(scaleFactor);
                page.setPivotX(pageWidth * ((1 - position) * DEFAULT_CENTER));
            }
        } else{
            //屏幕右侧不可见
            page.setPivotX(0f);
            page.setScaleY(mMinScale);
            page.setScaleY(mMinScale);
        }
    }
}


版权声明:本文为weixin_63261150原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。