本篇博客来为大家讲解ExpandableListView(二级列表)来实现购物车
购物车与正常的ExpandableListView的区别只不过是多了CheckBox,通过实现CheckBox的选中监听或者点击监听来改变状态去计算总价。
首先我们先来看一下购物车需要实现的逻辑(CheckBox相关)
1. 总开关(购物车布局中实现的一个CheckBox) —-> 全选/反选
2. 一级列表开关(一级列表的CheckBox) —–> 二级列表CheckBox的全选/反选
3. 当所有的一级列表的CheckBox都选中时,总开关被选中。
4. 只要有一个一级列表的CheckBox没有被选中,总开关也不会被选中。
5. 当前一级列表下所有的二级列表都被选中时,一级列表的CheckBox被选中
6. 只要当前一级列表下有一个二级列表没有被选中,一级列表的CheckBox不会被选中
7. 计算所有被选中的二级列表的价格(price*saleNum)
以上基本就是购物车的基本逻辑,可能看着有点懵,咱们来上图上代码
1. 总开关(购物车布局中实现的一个CheckBox) —-> 全选/反选
首先我们来写他的主页面的布局activity_main.xml
<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"
android:orientation="vertical"
tools:context="com.baway.week2exam.MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#ff3660"
android:gravity="center"
android:text="购物车"
android:textColor="#ffffff"
android:textSize="20sp" />
<ExpandableListView
android:id="@+id/elv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#33000000">
<CheckBox
android:id="@+id/cbAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="全选" />
<TextView
android:id="@+id/tvTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="合计:" />
</RelativeLayout>
</LinearLayout>
然后是自定义那个加减数量的自定义布局add_del_view.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:orientation="horizontal"> <TextView android:id="@+id/del" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/circle_shape" android:gravity="center" android:paddingBottom="2dp" android:text="-" /> <TextView android:id="@+id/num" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="3dp" android:layout_marginRight="3dp" android:gravity="center" android:text="1" /> <TextView android:id="@+id/add" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/circle_shape" android:gravity="center" android:text="+" /> </LinearLayout>紧接着我们需要定义自定义view的Activity
import android.content.Context; import android.support.annotation.Nullable; import android.util.AttributeSet; import android.view.LayoutInflater; import android.widget.LinearLayout; import android.widget.TextView; public class AddDelView extends LinearLayout { private TextView num; private OnItemClick onItemClick; private TextView add; private TextView del; public interface OnItemClick { public void onItemAddClick(int count); public void onItemDelClick(int count); } public void setOnItemClick(OnItemClick onItemClick) { this.onItemClick = onItemClick; } public AddDelView(Context context) { this(context, null); } public AddDelView(final Context context, @Nullable AttributeSet attrs) { super(context, attrs); LayoutInflater.from(context).inflate(R.layout.add_del_view, this); add = findViewById(R.id.add); del = findViewById(R.id.del); num = findViewById(R.id.num); } public void setOnAddClickListener(OnClickListener onClickListener) { add.setOnClickListener(onClickListener); } public void setOnDelClickListener(OnClickListener onClickListener) { del.setOnClickListener(onClickListener); } public void setCount(String count) { num.setText(count); } public String getCount(){ return num.getText().toString().trim(); } }我们需要在Drawable下画图形circle_shape.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <stroke android:width="1dp" android:color="#33000000"></stroke> <solid android:color="@android:color/transparent"></solid> </shape>接下来就是最主要的MainActivity里的代码
接下来是适配器 MyAdapter的关键性代码(逻辑基本都在这里)import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.CheckBox; import android.widget.ExpandableListView; import android.widget.TextView; import org.greenrobot.eventbus.EventBus; import org.greenrobot.eventbus.Subscribe; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private ExpandableListView mElv; /** * 全选 */ private CheckBox mCbAll; /** * 合计: */ private TextView mTvTotal; private List<GroupBean> groupList = new ArrayList<>(); private List<List<ChildBean>> childList = new ArrayList<>(); private MyAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); EventBus.getDefault().register(this); initView(); //给设置ExpandableListView设置数据 //模拟数据 initData(); adapter = new MyAdapter(this, groupList, childList); mElv.setGroupIndicator(null); mElv.setAdapter(adapter); //全部展开 for (int i = 0; i < groupList.size(); i++) { mElv.expandGroup(i); } //给全选设置点击事件 mCbAll.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { adapter.allChecked(mCbAll.isChecked()); } }); } @Override protected void onDestroy() { super.onDestroy(); EventBus.getDefault().unregister(this); } @Subscribe public void messageCountEvent(MessageCounEvent msg) { mTvTotal.setText("总计:" + msg.getCount() + "个 "+msg.getMoney()+"元"); } @Subscribe public void messageEvent(MessageEvent msg) { mCbAll.setChecked(msg.isFlag()); } private void initData() { for (int i = 0; i < 3; i++) { GroupBean groupBean = new GroupBean("商家" + i, false); groupList.add(groupBean); List<ChildBean> list = new ArrayList<>(); for (int j = 0; j < 2; j++) { ChildBean childBean = new ChildBean("商品" + i, false, 12.0f, 1); list.add(childBean); } childList.add(list); } } private void initView() { mElv = (ExpandableListView) findViewById(R.id.elv); mCbAll = (CheckBox) findViewById(R.id.cbAll); mTvTotal = (TextView) findViewById(R.id.tvTotal); } }然后就是两个Bean类GroupBean一级列表的Beanpublic class GroupBean { private String groupName; private boolean checked; public GroupBean() { } public GroupBean(String groupName, boolean checked) { this.groupName = groupName; this.checked = checked; } public String getGroupName() { return groupName; } public void setGroupName(String groupName) { this.groupName = groupName; } public boolean isChecked() { return checked; } public void setChecked(boolean checked) { this.checked = checked; } }ChildBean二级列表的Beanpublic class ChildBean { private String childName; private boolean checked; private float money; private int count; public ChildBean(String childName, boolean checked, float money, int count) { this.childName = childName; this.checked = checked; this.money = money; this.count = count; } public float getMoney() { return money; } public void setMoney(float money) { this.money = money; } public int getCount() { return count; } public void setCount(int count) { this.count = count; } public String getChildName() { return childName; } public void setChildName(String childName) { this.childName = childName; } public boolean isChecked() { return checked; } public void setChecked(boolean checked) { this.checked = checked; } }
import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.BaseExpandableListAdapter; import android.widget.CheckBox; import android.widget.TextView; import org.greenrobot.eventbus.EventBus; import java.util.List; import static com.baway.week2exam.R.id.cb; public class MyAdapter extends BaseExpandableListAdapter { private Context context; private List<GroupBean> groupList; private List<List<ChildBean>> childList; private int count; public MyAdapter(Context context, List<GroupBean> groupList, List<List<ChildBean>> childList) { this.context = context; this.groupList = groupList; this.childList = childList; } @Override public int getGroupCount() { return groupList.size(); } @Override public int getChildrenCount(int groupPosition) { return childList.get(groupPosition).size(); } @Override public Object getGroup(int groupPosition) { return groupList.get(groupPosition); } @Override public Object getChild(int groupPosition, int childPosition) { return childList.get(groupPosition).get(childPosition); } @Override public long getGroupId(int groupPosition) { return groupPosition; } @Override public long getChildId(int groupPosition, int childPosition) { return childPosition; } @Override public boolean hasStableIds() { return false; } @Override public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) { View view; GroupViewHolder holder; if (convertView == null) { holder = new GroupViewHolder(); view = View.inflate(context, R.layout.item, null); holder.cb = view.findViewById(cb); holder.tv = view.findViewById(R.id.tvName); view.setTag(holder); } else { view = convertView; holder = (GroupViewHolder) view.getTag(); } //赋值 GroupBean groupBean = groupList.get(groupPosition); holder.cb.setChecked(groupBean.isChecked()); holder.tv.setText(groupBean.getGroupName()); //给group的checkbox设置点击事件 holder.cb.setOnClickListener(new GroupCbOnClickListener(groupPosition)); return view; } @Override public View getChildView(final int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) { View view; final ChildViewHolder holder; if (convertView == null) { holder = new ChildViewHolder(); view = View.inflate(context, R.layout.childitem, null); holder.cb = view.findViewById(cb); holder.tv = view.findViewById(R.id.tvName); holder.tvMoney = view.findViewById(R.id.tvPrice); holder.adv = view.findViewById(R.id.adv); view.setTag(holder); } else { view = convertView; holder = (ChildViewHolder) view.getTag(); } //赋值 final ChildBean childBean = childList.get(groupPosition).get(childPosition); holder.cb.setChecked(childBean.isChecked()); holder.tv.setText(childBean.getChildName()); holder.tvMoney.setText(childBean.getMoney() + ""); holder.adv.setCount(childBean.getCount() + ""); holder.cb.setOnClickListener(new ChildCbOnClickListener(groupPosition, childPosition)); holder.adv.setOnAddClickListener(new View.OnClickListener() { @Override public void onClick(View v) { String countStr = holder.adv.getCount(); int count = Integer.parseInt(countStr); holder.adv.setCount(++count + ""); childBean.setCount(count); //发送数量和价钱 childBean.setChecked(true); //判断该商家的所有商品的checkbox是否都选中 if (isChildChecked(childList.get(groupPosition))) { groupList.get(groupPosition).setChecked(true); MessageEvent msg = new MessageEvent(); msg.setFlag(isGroupChecked()); EventBus.getDefault().post(msg); notifyDataSetChanged(); } else { groupList.get(groupPosition).setChecked(false); MessageEvent msg = new MessageEvent(); msg.setFlag(false); EventBus.getDefault().post(msg); notifyDataSetChanged(); notifyDataSetChanged(); } //计算选中的商品数,并发送到主界面进行显示 MessageCounEvent msgCount = new MessageCounEvent(); msgCount.setCount(totalCount()); msgCount.setMoney(totalMoney()); EventBus.getDefault().post(msgCount); } }); holder.adv.setOnDelClickListener(new View.OnClickListener() { @Override public void onClick(View v) { String countStr = holder.adv.getCount(); int count = Integer.parseInt(countStr); count = --count < 1 ? 1 : count; holder.adv.setCount(count + ""); childBean.setCount(count); if (count > 1) { childBean.setChecked(true); } //判断该商家的所有商品的checkbox是否都选中 if (isChildChecked(childList.get(groupPosition))) { groupList.get(groupPosition).setChecked(true); MessageEvent msg = new MessageEvent(); msg.setFlag(isGroupChecked()); EventBus.getDefault().post(msg); notifyDataSetChanged(); } else { groupList.get(groupPosition).setChecked(false); MessageEvent msg = new MessageEvent(); msg.setFlag(false); EventBus.getDefault().post(msg); notifyDataSetChanged(); notifyDataSetChanged(); } //计算选中的商品数,并发送到主界面进行显示 MessageCounEvent msgCount = new MessageCounEvent(); msgCount.setCount(totalCount()); msgCount.setMoney(totalMoney()); EventBus.getDefault().post(msgCount); } }); return view; } @Override public boolean isChildSelectable(int groupPosition, int childPosition) { return true; } class GroupViewHolder { CheckBox cb; TextView tv; } class ChildViewHolder { CheckBox cb; TextView tv; TextView tvMoney; AddDelView adv; } class ChildCbOnClickListener implements View.OnClickListener { private int groupPosition; private int childPosition; public ChildCbOnClickListener(int groupPosition, int childPosition) { this.groupPosition = groupPosition; this.childPosition = childPosition; } @Override public void onClick(View v) { if (v instanceof CheckBox) { CheckBox cb = (CheckBox) v; List<ChildBean> childBeen = childList.get(groupPosition); ChildBean childBean = childBeen.get(childPosition); childBean.setChecked(cb.isChecked()); //计算选中的商品数,并发送到主界面进行显示 MessageCounEvent msgCount = new MessageCounEvent(); msgCount.setCount(totalCount()); msgCount.setMoney(totalMoney()); EventBus.getDefault().post(msgCount); //判断该商家的所有商品的checkbox是否都选中 if (isChildChecked(childBeen)) { groupList.get(groupPosition).setChecked(true); // //如果商品全部选中的话,则去判断所有商家是否都选中 // if (isGroupChecked()) { // //发送消息去改变全选的状态,变成选中状态 // } else { // //发送消息去改变全选的状态,变成未选中状态 // } MessageEvent msg = new MessageEvent(); msg.setFlag(isGroupChecked()); EventBus.getDefault().post(msg); notifyDataSetChanged(); } else { groupList.get(groupPosition).setChecked(false); MessageEvent msg = new MessageEvent(); msg.setFlag(false); EventBus.getDefault().post(msg); notifyDataSetChanged(); notifyDataSetChanged(); } } } } /** * 判断该商家的所有商品的checkbox是否都选中 * * @return */ private boolean isChildChecked(List<ChildBean> childBeen) { for (int i = 0; i < childBeen.size(); i++) { ChildBean childBean = childBeen.get(i); if (!childBean.isChecked()) { return false; } } return true; } class GroupCbOnClickListener implements View.OnClickListener { private int groupPostion; public GroupCbOnClickListener(int groupPostion) { this.groupPostion = groupPostion; } @Override public void onClick(View v) { if (v instanceof CheckBox) { //多态,因为我是给checkbox设置的点击事件,所以可以强转成checkbox CheckBox cb = (CheckBox) v; //根据cb.isChecked()是否选中,给一级列的checkbox改变状态 groupList.get(groupPostion).setChecked(cb.isChecked()); List<ChildBean> childBeenList = childList.get(groupPostion); for (ChildBean childBean : childBeenList) { childBean.setChecked(cb.isChecked()); } //计算选中的商品数,并发送到主界面进行显示 MessageCounEvent msgCount = new MessageCounEvent(); msgCount.setCount(totalCount()); msgCount.setMoney(totalMoney()); EventBus.getDefault().post(msgCount); //判断其它的商家是否选中 // if (isGroupChecked()) { // //发送消息去改变全选的状态,变成选中状态 // MessageEvent msg = new MessageEvent(); // msg.setFlag(true); // EventBus.getDefault().post(msg); // } else { // //发送消息去改变全选的状态,变成未选中状态 // MessageEvent msg = new MessageEvent(); // msg.setFlag(false); // EventBus.getDefault().post(msg); // } MessageEvent msg = new MessageEvent(); msg.setFlag(isGroupChecked()); EventBus.getDefault().post(msg); notifyDataSetChanged(); } } } /** * 判断其它的商家是否选中 * * @return */ private boolean isGroupChecked() { for (GroupBean groupBean : groupList) { if (!groupBean.isChecked()) { return false; } } return true; } /** * 主界面全选按钮的操作 * * @param bool */ public void allChecked(boolean bool) { for (int i = 0; i < groupList.size(); i++) { groupList.get(i).setChecked(bool); for (int j = 0; j < childList.get(i).size(); j++) { childList.get(i).get(j).setChecked(bool); } } //计算选中的商品数,并发送到主界面进行显示 MessageCounEvent msgCount = new MessageCounEvent(); msgCount.setCount(totalCount()); msgCount.setMoney(totalMoney()); EventBus.getDefault().post(msgCount); notifyDataSetChanged(); } private float totalMoney() { float money = 0f; for (int i = 0; i < groupList.size(); i++) { for (int j = 0; j < childList.get(i).size(); j++) { if (childList.get(i).get(j).isChecked()) { //遍历所有的商品,只要是选中状态的,就计算价格 int c = childList.get(i).get(j).getCount(); float m = childList.get(i).get(j).getMoney(); money += c * m; } } } return money; } private int totalCount() { count = 0; for (int i = 0; i < groupList.size(); i++) { for (int j = 0; j < childList.get(i).size(); j++) { if (childList.get(i).get(j).isChecked()) { //遍历所有的商品,只要是选中状态的,就加1 count += childList.get(i).get(j).getCount(); } } } return count; } }
item的布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="40dp" android:background="#330000ff" android:gravity="center_vertical" android:orientation="horizontal"> <CheckBox android:id="@+id/cb" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/tvName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" /> </LinearLayout>
子类的视图childitem.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="40dp" android:background="#330000ff" android:gravity="center_vertical" android:orientation="horizontal" android:paddingLeft="20dp"> <CheckBox android:id="@+id/cb" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/tvName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" /> <TextView android:id="@+id/tvPrice" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="15dp" /> <com.baway.week2exam.AddDelView android:id="@+id/adv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="15dp" /> </LinearLayout>
然后就是判断是否选中的类
public class MessageEvent { private boolean flag; public boolean isFlag() { return flag; } public void setFlag(boolean flag) { this.flag = flag; } }然后就是控制加减的类
public class MessageCounEvent { private int count; private float money; public float getMoney() { return money; } public void setMoney(float money) { this.money = money; } public int getCount() { return count; } public void setCount(int count) { this.count = count; } }
最后就是别忘了加依赖
compile 'com.android.support:appcompat-v7:26.+' compile 'com.android.support.constraint:constraint-layout:1.0.2' testCompile 'junit:junit:4.12' compile 'org.greenrobot:eventbus:3.0.0' compile 'com.zhy:okhttputils:2.0.0'
注册列表
<application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application>