購物車實現

此文章實現的是購物車的demo,一些關於購物車的邏輯包括全選,單選,反選,父類選中子類聯動,子類選中父類聯動,都是一些比較簡單的一些功能,拿來expandlistview做的





首先是主頁的一個佈局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="51dp"
        >
        <liuhao.baway.com.monthlianxi.MyExpandListView
            android:layout_above="@+id/relv"
            android:id="@+id/expandlistview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"></liuhao.baway.com.monthlianxi.MyExpandListView>
    </ScrollView>
    <RelativeLayout
        android:id="@+id/relv"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="@android:color/white"
        android:gravity="center_vertical"
        >
        <CheckBox
            android:id="@+id/checkbox2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:button="@drawable/select_checkbox"
            android:focusable="false"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@+id/checkbox2"
            android:gravity="center_vertical"
            android:text="全選"
            android:textSize="20sp"/>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:orientation="horizontal">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:text="合計 :"/>
            <TextView
                android:id="@+id/tv_price"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_marginLeft="10dp"
                android:paddingRight="10dp"
                android:text="0"
                android:textColor="@android:color/holo_red_light"/>
            <TextView
                android:id="@+id/tv_num"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:background="@android:color/holo_red_dark"
                android:gravity="center"
                android:padding="10dp"
                android:text="結算(0)"
                android:textColor="@android:color/white"/>
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

在這裏我們將這個二級列表拿出來將寬高又重新測量適配了一下,因爲下面的刷新工作會改變寬高帶來不好的用戶體驗,加上ScrollVieww是爲了能夠讓我們的二級列表滑動

附上expandlistview的自定義類

public class MyExpandListView extends ExpandableListView {




    public MyExpandListView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int i = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, i);
    }
}

下面是兩個佈局文件買一個是父條目的,另一個是子條目的。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="#A7B6CD"
    android:gravity="center_vertical"
    android:orientation="horizontal">


    <CheckBox
        android:id="@+id/cb_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:focusable="false"
        android:layout_marginBottom="30dp"
        android:button="@drawable/select_checkbox"
        android:layout_marginLeft="20dp"/>
    <TextView
        android:id="@+id/tv_group_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:text="標記"/>


</LinearLayout>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="horizontal">




    <CheckBox
        android:id="@+id/cb_child"
        android:layout_width="wrap_content"
        android:focusable="false"
        android:button="@drawable/select_checkbox"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="30dp"
        android:layout_marginBottom="30dp"
        android:layout_height="wrap_content"/>


    <ImageView
        android:id="@+id/image_child"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginLeft="5dp"
        android:src="@mipmap/ic_launcher"/>
    <TextView
        android:id="@+id/tv_child_title"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="暱稱"
        android:layout_marginLeft="5dp"
        android:maxLines="2"
        android:ellipsize="end"
        />
    <TextView
        android:id="@+id/tv_child_price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="價格"
        android:textColor="#f00"
        android:layout_marginLeft="5dp"/>
</LinearLayout>


然後給大家帶來主頁面實現的一些邏輯代碼,最關鍵的是一定要有bean類來記錄選中的狀態以及未選中的狀態,能夠及時刷新更新UI


public class MainActivity extends AppCompatActivity implements View.OnClickListener{


    private MyExpandListView exlv;
    private List<DataBeanlist.DataBean> databean = new ArrayList<>();
    private MyAdapter adapter  ;
    private CheckBox checkbox;
    private TextView tv_price;
    private TextView tv_num;
    private String addnum ;




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


        initView();
        loadData();
    }






    private void loadData() {
        String url = "http://120.27.23.105/product/getCarts?uid=" + 106;
         HttpOkUntils.getHttpOkUntils(this).okHttpGet(url, new NetClickListener() {
             @Override
             public void Suesses(DataBeanlist baseBean) {


                 List<DataBeanlist.DataBean> data = baseBean.getData();
                 databean.addAll(data);
                 adapter = new MyAdapter();
                 exlv.setAdapter(adapter);
                 int count = exlv.getCount();
                 for (int i=0;i<count;i++){
                     exlv.expandGroup(i);
                 }
                 //去掉箭頭
                 exlv.setGroupIndicator(null);
                 exlv.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
                     @Override
                     public boolean onGroupClick(ExpandableListView expandableListView, View view, int i, long l) {
                         return true;
                     }
                 });


             }


             @Override
             public void Error(DataBeanlist baseBean) {


             }
         });
    }


    private void initView() {


        exlv = (MyExpandListView) findViewById(R.id.expandlistview);
        checkbox = (CheckBox) findViewById(R.id.checkbox2);
        checkbox.setOnClickListener(this);
        tv_price = (TextView) findViewById(R.id.tv_price);
        tv_num = (TextView) findViewById(R.id.tv_num);


    }


    @Override
    public void onClick(View view) {
        if(checkbox.isChecked()){
                    for (int i = 0 ; i < databean.size() ; i ++ ){
                        List<DataBeanlist.DataBean.ListBean> list = databean.get(i).getList();
                        databean.get(i).setGroupCheck(true);
                        for (int y = 0 ;y<list.size();y++){
                            list.get(y).setChildGroupCheck(true);
                        }
                    }
            sum();
            notifyDataSetChanged();
        }else {
            for (int i = 0 ; i < databean.size() ; i ++ ){
                List<DataBeanlist.DataBean.ListBean> list = databean.get(i).getList();
                databean.get(i).setGroupCheck(false);
                for (int y = 0 ;y<list.size();y++){
                    list.get(y).setChildGroupCheck(false);
                }
            }
            //計算
            sum();
            notifyDataSetChanged();
        }
    }




    class MyAdapter extends BaseExpandableListAdapter{
        @Override
        public int getGroupCount() {
            return  databean.size();
        }


        @Override
        public int getChildrenCount(int i) {
            return databean.get(i).getList().size();
        }


        @Override
        public Object getGroup(int i) {
            return databean.get(i);
        }


        @Override
        public Object getChild(int i, int i1) {
            return databean.get(i).getList().get(i1);
        }


        @Override
        public long getGroupId(int i) {
            return i;
        }


        @Override
        public long getChildId(int i, int i1) {
            return i1;
        }


        @Override
        public boolean hasStableIds() {
            return false;
        }


        @Override
        public View getGroupView(int i, boolean b, View view, ViewGroup viewGroup) {
            View v = View.inflate(MainActivity.this,R.layout.group_layout,null);
            CheckBox cb_group =  v.findViewById(R.id.cb_group);
            if(databean.get(i).isGroupCheck()){
                cb_group.setChecked(true);
            }else {
                cb_group.setChecked(false);
            }


            TextView tv_group_title =  v.findViewById(R.id.tv_group_title);
            tv_group_title.setText(databean.get(i).getSellerName());
            cb_group.setOnClickListener(new GroupClickLister(i,cb_group));


            return v;
        }


        @Override
        public View getChildView(final int i, final int i1, boolean b, View view, ViewGroup viewGroup) {
            View v = View.inflate(MainActivity.this,R.layout.child_layout,null);
            CheckBox cb_child =  v.findViewById(R.id.cb_child);
            if(databean.get(i).getList().get(i1).isChildGroupCheck()){
                    cb_child.setChecked(true);
            }else {
                cb_child.setChecked(false);
            }
            TextView tv_child_title =  v.findViewById(R.id.tv_child_title);
            tv_child_title.setText(databean.get(i).getList().get(i1).getTitle());
            String[] split = databean.get(i).getList().get(i1).getImages().split("\\|");
            ImageView image_child =  v.findViewById(R.id.image_child);
            TextView tv_price =  v.findViewById(R.id.tv_child_price);
            tv_price.setText("¥" + databean.get(i).getList().get(i1).getPrice());
            ImageLoader.getInstance().displayImage(split[0],image_child);


            cb_child.setOnClickListener(new ChildClickLister(i,i1,cb_child));
            return v;
        }


        @Override
        public boolean isChildSelectable(int i, int i1) {
            return false;
        }


    }
    class ChildClickLister implements View.OnClickListener{


        private int i ;
        private int i1;
        private CheckBox cb_child ;


        public ChildClickLister(int i, int i1, CheckBox cb_child) {
            this.i1 = i1;
            this.i = i;
            this.cb_child = cb_child;
        }


        @Override
        public void onClick(View view) {
            if(cb_child.isChecked()){
                databean.get(i).getList().get(i1).setChildGroupCheck(true);
            }else {
                databean.get(i).getList().get(i1).setChildGroupCheck(false);
            }
            //二級聯動一級狀態
            setParentCheckFlag();
            //判斷全選狀態
            int num = 0 ;
            for (int i = 0 ; i<databean.size();i++){
                if(!databean.get(i).isGroupCheck()){
                    num++;
                }
            }
            if(num==0){
                checkbox.setChecked(true);
            }else {
                checkbox.setChecked(false);
            }
            //計算價格
            sum();
        }


        private void setParentCheckFlag() {
            DataBeanlist.DataBean dataBean = databean.get(i);
            List<DataBeanlist.DataBean.ListBean> list = dataBean.getList();
            for (int i = 0 ; i < list.size();i++){
                 if(!list.get(i).isChildGroupCheck()){
                      dataBean.setGroupCheck(false);
                     notifyDataSetChanged();
                     return;
                 }
                if(i == list.size()-1){
                    dataBean.setGroupCheck(true);
                    notifyDataSetChanged();
                    return;
                }
            }
        }
    }
    private void sum() {


        int num = 0 ;
        int price = 0 ;
        for (DataBeanlist.DataBean dd : databean){
            List<DataBeanlist.DataBean.ListBean> list = dd.getList();
            for (DataBeanlist.DataBean.ListBean ddl : list){
                if(ddl.isChildGroupCheck()){
                    //log測試輸出
                            Log.d("qq","ddl.getNum() = " + ddl.getNum());
                    num++;
                    price+=ddl.getPrice();
                }
            }
        }
        tv_num.setText("結算(" + num+")");
        tv_price.setText(price+"");
    }


    class GroupClickLister implements View.OnClickListener{


        private int i ;
        CheckBox cb_group ;


        public GroupClickLister(int i, CheckBox cb_group) {
            this.i = i;
            this.cb_group = cb_group;
        }


        @Override
        public void onClick(View view) {
            if(cb_group.isChecked()){
                setCheck(true);
            }else {
                setCheck(false);
                checkbox.setChecked(false);
            }
            notifyDataSetChanged();
        }
        public void setCheck(boolean check) {
            DataBeanlist.DataBean dataBean = databean.get(i);
            List<DataBeanlist.DataBean.ListBean> list = dataBean.getList();
            //一級狀態
            dataBean.setGroupCheck(check);
            //二級狀態
            for (DataBeanlist.DataBean.ListBean list1 : list){
                list1.setChildGroupCheck(check);
            }
            int num = 0 ;
                for (int i = 0 ; i<databean.size();i++){
                    if(!databean.get(i).isGroupCheck()){
                        num++;
                    }
                }
                if(num==0){
                    checkbox.setChecked(true);
                }else {
                    checkbox.setChecked(false);
            }
            sum();
        }
    }
    //刷新
    public void notifyDataSetChanged(){
            exlv.setAdapter(adapter);
        int count = exlv.getCount();
        for (int i=0;i<count;i++){
             exlv.expandGroup(i);
        }
        exlv.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
            @Override
            public boolean onGroupClick(ExpandableListView expandableListView, View view, int i, long l) {
                return true;
            }
        });
    }
}

然後就是選中圖片的一個背景選擇器

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/checkbox_checked" android:state_pressed="true" />
    <item android:drawable="@mipmap/checkbox_checked" android:state_checked="true"></item>
    <item android:drawable="@mipmap/checkbox_unchecked" />
</selector>

圖片素材


希望大家多多指導!!!