Android入门计划<四>---列表控件(ListView、RecyclerView)

你是否有用过微信、qq 看到联系人列表。
你是否用过淘宝，看到过商品列表、购物车列表。

在主题开始之前，这里简单说一个图片控件，方便后面的展示和使用。

ImageView

 
//   scr 为资源，可以引用 mipmap里的图片资源或者 drawable里的图片资源
// :scaleType 为图片的填充方式，比如我用的 fitXY 是拉伸充满控件 就是x、y轴    

/**
1.android:scaleType=“center”
保持原图的大小，显示在ImageView的中心。当原图的size大于ImageView的size时，多出来的部分被截掉。
2.android:scaleType=“center_inside”
以原图正常显示为目的，如果原图大小大于ImageView的size，就按照比例缩小原图的宽高，居中显示在ImageView中。如果原图size小于ImageView的size，则不做处理居中显示图片。
3.android:scaleType=“center_crop”
以原图填满ImageView为目的，如果原图size大于ImageView的size，则与center_inside一样，按比例缩小，居中显示在ImageView上。如果原图size小于ImageView的size，则按比例拉升原图的宽和高，填充ImageView居中显示。
4.android:scaleType=“matrix”
不改变原图的大小，从ImageView的左上角开始绘制，超出部分做剪切处理。
5.androd:scaleType=“fit_xy”
把图片按照指定的大小在ImageView中显示，拉伸显示图片，不保持原比例，填满ImageView.
6.android:scaleType=“fit_start”
把原图按照比例放大缩小到ImageView的高度，显示在ImageView的start（前部/上部）。
7.android:sacleType=“fit_center”
把原图按照比例放大缩小到ImageView的高度，显示在ImageView的center（中部/居中显示）。
8.android:scaleType=“fit_end”
把原图按照比例放大缩小到ImageView的高度，显示在ImageVIew的end（后部/尾部/底部）
*/

进入正题！

一、ListView

1.1 ListView 在xml文件中是这样的

预览布局就已经可以显示出来了

image.png

1.2 在java文件中的使用和配置

public class MainActivity extends AppCompatActivity {

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

        //声明找到listview
        ListView listView = findViewById(R.id.list_view);

        //然后我们需要一个数据源   来添加10条数据
        List mlist = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            mlist.add(new DataBean("姓名"+i,i));
        }

        //有了数据之后我们需要给ListView 一个适配器，就是用来适配数据的
        MyAdapter myAdapter =  new MyAdapter(MainActivity.this,mlist);
        listView.setAdapter(myAdapter);
    }
}

数据实体类:

public class DataBean {

    private String name;
    private int age;

    public DataBean() {
    }

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

    public String getName() {
        return name;
    }

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

    public int getAge() {
        return age;
    }

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

然后是item布局文件

最后是最重要的适配器

public class MyAdapter extends BaseAdapter {
    private Context mContext;
    private List mlist;

    public MyAdapter(Context mContext, List mlist) {
        this.mContext = mContext;
        this.mlist = mlist;
    }


    /**
     * ListView 的条目个数，也就是我们需要展示的数据个数
     *
     * @return
     */
    @Override
    public int getCount() {
        return mlist == null ? 0 : mlist.size();
    }

    /**
     * item(条目) 所对应的数据
     *
     * @param position
     * @return
     */
    @Override
    public Object getItem(int position) {
        return mlist.get(position);
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    /**
     * 给item 填充数据，
     *
     * @param position
     * @param convertView
     * @param parent
     * @return
     */
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        //在填充数据之前，我们需要一个布局，就是item的布局，以微信的联系人列表为例，写一个布局文件   item_list_layout.xml
        MyViewHolder myViewHolder = null;
        if (convertView == null) {
            myViewHolder = new MyViewHolder();
            convertView = LayoutInflater.from(mContext).inflate(R.layout.item_list_layout, null);
            myViewHolder.tvName = convertView.findViewById(R.id.tv_item_name);
            myViewHolder.tvAge = convertView.findViewById(R.id.tv_item_age);
            convertView.setTag(myViewHolder);

        } else {
            myViewHolder = (MyViewHolder) convertView.getTag();
        }

        myViewHolder.tvName.setText(mlist.get(position).getName());
        myViewHolder.tvAge.setText(mlist.get(position).getAge()+"");


        return convertView;
    }

    public static class MyViewHolder {
        TextView tvName, tvAge;


    }
}

来看效果图

image.png

二、RecyclerView

ListView已经基本被废弃了，后来人们都开始用了RecyclerView，不仅功能强大，性能也要比Listview好很多，也不用在适配器里再写布局复用的代码了。

下面来看一下RecyclerView的简单使用。
这里需要注意的是，recyclerview在support包中，所以需要在app的build.gradle 文件中加入依赖

dependencies{
...
implementation 'com.android.support:recyclerview-v7:27.1.1'
...
}

2.1 RecyclerView在xml文件中

2.2 RecyclerView 在java文件中

  //找到控件
        RecyclerView  recyclerView = findViewById(R.id.rv_main);
        recyclerView.setLayoutManager(new LinearLayoutManager(MainActivity.this));//线性布局管理器
//        recyclerView.setLayoutManager(new GridLayoutManager(MainActivity.this,3));//网格布局管理器  参数1：上下文  参数2：网格的列数
//        recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL));//瀑布流布局管理器   参数1：列数  参数2：方向

       //数据
        List mlist = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            mlist.add(new DataBean("姓名"+i,i));
        }

        //和listview类似，也需要一个适配器
        MyRvAdapter rvAdapter = new MyRvAdapter(MainActivity.this,mlist);
        recyclerView.setAdapter(rvAdapter);

适配器

public class MyRvAdapter extends RecyclerView.Adapter {
    private Context mContext;
    private List mlist;

    public MyRvAdapter(Context mContext, List mlist) {
        this.mContext = mContext;
        this.mlist = mlist;
    }

    @NonNull
    @Override
    public RvHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View inflate = LayoutInflater.from(mContext).inflate(R.layout.item_list_layout, null);
        return new RvHolder(inflate);
    }

    @Override
    public void onBindViewHolder(@NonNull RvHolder holder, int position) {
        holder.tvName.setText(mlist.get(position).getName());
        holder.tvAge.setText(mlist.get(position).getAge()+"");


    }

    @Override
    public int getItemCount() {
        return mlist == null ? 0 : mlist.size();
    }

    public static class RvHolder extends RecyclerView.ViewHolder {
        TextView tvName, tvAge;

        public RvHolder(@NonNull View itemView) {
            super(itemView);
            tvName = itemView.findViewById(R.id.tv_item_name);
            tvAge = itemView.findViewById(R.id.tv_item_age);
        }
    }
}

运行结果： 这里要注意的是，RecyclerView 分割线要自己写，这里就不掩饰了

线性布局管理器

image.png

网格布局管理器：

image.png

瀑布流：

image.png

瀑布流这里没有做演示，可以参考淘宝， 要想达到瀑布流的效果，要item里面的布局高度不确定。 然后展示的时候达到瀑布的效果。如上图