RecyclerView

RecyclerView 滚动视图

强大的滚动视图，具有强大的布局功能。

滚动视图组成

每个滚动视图通常需要6部分组成

• RecyclerView 视图本身，滚动行为实现。
• Item 视图单元，滚动单元UI。
• Adapter 适配器，将数据源与滚动单元适配。
• ViewHolder 适配单元，将item中控件与自身控件绑定，实现赋值，通常以Adapter内部类形式存在。
• Layout 布局，视图以何种布局呈现。
• DataSource 数据源集合，提供数据。

强大的布局

• 水平滚动

// 仅仅将线性布局的方向切换下
layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);

• 瀑布流

// 仅仅换种布局，第一个参数为列数，第二个参数为方向。
StaggeredGridLayoutManager layoutManager =
                        new StaggeredGridLayoutManager(3,
                                StaggeredGridLayoutManager.VERTICAL);

示例代码

该代码将适配器与数据源以内部类的形式写在Activity中，可以单独写成独立文件。

furit_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"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/iv_blrbi_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"/>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp">
        <TextView
            android:id="@+id/tv_blrbi_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#444444"
            android:textSize="22dp"/>
        <TextView
            android:id="@+id/tv_blrbi_subtitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#888888"
            android:textSize="14dp"/>
    </LinearLayout>

</LinearLayout>

activity_recycler_view.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"
    tools:context=".chapter03.RecyclerViewActivity"
    android:orientation="vertical">

            <android.support.v7.widget.RecyclerView
                android:id="@+id/rv_acrv"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <Button
                    android:id="@+id/btn_acrv_vertical"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="垂直布局"/>
                <Button
                    android:id="@+id/btn_acrv_horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="水平布局"/>
                <Button
                    android:id="@+id/btn_acrv_staggeredgrid"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="瀑布流"/>

            </LinearLayout>

</LinearLayout>

RecyclerViewActivity.java

public class RecyclerViewActivity extends MyBaseActivity {

    RecyclerView rv_components;

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

        Button btn_acrv_vertical = findViewById(R.id.btn_acrv_vertical);
        btn_acrv_vertical.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                LinearLayoutManager layoutManager = new LinearLayoutManager(RecyclerViewActivity.this);
                layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
                rv_components.setLayoutManager(layoutManager);
                FuritAdapter adpter = new FuritAdapter(list);
                rv_components.setAdapter(adpter);
            }
        });

        Button btn_acrv_horizontal = findViewById(R.id.btn_acrv_horizontal);
        btn_acrv_horizontal.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                LinearLayoutManager layoutManager = new LinearLayoutManager(RecyclerViewActivity.this);
                layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
                rv_components.setLayoutManager(layoutManager);
                FuritAdapter adpter = new FuritAdapter(list);
                rv_components.setAdapter(adpter);
            }
        });

        Button btn_acrv_staggeredgrid = findViewById(R.id.btn_acrv_staggeredgrid);
        btn_acrv_staggeredgrid.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                StaggeredGridLayoutManager layoutManager =
                        new StaggeredGridLayoutManager(3,
                                StaggeredGridLayoutManager.VERTICAL);
                rv_components.setLayoutManager(layoutManager);
                FuritAdapter adpter = new FuritAdapter(list);
                rv_components.setAdapter(adpter);
            }
        });

        initRecyclerView();
    }
    
    /**
     * 初始化滚动视图
     */ 
    private void initRecyclerView() {
        List<Fruit> list = new ArrayList<>();
        // 创建数据源集合
        Fruit apple = new Fruit("apple", R.drawable.apple);
        Fruit banana = new Fruit("banana", R.drawable.banana);
        for (int i=0; i<20; i++) {
            list.add(apple);
            list.add(banana);
        }
        // 创建适配器
        FuritAdapter adpter = new FuritAdapter(list);
        // 创建布局
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        // 设置布局及适配器
        rv_components = findViewById(R.id.rv_acrv);
        rv_components.setLayoutManager(layoutManager);
        rv_components.setAdapter(adpter);
    }

    /**
     * 内部类 水果实体类
     */
    private class Fruit {

        private String name;
        private int imageId;

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

        public int getImageId() {
            return imageId;
        }

        public void setImageId(int imageId) {
            this.imageId = imageId;
        }

        public Fruit(String name, int imageId) {
            this.name = name;
            this.imageId = imageId;
        }
    }

    /**
     * 内部类 适配器
     */
    private class FuritAdapter extends RecyclerView.Adapter<FuritAdapter.ViewHolder> {

        private List<RecyclerViewActivity.Fruit> mList;
        
        /**
         * view holder 内部类，在其中获取控件
         */ 
        class ViewHolder extends RecyclerView.ViewHolder {

            ImageView icon;
            TextView title;
            TextView subTitle;

            public ViewHolder(View view) {
                super(view);
                icon = view.findViewById(R.id.iv_blrbi_icon);
                title = view.findViewById(R.id.tv_blrbi_title);
                subTitle = view.findViewById(R.id.tv_blrbi_subtitle);
            }
        }

        public FuritAdapter(List<Fruit> list) {
            mList = list;
        }

         /**
          * 创建viewholder
          */  
        @NonNull
        @Override
        public FuritAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
            // 加载xml中的视图
            View view = LayoutInflater.from(viewGroup.getContext())
                    .inflate(R.layout.furit_item, viewGroup, false);
            // 建立控件绑定
            final FuritAdapter.ViewHolder holder = new FuritAdapter.ViewHolder(view);
            // 添加控件行为
            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int position = holder.getAdapterPosition();
                    Fruit fruit = mList.get(position);
                    Toast.makeText(RecyclerViewActivity.this,
                            fruit.getName(), Toast.LENGTH_SHORT).show();
                }
            });
            return holder;
        }

        /**
         * 绑定数据
         */
        @Override
        public void onBindViewHolder(@NonNull FuritAdapter.ViewHolder viewHolder, int i) {
            Fruit fruit = mList.get(i);
            viewHolder.title.setText(fruit.getName());
            viewHolder.icon.setImageResource(fruit.getImageId());
        }

        /**
         * 返回集合中元素数量
         */
        @Override
        public int getItemCount() {
            return mList.size();
        }
    }

}