RecyclerView

程序员文章站 2022-05-14 19:31:40

...

参考书籍《第一行代码》

控件类图：
RecyclerView

引入布局（在一个界面上引入别的布局界面）：

写好要被引入的界面title.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="wrap_content"
    android:background="@drawable/title_bg">

    <Button
        android:id="@+id/title_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:background="@drawable/back_bg"
        android:text="Back"
        android:textColor="#fff" />

    <TextView
        android:id="@+id/title_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Title Text"
        android:textColor="#fff"
        android:textSize="24sp" />

    <Button
        android:id="@+id/title_edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:background="@drawable/edit_bg"
        android:text="Edit"
        android:textColor="#fff" />

</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="match_parent">

    <include layout="@layout/title"/>

</LinearLayout>

类中隐藏原有标题栏：

public class MainActivity extends AppCompatActivity {


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

        //隐藏自带的标题栏
        ActionBar actionBar = getSupportActionBar();
        if(actionBar!=null){
            actionBar.hide();
        }

    }
}

创建自定义控件

由上面的控件继承图可知，自定义就继续继承就好了

创建TitleLayout类：

//重写布局控件  inflate充气（填充）
public class TitleLayout extends LinearLayout {

    public TitleLayout(Context context, AttributeSet attrs){
        super(context,attrs);
        //重写方法（传入当前上下文（内容））
        //两个参数 1：要加载的布局文件  2：给加载好的布局添加个父布局，传入this(TitleLayout)
        LayoutInflater.from(context).inflate(R.layout.title,this);
    }
}

添加自定义的控件

<?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="horizontal">

    <com.example.recyclerviewtest.TitleLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
          
</LinearLayout>

启动后就和引入布局效果一样了

通用点击事件

接下来我们可以做一些按钮的点击事件
因为我们要做的是通用的（每个context（界面）都能用的，所以要在控件中编写）

public class TitleLayout extends LinearLayout {

    public TitleLayout(Context context, AttributeSet attrs){
        super(context,attrs);
        LayoutInflater.from(context).inflate(R.layout.title,this);
        
        Button titleBack = (Button) findViewById(R.id.title_back);
        Button titleEdit = (Button) findViewById(R.id.title_edit);
        titleBack.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //获取当前Context,finish当前activity
                ((Activity)getContext()).finish();
            }
        });
        titleEdit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
            	//在哪个context中显示：当前context（getContext()）
                Toast.makeText(getContext(),"you click",Toast.LENGTH_SHORT).show();
            }
        });
    }
}

RecyclerView的学习

fruit_item.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="wrap_content">

    <ImageView
        android:id="@+id/fruit_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal" />

    <TextView
        android:id="@+id/fruit_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_marginTop="10dp" />

</LinearLayout>

activity_main.xml中放入RecyclerView控件

<?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">

    <com.example.recyclerviewtest.TitleLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

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


</LinearLayout>

新建Fruit类

public class Fruit {
    private String name;
    private int imageId;
    
    public Fruit(String name, int imageId) {
        this.name = name;
        this.imageId = imageId;
    }
    public String getName() {
        return name;
    }
    public int getImageId() {
        return imageId;
    }
}

创建FruitAdapter适配器

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

    private List<Fruit> mFruitList;

    public FruitAdapter(List<Fruit> fruitList) {
        mFruitList = fruitList;
    }

    static class ViewHolder extends RecyclerView.ViewHolder {
        ImageView fruitImage;
        TextView fruitName;

        //传入的是ReceylerView子项（每一个fruit_image和fruit_name）的最外层布局
        public ViewHolder(View view) {
            super(view);
            fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
            fruitName = (TextView) view.findViewById(R.id.fruit_name);
        }
    }


    //构建ViewHolder实例
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //加载布局fruit_item
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item, parent, false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    //对ReceylerView子项进行赋值
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Fruit fruit = mFruitList.get(position);
        holder.fruitImage.setImageResource(fruit.getImageId());
        holder.fruitName.setText(fruit.getName());
    }

    //返回ReceylerView子项数目
    @Override
    public int getItemCount() {
        return mFruitList.size();
    }

}

主活动

public class MainActivity extends AppCompatActivity {

    private List<Fruit> fruitList = new ArrayList<Fruit>();

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

        //隐藏自带的标题栏
        ActionBar actionBar = getSupportActionBar();
        if(actionBar!=null){
            actionBar.hide();
        }
		//初始化fruitList
        initFruits();
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        //这里使用LinearLayoutManager是线性布局的意思
        LinearLayoutManager layoutManager = new LinearLayoutManager (this);
        recyclerView.setLayoutManager(layoutManager);
        //构造适配器
        FruitAdapter adapter = new FruitAdapter(fruitList);
        //把recyclerView和适配器（还有数据）进行关联
        recyclerView.setAdapter(adapter);
    }

    private void initFruits() {
        for(int i=0;i<2;i++){
            Fruit apple = new Fruit("Apple", R.drawable.apple_pic);
            fruitList.add(apple);
            Fruit banana = new Fruit("Banana", R.drawable.banana_pic);
            fruitList.add(banana);
            Fruit orange = new Fruit("Orange", R.drawable.orange_pic);
            fruitList.add(orange);
            Fruit watermelon = new Fruit("Watermelon", R.drawable.watermelon_pic);
            fruitList.add(watermelon);
            Fruit pear = new Fruit("Pear", R.drawable.pear_pic);
            fruitList.add(pear);
            Fruit grape = new Fruit("Grape", R.drawable.grape_pic);
            fruitList.add(grape);
            Fruit pineapple = new Fruit("Pineapple", R.drawable.pineapple_pic);
            fruitList.add(pineapple);
            Fruit strawberry = new Fruit("Strawberry", R.drawable.strawberry_pic);
            fruitList.add(strawberry);
            Fruit cherry = new Fruit("Cherry", R.drawable.cherry_pic);
            fruitList.add(cherry);
            Fruit mango = new Fruit("Mango", R.drawable.mango_pic);
            fruitList.add(mango);
        }


    }
}

运行效果：

RecyclerView

实现横向滚动

修改fruit_item.xml中的布局

img和name垂直排列，宽度设置100dp（每个子项）
因为宽度wrap_content不美观（name有长有短），match_parent(会每个子项占一个屏幕)

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

    <ImageView
        android:id="@+id/fruit_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal" />

    <TextView
        android:id="@+id/fruit_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp" />
		<!--两个控件在100dp中水平居中，textView距img10dp距离-->
</LinearLayout>

主活动实现横向滚动

public class MainActivity extends AppCompatActivity {

    ...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        initFruits();
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        LinearLayoutManager layoutManager = new LinearLayoutManager (this);
        //横向瀑布流
        layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        recyclerView.setLayoutManager(layoutManager);
        FruitAdapter adapter = new FruitAdapter(fruitList);
        recyclerView.setAdapter(adapter);
    }
    
    ...
}

RecylerView的布局交给Manager管理
除了LinearLayoutManager线性布局管理，还有GridLayoutManager(网格)和StaggeredGridLayoutManager（瀑布流）

瀑布流

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_margin="5dp">
    <!--每个子项(每一对img和text是一个RecyclerView的子项)间距5dp-->
    <ImageView
        android:id="@+id/fruit_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal" />

    <TextView
        android:id="@+id/fruit_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp" />
    <!--两个控件在100dp中水平居中，textView距img10dp距离,居中对齐-->
</LinearLayout>

主活动

public class MainActivity extends AppCompatActivity {

    private List<Fruit> fruitList = new ArrayList<Fruit>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        initFruits();
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        //LinearLayoutManager layoutManager = new LinearLayoutManager (this);
        //参数含义  三列，排列方向：垂直
        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(layoutManager);
        FruitAdapter adapter = new FruitAdapter(fruitList);
        recyclerView.setAdapter(adapter);
    }
   ...
}

相关标签： Android入门学习 android

上一篇： Glide源码分析（一），基本加载代码流程

下一篇： Android源码系列之Handler篇（一）

RecyclerView

引入布局（在一个界面上引入别的布局界面）：

写好要被引入的界面title.xml

主界面引入：

类中隐藏原有标题栏：

创建自定义控件

创建TitleLayout类：

添加自定义的控件

通用点击事件

RecyclerView的学习

fruit_item.xml中布局

activity_main.xml中放入RecyclerView控件

新建Fruit类

创建FruitAdapter适配器

主活动

运行效果：

实现横向滚动

修改fruit_item.xml中的布局

主活动实现横向滚动

瀑布流

布局

主活动

Android使用RecyclerView实现投票系统

Android使用CardView作为RecyclerView的Item并实现拖拽和左滑删除

RecyclerView每个Position显示不同布局

Android如何使用RecyclerView打造首页轮播图

android使用ItemDecoration给RecyclerView 添加水印

Android RecyclerView上拉加载和下拉刷新

Android RecyclerView上拉加载和下拉刷新（基础版）

Android RecyclerView滚动定位

详解分别用Kotlin和java写RecyclerView的示例

android的RecyclerView实现拖拽排序和侧滑删除示例