你是否有用过微信、qq 看到联系人列表。
你是否用过淘宝，看到过商品列表、购物车列表。
在主题开始之前，这里简单说一个图片控件，方便后面的展示和使用。
ImageView
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="20dp"
android:scaleType="fitXY"
android:src="@mipmap/ic_launcher_round" />
// 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文件中是这样的
<ListView
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
预览布局就已经可以显示出来了
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<DataBean> 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布局文件
<?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="70dp"
android:gravity="center_vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="20dp"
android:src="@mipmap/ic_launcher" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/tv_item_name"
android:layout_width="wrap_content"
android:textSize="18sp"
android:layout_marginLeft="15dp"
android:layout_height="wrap_content"
android:text="名字"/>
<TextView
android:id="@+id/tv_item_age"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="年龄"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
最后是最重要的适配器
public class MyAdapter extends BaseAdapter {
private Context mContext;
private List<DataBean> mlist;
public MyAdapter(Context mContext, List<DataBean> 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文件中
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
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<DataBean> 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<MyRvAdapter.RvHolder> {
private Context mContext;
private List<DataBean> mlist;
public MyRvAdapter(Context mContext, List<DataBean> 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里面的布局高度不确定。 然后展示的时候达到瀑布的效果。如上图
