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