Android实现简单购物页面

1.课题——模仿淘宝等电商的购物车页面

2.需要使用视图树（即在一个视图中建立多层嵌套结构，满足摆列的美观性），下面给出我的一个课堂设计的作品：

layout.xml

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:hint="@string/edit_hint"
        android:id="@+id/editName"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:text="Dessert"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:orientation="horizontal"
        >

        <LinearLayout
            android:layout_width="250dp"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >
            <LinearLayout
                android:layout_width="250dp"
                android:layout_height="40dp"
                android:orientation="horizontal">

                <CheckBox
                    android:layout_width="160dp"
                    android:layout_height="40dp"
                    android:text="Ice Cream"
                    android:id="@+id/ck_iceCream"
                    />
                <Button
                    android:layout_width="30dp"
                    android:layout_height="40dp"
                    android:text="-"
                    android:id="@+id/lossIce"
                    />
                <TextView
                    android:layout_width="30dp"
                    android:layout_height="40dp"

                    android:text="0"
                    android:gravity="center"
                    android:id="@+id/quantityIce"
                    />
                <Button
                    android:layout_width="30dp"
                    android:layout_height="40dp"
                    android:text="+"
                    android:id="@+id/addIce"
                    />
            </LinearLayout>

            <LinearLayout
                android:layout_width="250dp"
                android:layout_height="40dp"
                android:orientation="horizontal"
                >
                <CheckBox
                    android:layout_width="160dp"
                    android:layout_height="40dp"
                    android:text="Choclate"
                    android:id="@+id/ck_choclate"
                    />
                <Button
                    android:layout_width="30dp"
                    android:layout_height="40dp"
                    android:text="-"
                    android:id="@+id/lossChoclate"
                    />
                <TextView
                    android:layout_width="30dp"
                    android:layout_height="40dp"

                    android:text="0"
                    android:gravity="center"
                    android:id="@+id/quantityChoclate"
                    />
                <Button
                    android:layout_width="30dp"
                    android:layout_height="40dp"
                    android:text="+"
                    android:id="@+id/addChoclate"
                    />
            </LinearLayout>

            <LinearLayout
                android:layout_width="250dp"
                android:layout_height="40dp"
                >
                <CheckBox
                    android:layout_width="160dp"
                    android:layout_height="50dp"
                    android:text="Cookies"
                    android:id="@+id/ck_cookies"
                    />
                <Button
                    android:layout_width="30dp"
                    android:layout_height="40dp"
                    android:text="-"
                    android:id="@+id/lossCookies"
                    />
                <TextView
                    android:layout_width="30dp"
                    android:layout_height="40dp"
                    android:text="0"
                    android:gravity="center"
                    android:id="@+id/quantityCookies"
                    />
                <Button
                    android:layout_width="30dp"
                    android:layout_height="40dp"
                    android:text="+"
                    android:id="@+id/addCookies"
                    />
            </LinearLayout>

        </LinearLayout>

        <ImageView
            android:layout_width="135dp"
            android:layout_height="140dp"
            android:src="@drawable/coffee"
            android:id="@+id/imageView" />

    </LinearLayout>



    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <Button
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="ORDER"
            android:id="@+id/order"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:hint="订单信息"
            android:textSize="20sp"
            android:id="@+id/orderInfor"
            />
        
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:orientation="vertical"
            >
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="30dp"
                >
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="30dp"
                    android:text="客户名称："
                    android:textSize="15sp"
                    />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="30dp"
                    android:hint="显示客户姓名"
                    android:textSize="15sp"
                    android:id="@+id/name"
                    />
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="30dp"
                    android:textSize="15sp"
                    android:hint="名称"/>
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="30dp"
                    android:hint="数量"/>
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="30dp"
                    android:hint="单价"/>
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="30dp"
                    android:textSize="15sp"
                    android:hint="Ice Cream"/>
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="30dp"
                    android:hint="冰淇淋数量"
                    android:id="@+id/iceCreamNumber"
                    />
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="30dp"
                    android:hint="单价"
                    android:id="@+id/iceCreamPrice"
                    />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="30dp"
                    android:textSize="15sp"
                    android:hint="Choclate"/>
                >
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="30dp"
                    android:hint="巧克力数量"
                    android:id="@+id/chocolateNumber"
                    />
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="30dp"
                    android:hint="单价"
                    android:id="@+id/chocolatePrice"/>

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="30dp">

                <TextView
                    android:layout_width="100dp"
                    android:layout_height="30dp"
                    android:textSize="15sp"
                    android:hint="Cookies"/>
                >
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="30dp"
                    android:hint="曲奇饼数量"
                    android:id="@+id/cookiesNumber"/>
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="30dp"
                    android:hint="单价"
                    android:id="@+id/cookiesPrice"/>
            </LinearLayout>

        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="30dp"
            >
            <TextView
                android:layout_width="100dp"
                android:layout_height="30dp"
                android:hint="总价:"
                android:textSize="15sp"
                />
            <TextView
                android:layout_width="100dp"
                android:layout_height="30dp"
                android:id="@+id/summary"
                android:hint="***元"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

实现效果图：

 

注：（1）这里面实现的关键就是LinearLayout的布局，其中一层一层的嵌套。设置LinearLayout的orientation属性为horizon还是vertical，horizon就是允许LinearLayout中的控件水平布局，vertical就是允许LinearLayout中的控件垂直布局。然后多层嵌套就可以满足这种界面。

3.接着是实体类，业务类，控制类的设计，因为比较简单，这里直接给出源码：

（1）IceCream.java类

 

package com.example.coffeeorder.Order;

/**
 * Created by 时知夜霖 on 2017/3/15.
 * IceCream类---实体类
 */

public class IceCream {
    private int number = 0;//数量
    private int price = 6;//价格

    public int getNumber() {
        return number;
    }

    //增加Ice Cream 数量
    public void addNumber() {
        if(number > 10){
            return ;
        }
        number ++;
    }

    //减少Ice Cream的数量
    public void lossNumber(){
        if(number<0){
            return ;
        }
        number--;
    }
    public int getPrice() {
        return price;
    }

    public void setPrice(int price) {
        this.price = price;
    }
}

（2）因为Chocolate.java与Cookie.java类与IceCream类类似，这里不再赘述。主要给出控制类MainActivity类的代码

 

（3）MainActivity.java

 

package com.example.coffeeorder;

import android.content.ComponentCallbacks;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.TextureView;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.EditText;
import android.widget.TextView;

import com.example.coffeeorder.Order.Chocolate;
import com.example.coffeeorder.Order.Cookies;
import com.example.coffeeorder.Order.IceCream;
import com.example.coffeeorder.Order.Order;

/*
控制类--->属性固定
 */
public class MainActivity extends AppCompatActivity {
    //新建IceCream对象
    private IceCream iceCream = new IceCream();
    private Chocolate chocolate = new Chocolate();
    private Cookies cookies = new Cookies();
    private Order order = new Order();//新建一个Order对象

    //三种Dessert的按钮信息
    private Button btnAddIce,btnLossIce;
    private Button btnAddChoc,btnLossChoc;
    private Button btnAddCook,btnLossCook;

    //三种数量文本标签
    private TextView tvQuatityChoc, tvQuatityIce, tvQuatityCook;

    private Button btnOrder;//Order的按钮

    //TextView
    private TextView nameText;
    private TextView iceCreamNumber,iceCreamPrice;
    private TextView cookieNumber,cookiePrice;
    private TextView chocolateNumber,chocolatePrice;
    private TextView tvSummary;

    private EditText editText ;
    //为这些按钮添加监听器
    public void addListener(){
        btnAddIce.setOnClickListener(new OutButtonClick());
        btnAddChoc.setOnClickListener(new OutButtonClick());
        btnAddCook.setOnClickListener(new OutButtonClick());
        btnLossIce.setOnClickListener(new OutButtonClick());
        btnLossChoc.setOnClickListener(new OutButtonClick());
        btnLossCook.setOnClickListener(new OutButtonClick());
    }

    //初始化这个控件信息
    public void init(){

        //获取关于冰淇淋的按钮信息
        btnAddIce = (Button) findViewById(R.id.addIce);
        btnLossIce = (Button) findViewById(R.id.lossIce);
        tvQuatityIce = (TextView) findViewById(R.id.quantityIce);

        //获取关于巧克力的按钮信息
        btnAddChoc = (Button) findViewById(R.id.addChoclate);
        btnLossChoc= (Button) findViewById(R.id.lossChoclate);
        tvQuatityChoc = (TextView) findViewById(R.id.quantityChoclate);

        //获取关于曲奇饼的按钮信息
        btnAddCook = (Button) findViewById(R.id.addCookies);
        btnLossCook= (Button) findViewById(R.id.lossCookies);
        tvQuatityCook = (TextView) findViewById(R.id.quantityCookies);

        btnOrder = (Button)findViewById(R.id.order);//订单按钮
        nameText = (TextView)findViewById(R.id.name);//客户姓名

        editText = (EditText)findViewById(R.id.editName);//找到编辑的客户名称

        //获取iceCream的数量，单价
        iceCreamNumber = (TextView)findViewById(R.id.iceCreamNumber);
        iceCreamPrice = (TextView)findViewById(R.id.iceCreamPrice);

        chocolateNumber = (TextView)findViewById(R.id.chocolateNumber);
        chocolatePrice = (TextView)findViewById(R.id.chocolatePrice);

        cookieNumber = (TextView)findViewById(R.id.cookiesNumber);
        cookiePrice = (TextView)findViewById(R.id.cookiesPrice);


        iceCreamPrice = (TextView)findViewById(R.id.iceCreamPrice);
        chocolatePrice = (TextView)findViewById(R.id.chocolatePrice);
        cookiePrice = (TextView)findViewById(R.id.cookiesPrice);
        tvSummary = (TextView) findViewById(R.id.summary);
    }

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

        init();
        //调用添加监听器方法
        btnOrder.setOnClickListener(new OutButtonClick());
        addListener();
    }

    class OutButtonClick implements View.OnClickListener{
        //重载方法
        @Override
        public void onClick(View view) {
            Integer iceNumber ,chocNumber,cookNumber,sum;

            //这样就知道是哪一个按钮在操作
            switch (view.getId()){
                //增加数量
                case R.id.addIce:{

                    iceCream.addNumber();
                    iceNumber = iceCream.getNumber();
                    tvQuatityIce.setText(iceNumber.toString());//返回数量
                    break;
                }

                case R.id.addChoclate:{
                    chocolate.addNumber();
                    chocNumber = chocolate.getNumber();
//                    tvQuatityChoc.setText(chocNumber.toString());
                    tvQuatityChoc.setText(chocNumber+"");
                    break;
                }
                case R.id.addCookies:{
                    cookies.addNumber();
                    cookNumber = cookies.getNumber();
                    tvQuatityCook.setText(cookNumber.toString());
                    break;
                }

                //减少数量
                case R.id.lossIce:{
                    iceCream.lossNumber();
                    iceNumber = iceCream.getNumber();
                    tvQuatityIce.setText(iceNumber.toString());
                    break;//返回数量
                }

                case R.id.lossChoclate:
                    {
                        chocolate.lossNumber();
                        chocNumber = chocolate.getNumber();
                        tvQuatityChoc.setText(chocNumber.toString());
                    }
                    break;
                case R.id.lossCookies:{
                    cookies.lossNumber();
                    cookNumber = cookies.getNumber();
                    tvQuatityCook.setText(cookNumber.toString());
                    break;
                }

                case R.id.order:{
                    String name = editText.getText().toString();
                    nameText.setText(name);//显示客户名称
                    //获取三者数量
                    iceNumber = iceCream.getNumber();
                    chocNumber = chocolate.getNumber();
                    cookNumber = cookies.getNumber();

                    //
                    iceCreamNumber.setText(iceNumber.toString());
                    chocolateNumber.setText(chocNumber.toString());
                    cookieNumber.setText(cookNumber.toString());

                    iceCreamPrice.setText("6");
                    chocolatePrice.setText("10");
                    cookiePrice.setText("8");

                    sum = 6 * iceNumber + chocNumber * 10 + cookNumber * 8;
                    tvSummary.setText(sum.toString());
                    break;
                }
            }
        }
    }
    class ChechBoxListener implements CompoundButton.OnCheckedChangeListener{
        @Override
        public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
            switch (compoundButton.getId()){
                case R.id.ck_iceCream:{

                }
                case R.id.ck_choclate:{

                }
                case R.id.ck_cookies:{

                }
            }
        }
    }
}

6.实现结果

注：（1）这里面需要注意的是一些实现细节，对于像我们这样的新手来说，主要的就是不知道遇到哪种问题该调用哪种方法，这个时候就要凭借日常的积累与帮助文档了。

（2）我们有时会遇到自己编写的代码运行的异常缓慢，比如说：当点击按钮时，程序不会死，但是却反应的特别慢，或者说是，当我们运行程序的时候，明明程序写的没有问题，但就是无法运行。假设这种情况是在你添加了图片之后发生，那么就很有可能是因为你的程序中的图片出了问题。这个时候可以将图片去掉再运行一次，或者是调整图片大小。