滚动控件RecycleView(基础)

##介绍##
滚动控件已经有了有ListView,那为什么Android还提供了另一个滚动控件RecycleView呢?因为ListView虽然强大,但也有缺点,比如需要一些技巧来提升它的运行效率,扩展性也不好,它只能实现数据纵向滚动,横向滚动做不到。

##第一步:引入依赖##

compile 'com.android.support:recyclerview-v7:26.1.0'

##第二步:activity_main.xml引用##

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

##第三步:创建PeopleBean##

public class PeopleBean {
    private String name;
    private String age;

    public PeopleBean(String name, String age) {
        this.name = name;
        this.age = age;
    }

    public String getName() {
        return name;
    }

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

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }
}

##第四步:定制people_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="vertical">

    <View
        android:layout_width="match_parent"
        android:layout_height="0.01dp"
        android:background="#3333" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingBottom="8dp"
                android:paddingLeft="8dp"
                android:paddingTop="8dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="姓名:"
                    android:textColor="#000" />

                <TextView
                    android:id="@+id/tv_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="皮皮喜" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingBottom="8dp"
                android:paddingLeft="8dp"
                android:paddingTop="8dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="年龄:"
                    android:textColor="#000" />

                <TextView
                    android:id="@+id/tv_age"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="18" />
            </LinearLayout>
        </LinearLayout>
        
        <CheckBox
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="8dp" />
    </LinearLayout>
</LinearLayout>

##第五步:创建PeopleAdapter##

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

    private List<PeopleBean> lists;

    public PeopleAdapter(List<PeopleBean> lists) {
        this.lists = lists;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        private  TextView tv_name;
        private  TextView tv_age;

        public ViewHolder(View itemView) {
            super(itemView);
            tv_name = itemView.findViewById(R.id.tv_name);
            tv_age = itemView.findViewById(R.id.tv_age);
        }
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_people, null);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        PeopleBean peopleBean = lists.get(position);
        holder.tv_name.setText(peopleBean.getName());
        holder.tv_age.setText(peopleBean.getAge());
    }

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

##第六步:在你的Activity使用##

public class MainActivity extends AppCompatActivity {

    List<PeopleBean> list = new ArrayList<>();
    private PeopleAdapter adapter;
    private RecyclerView rv_list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rv_list = (RecyclerView) findViewById(R.id.rv_list);
        //初始化数据
        initData();
        //创建适配器
        adapter = new PeopleAdapter(list);
        //设置适配器
        rv_list.setAdapter(adapter);
        //创建布局方式
        LinearLayoutManager manager = new LinearLayoutManager(this);
        //设置布局方式
        rv_list.setLayoutManager(manager);
    }

    private void initData() {
        //模拟一些数据
        for (int i = 0; i < 30; i++) {
            PeopleBean peopleBean1 = new PeopleBean("iTina", "17");
            list.add(peopleBean1);
        }
    }
}

效果图
这里写图片描述

##第七步:RecycleView嵌入CheckBox导致错位##
到这里RecycleView的简单使用就结束了,但是有一个现象会出现(可能?),比如你勾选前面几个CheckBox的时候,你会发现后面的部分CheckBox居然也被悄悄地勾选中了…下面解决一下

第一步:打开item_people.xmlCheckBox加个id

<CheckBox
	android:id="@+id/cb_box"
	android:layout_width="25dp"
	android:layout_height="25dp"
	android:layout_gravity="center_vertical"
	android:layout_marginRight="8dp" />

第二步:打开PeopleBean,添加个属性isSelected,修改下构造函数

    private boolean isSelected=false;

    public boolean isSelected() {
        return isSelected;
    }

    public void setSelected(boolean selected) {
        isSelected = selected;
    }

    public PeopleBean(String name, String age, boolean isSelected) {
        this.name = name;
        this.age = age;
        this.isSelected = isSelected;
    }

第三步:修改下PeopleAdapter,修改的地方有加注释。

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

    private List<PeopleBean> lists;

    public PeopleAdapter(List<PeopleBean> lists) {
        this.lists = lists;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        private  CheckBox cb_box;//修改1
        private  TextView tv_name;
        private  TextView tv_age;


        public ViewHolder(View itemView) {
            super(itemView);
            tv_name = itemView.findViewById(R.id.tv_name);
            tv_age = itemView.findViewById(R.id.tv_age);
            cb_box = itemView.findViewById(R.id.cb_box);//修改2
        }
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_people, null);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        PeopleBean peopleBean = lists.get(position);
        holder.tv_name.setText(peopleBean.getName());
        holder.tv_age.setText(peopleBean.getAge());
        holder.cb_box.setChecked(peopleBean.isSelected());//修改3
    }

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

##最后一步##
错位的问题解决了,你会发现选中的CheckBox划出屏幕外后,再划回来,勾中的框会取消,这是因为isSelected默认值是false,而在点击Checkbox的时候,没有去修改isSelected为true,所以会有这个现象。

第一步:修改PeopleAdapter

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

    private List<PeopleBean> lists;

    private OnItemClickListener mOnItemClickListener;//修改2

    public PeopleAdapter(List<PeopleBean> lists) {
        this.lists = lists;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        private  CheckBox cb_box;
        private  TextView tv_name;
        private  TextView tv_age;


        public ViewHolder(View itemView) {
            super(itemView);
            tv_name = itemView.findViewById(R.id.tv_name);
            tv_age = itemView.findViewById(R.id.tv_age);
            cb_box = itemView.findViewById(R.id.cb_box);
        }
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_people, null);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, final int position) {
        PeopleBean peopleBean = lists.get(position);
        holder.tv_name.setText(peopleBean.getName());
        holder.tv_age.setText(peopleBean.getAge());
        holder.cb_box.setChecked(peopleBean.isSelected());
        holder.cb_box.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mOnItemClickListener.onItemClick(view,position);
            }
        });
    }

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

    //修改1
    public interface OnItemClickListener {
        void onItemClick(View view, int position);
    }

    //修改3
    public void setmOnItemClickListener(OnItemClickListener mOnItemClickListener) {
        this.mOnItemClickListener = mOnItemClickListener;
    }
}

第二步:在MainActivityadapter添加点击事件

        //给CheckBox设置点击事件
        adapter.setmOnItemClickListener(new PeopleAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                boolean temp = !list.get(position).isSelected();
                list.get(position).setSelected(temp);
            }
        });

完结~

猜你喜欢

转载自blog.csdn.net/weixin_37418246/article/details/82534459
今日推荐