仿淘宝APP–商品列表及适配器
*第一步 添加listview 控件
* 小技巧 ，变量命名的开始可以用控件的简写 比如 lv_list lv就是listview
* 这样可以第一眼看到变量或者id的时候 就知道这是什么控件
* 当然也可以不这么写 但是项目中前后习惯要一致 不能一会用 一会不用`
* 建立一个空activity，在AndroidMainfest修改签名
package com.example.mystore;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
public class ListViewActivity extends AppCompatActivity {
ListView lvList1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_list_view);
/**
* 第一步 添加listview 控件
*
* 小技巧 ，变量命名的开始可以用控件的简写 比如 lv_list lv就是listview
* 这样可以第一眼看到变量或者id的时候 就知道这是什么控件
* 当然也可以不这么写 但是项目中前后习惯要一致 不能一会用 一会不用
*
* 第二步
* 首先我们要实现一个商品的列表
* 然后新建一个商品类 用来保存商品信息
* 商品信息都包含如下内容
* 1 商品主图
* 2 商品名称
* 2 商品价格
* ...
*
* 第三步 创建xml的item项目 就是list每一行数据该如何显示
*
* 现在我们商品的信息有了 布局有了 但是如何把商品的信息绑定到布局上呢？
* 这时候就用到了Listview的一个功能 适配器！
* 我们先看看默认的代码
*
* ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this,R.layout.list_item,listdata);//listdata和str均可
* listview.setAdapter(arrayAdapter);
* new ArrayAdapter<?>(?,R.layout.?,?);
* 这个就是适配器 我们可以看到 这个适配器 一共需要四个参数
* 1 每一项信息的对象类型（比如 good 咱们看的示例是String 因为默认就只显示一行文字）
* 2 上下文（context）
* 3 布局文件
* 4 数据数组
*/
lvList1 = findViewById(R.id.lv_test1);
//初始化一个类，类似数组，我忘了数组怎么初始化了 哈哈哈 骚等
//先看整体怎么实现 然后再细的讲 list 适配器具体的用法和含义
//初始化一个list数组
//....不假装了
//如果不出意外 会报错或者异常 咱们先看看
// 果然报错 提示什么 E/ArrayAdapter: You must supply a resource ID for a TextView
//你必须支持一个TextView的资源ID，为什么呢？
//因为默认的视频器是不会自动绑定数据到我们的item布局的 我们需要自己重写写适配器
//看似完成了 实际还没有 为什么呢？
//前面提到 getView是当item滚动到界面中就会执行
//比如第三个item本来是隐藏的 现在滚动出来了 就会执行
//可是问题来了 当我们把它再滚回去 再滚出来 还会执行一次
//这就造成了性能浪费
List<Good> goods = initData();
//这里就要替换成我们自己的适配器了
ListAdapter listAdapter
= new ListAdapter(this, R.layout.list_good_item, goods);
lvList1.setAdapter(listAdapter);
}
public List<Good> initData() {
List<Good> list = new ArrayList<Good>();
for (int i = 0; i < 10; i++) {
//实例化一个商品
Good good = new Good();
//添充商品信息
good.setImages("以后讲解");
good.setTitle("iPad 10086代 " + i);
good.setPrice("10块钱");
//将商品添加到列表数组中
list.add(good);
}
//返回这个数组
return list;
}
}
第二步
* 首先我们要实现一个商品的列表
* 然后新建一个商品类 good.java 用来保存商品信息
* 商品信息都包含如下内容
* 1 商品主图
* 2 商品名称
* 3 商品价格
package com.example.mystore;
public class Good {
private String images; //商品主图
private String title; //商品标题
private String price; //商品价格
public String getImages() {
return images;
}
public String getTitle() {
return title;
}
public String getPrice() {
return price;
}
public void setImages(String images) {
this.images = images;
}
public void setPrice(String price) {
this.price = price;
}
public void setTitle(String title) {
this.title = title;
}
}
第三步 创建xml的item项目 activity_list_view.xml就是list每一行数据该如何显示
*
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".ListViewActivity">
<ListView
android:id="@+id/lv_test1"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
</androidx.constraintlayout.widget.ConstraintLayout>
<?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">
<!--
首先构思大致布局
一会再美化 先大致表示个意思
然后给关键的元素添加id
id尽可能和good类对应 这不是强制的 但是可以避免后期弄混变量
-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:id="@+id/good_image"
android:background="#328cc9"
android:layout_width="120dp"
android:layout_height="120dp">
</ImageView>
<LinearLayout
android:background="#efefef"
android:layout_weight="1"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="120dp">
<TextView
android:id="@+id/good_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="20dp"
android:text="我是标题">
</TextView>
<TextView
android:id="@+id/good_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我是价格"
>
</TextView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
- 现在我们商品的信息有了 布局有了 但是如何把商品的信息绑定到布局上呢？
* 这时候就用到了Listview的一个功能 适配器！
* 我们先看看默认的代码
*
* ArrayAdapter arrayAdapter = new ArrayAdapter(this,R.layout.list_item,listdata);//listdata和str均可
* listview.setAdapter(arrayAdapter);
* new ArrayAdapter<?>(?,R.layout.?,?);
* 这个就是适配器 我们可以看到 这个适配器 一共需要四个参数
* 1 每一项信息的对象类型（比如 good 咱们看的示例是String 因为默认就只显示一行文字）
* 2 上下文（context）
* 3 布局文件
* 4 数据数组
*/
新建适配器ListAdapter.java
package com.example.mystore;
import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import java.util.List;
//我们是扩展原来适配器的功能 因此我们直接继承原来的适配器就行
public class ListAdapter extends ArrayAdapter<Good> {
private int layoutItemId;
//这个是构造函数 必须写
//这个和咱们初始化的时候是一样的
//@Context 是上下文
//@ resource 是布局的id
//@ objects是我们的数据内容
//当然名字可以自定义 不是非要一样
public ListAdapter(@NonNull Context context, int resource, @NonNull List objects) {
super(context, resource, objects);
layoutItemId = resource;
}
/*
* 现在我们需要再复写Array适配器中的getView函数，这个函数的作用是每当列表中的item出现在界面之前 就会调用
*
* */
static class WeightCache
{
TextView tvTitle;
TextView tvPrice;
ImageView ivImage;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
//position 是第几个元素
//converView
//parent 是父元素 暂时忽略 基本用不到
//发展了这么多年的android肯定不会如此愚昧 谷歌已经提供我们解决办法 就是 convertView
//convertView 保存的就是上次生成view
View view;
WeightCache weightCache;
Good good = (Good) getItem(position);
if (null != convertView) {
//当converView不为空的时候 我们就直接用converView 而不需要重新查找了
//我想起来
//比如刚打开页面 你能看到四个view 还有6个隐藏对吧
//当你往下滚动的时候，他不会销毁原来的四个，而是重复给后面的利用
//所以标题什么的记得每次都设置 否则不知道会出什么意想不到的bug
//以为到这就完了吗 其实没有那 我们虽然不用每次都查找view了，但是，控件还是每次都找找的。
//那我们如何优化一下呢？我们自己设置一个缓存
view = convertView;
weightCache = (WeightCache) view.getTag();
} else {
Log.d("getView", String.format("我是第 %d 个ITEM，我被执行啦", position));
//这个是固定格式，意思是根据item的id 获取到咱们这个布局的资源 有点类似 findViewByid这个函数的功能
view = LayoutInflater.from(getContext()).inflate(layoutItemId, parent, false);
//也可以不用 而用构造函数中的objects.get(position)一样的效果
//回想一下 我们的item都有哪三个重要元素 图片 标题 和价格 （图片我们暂时忽略）
//这一步和正常操作控件是一样的
weightCache = new WeightCache();
weightCache.tvTitle = view.findViewById(R.id.good_title);
weightCache.tvPrice = view.findViewById(R.id.good_price);
view.setTag(weightCache);
} //getitem是这个适配器内置的函数 意思是根据pos获取数据
//分别给对应的控件设置上值
weightCache.tvTitle.setText(good.getTitle());
weightCache.tvPrice.setText(good.getPrice());
return view;
}
}
2160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
