咖啡小应用

前言

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

1.UI 界面分析

一言不合先上图

咖啡小应用_第1张图片
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 。
    下面是布局文件的代码:




    

    
        
        

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.总结

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

你可能感兴趣的:(咖啡小应用)