咖啡小应用

前言

该篇文章是我学习 L2-2A 课程后的笔记，纯属个人的一派胡言，如有异议，你来打我呀！

1.UI 界面分析

一言不合先上图

android.gif

• 现在我们来分析上图需要哪些控件显示在界面中?
  从整体看：当前页面有 7 个控件，由 4 个 TextView 和 3 个Button 组成，其中显示 "QUANTITY" 和 "PRICE" 的两个 TextView 是不变的，剩下的两个 TextView 是可变的，所以要给剩下的两个 TextView 加上 ID ，这样就可以在代码中获取它们，从而改变的它们的值。（图中所有的 TextView 你可以根据自己的爱好为它们加上颜色、大小、字体等，在这里我就不详细的说明了）
  图中的 3 个 Button 都具有点击事件，所以我要把 android:onClick 属性都加个它们，其中 "+" 和 "-" 的 Button 是正方形，所以我就个它们的宽和高都设为 48dp；

• 怎么把控件按照图中那样显示在 UI 界面中？
  从图中可以分析得：图中大部分的控件都是从上到下顺序分布的（除了显示 "+" 与 "-" 的 Button 和显示数量的 TextView 是从左到右的顺序分布的，在这里我们可以把它们看做一个整体），所以根布局我就选择 LinearLayout，方向为 vertical，根布局选择好了，我们再来看怎么显示 "+" 与 "-" 的 Button 和显示数量的 TextView 的布局，在这里我选择布局嵌套，为它们 3 个控件再添加一个 LinearLayout 布局来包裹它们，方向为 horizontal，到此为止布局已经基本 OK 。
  下面是布局文件的代码：

<?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"
    android:layout_margin="10dp"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="QUANTITY"
        android:textSize="16sp"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        
        <Button
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:text="-"
            android:onClick="btnLess"/>

        <TextView
            android:id="@+id/tv_number"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:text="0"
            android:textColor="#000000"
            android:textSize="16sp"/>

        <Button
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:text="+"
            android:onClick="btnPlus"/>

    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="PRICE"
        android:textSize="16sp"/>

    <TextView
        android:id="@+id/tv_money"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="$0"
        android:textColor="#000000"
        android:textSize="16sp"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:onClick="btnOrder"
        android:text="ORDER"/>

</LinearLayout>

2.功能需求分析

从图中我们可以看出， "+" 和 "-" 按钮的功能是增加一杯咖啡或减少一杯咖啡，然后每次点击 "+" 和 "-" 按钮，显示杯子数量的 TextView 就会相应的增加或者减少，并且杯子的数量不能小于 0。

当我们选择咖啡的数量后，再点击 "ORDER" 按钮结算金额（在这里 一杯咖啡等于 5 块钱），然后显示金额的 TextView 就会根据相应的规则计算出咖啡的价格并显示出来。

Talk is cheap , Show me the code

package com.vole.coffeeshop;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.TextView;

import java.text.NumberFormat;

public class MainActivity extends AppCompatActivity {
    private int number = 0;
    private TextView tvNumber;
    private TextView tvMoney;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tvNumber = (TextView) findViewById(R.id.tv_number);
        tvMoney = (TextView) findViewById(R.id.tv_money);
    }

    public void btnOrder(View view) {
        setMoney(number * 5);
    }

     //显示杯子的数量
    public void setNumber(int number) {
        tvNumber.setText("" + number);
    }

    public void setMoney(int money) {
         /*返回一个货币格式为当前默认语言环境。*/
        tvMoney.setText(NumberFormat.getCurrencyInstance().format(money));
    }

    //加
    public void btnPlus(View view) {
        number += 1;
        setNumber(number);
    }

    //减
    public void btnLess(View view) {
        if (number == 0) {
            return;
        }
        number -= 1;
        setNumber(number);
    }
}

3.总结

到此为止，关于点咖啡小应用就完成了，由于本人的才疏学浅和自身的代码风格，在上面的代码中会加入个人的意志，如有错误请指出！