前言

該篇文章是我學習 L2-2A 課程后的筆記，純屬個人的一派胡言，如有異議，你來打我呀！

1.UI 界面分析

一言不合先上圖

android.gif

• 現(xiàn)在我們來分析上圖需要哪些控件顯示在界面中?
  從整體看：當前頁面有 7 個控件，由 4 個 TextView 和 3 個Button 組成，其中顯示 "QUANTITY" 和 "PRICE" 的兩個 TextView 是不變的，剩下的兩個 TextView 是可變的，所以要給剩下的兩個 TextView 加上 ID ，這樣就可以在代碼中獲取它們，從而改變的它們的值。（圖中所有的 TextView 你可以根據(jù)自己的愛好為它們加上顏色、大小、字體等，在這里我就不詳細的說明了）
  圖中的 3 個 Button 都具有點擊事件，所以我要把 android:onClick 屬性都加個它們，其中 "+" 和 "-" 的 Button 是正方形，所以我就個它們的寬和高都設為 48dp；

• 怎么把控件按照圖中那樣顯示在 UI 界面中？
  從圖中可以分析得：圖中大部分的控件都是從上到下順序分布的（除了顯示 "+" 與 "-" 的 Button 和顯示數(shù)量的 TextView 是從左到右的順序分布的，在這里我們可以把它們看做一個整體），所以根布局我就選擇 LinearLayout，方向為 vertical，根布局選擇好了，我們再來看怎么顯示 "+" 與 "-" 的 Button 和顯示數(shù)量的 TextView 的布局，在這里我選擇布局嵌套，為它們 3 個控件再添加一個 LinearLayout 布局來包裹它們，方向為 horizontal，到此為止布局已經(jīng)基本 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.功能需求分析

從圖中我們可以看出， "+" 和 "-" 按鈕的功能是增加一杯咖啡或減少一杯咖啡，然后每次點擊 "+" 和 "-" 按鈕，顯示杯子數(shù)量的 TextView 就會相應的增加或者減少，并且杯子的數(shù)量不能小于 0。

當我們選擇咖啡的數(shù)量后，再點擊 "ORDER" 按鈕結算金額（在這里 一杯咖啡等于 5 塊錢），然后顯示金額的 TextView 就會根據(jù)相應的規(guī)則計算出咖啡的價格并顯示出來。

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);
    }

     //顯示杯子的數(shù)量
    public void setNumber(int number) {
        tvNumber.setText("" + number);
    }

    public void setMoney(int money) {
         /*返回一個貨幣格式為當前默認語言環(huán)境。*/
        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.總結

到此為止，關于點咖啡小應用就完成了，由于本人的才疏學淺和自身的代碼風格，在上面的代碼中會加入個人的意志，如有錯誤請指出！