咖啡小应用
前言
该篇文章是我学习 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.总结
到此为止，关于点咖啡小应用就完成了，由于本人的才疏学浅和自身的代码风格，在上面的代码中会加入个人的意志，如有错误请指出！
