安卓第二课 利用Button进行交互

前言

这节课我们会学习涉及Java的变量的概念和利用按钮点击来与应用交互，实现修改变量。
经过上一节课的学习，相信你们已经初步学习了基本的布局和控件的知识，那么现在就来复习一下这些知识，来做一个咖啡点单APP的简单界面吧~

Button

在做之前我们先来学习一个新的控件Button。Button是用来点击的按钮，程序用于与用户进行交互的重要控件，它的属性和TextView差不多，也有 android:id，android:layout_width，android:layout_width等

<Button
    	android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="order"
        android:textAllCaps="false"
        ></Button>

注意Button中所有英文字母会自动进行大写转换，如果想转小写需要把 android:textAllCaps属性设置为false。

编写界面

现在我们先来写一个简单的界面吧，如图：

我们可以观察到，界面中有4个TextView，三个Button，可以发现这些控件都是垂直方向线性排列，所以可以使用LinearLayout作为父布局，贴得太紧不好看，我们可以给每个视图之间留16dp空白，可以设置内边距或者外边距参数来实现，可以用layout_marginTop该属性所在控件距上部最近控件的最小值，layout_marginBottom 指定该属性所在控件距下部最近控件的最小值。+和-可以设置为48dp长宽，再观察一下 “QUANITY”是全大写，可以用android:textAllCaps这个属性，设置为true，这样改小写的时候就不用改文本，只用把属性删掉就好。
因为等下要用到quantity和price下面的数字，先设置好id ：android:id="@+id/quantity_text_view"，android:id="@+id/price_text_view"

写好之后代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:padding="20dp">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="quantity"
    android:layout_marginBottom="16dp"
    android:textAllCaps="true">
    </TextView>
<Button
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:text="+"
    android:layout_marginBottom="16dp"></Button>
    <TextView
        android:id="@+id/quantity_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:text="0"
        android:layout_marginBottom="16dp"
        android:textColor="@android:color/black"></TextView>
    <Button
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:text="-"
        android:layout_marginBottom="16dp"></Button>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:text="price"
        android:textAllCaps="true"></TextView>
    <TextView
        android:id="@+id/price_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="$0"
        android:textSize="16sp"
        android:textColor="@android:color/black"></TextView>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="order"
        android:textAllCaps="false"
        ></Button>

</LinearLayout>

虽然现在有按钮，但是你什么都没有设置，这时候你点击按钮是什么都不会发生的，现在大致界面就做好了，现在我们来一步一步实现数量选择和点击显示价钱的功能。

在这之前，我们先来学习一下Java方法的概念。

方法

（这段内容在小册子里有哦，如果很熟悉的话可以跳过）
方法：是用来解决一类问题的代码的有序组合，是一个功能模块。

定义方法

方法的定义由方法名称、参数、返回值类型以及方法体组成
定义方法的语法如下：

访问修饰符 返回值类型 方法名（参数列表）{
//方法体
}

1. 访问修饰符：方法允许被访问的权限范围，可以是public ，protected ，private，甚至可以省略。其中public表示可以被其他任何代码调用，其他几种修饰符先不详解，可自行百度。
2. 返回值类型：方法的返回值的类型，如果方法不返回任何值，则返回值类型指定为void；如果方法具有返回值，则需要指定返回值类型，并且在方法体中使用return语句返回值。
3. 方法名：定义的方法的名字，必须使用合法标识符，
4. 参数列表，传递给方法的参数列表，参数可以有多个，多个参数之间以逗号隔开，每个参数由参数类型和参数名组成，以空格隔开。

代码例子

1.	无参无返回值方法
	public void print(){ //void 表示无返回值，print是方法名
    System.out.print("Hello world"); //在控制台输出Hello world
}
2.	无参带返回值方法：由于方法执行后会返回一个结果，因此在调用带返回值的方法时一般都会接收其返回值并进行处理
    public int getSum(){ //int表示返回一个整数
        int a = 5;
        int b = 6;
        int sum = a+b;
        return sum; //使用return返回值，返回11
    }
    int a = getSum(); //由上面代码中方法的getSum()返回11，则a=11
3.	带参无返回值方法：调用带参方法与调用无参方法的语法类似，但在调用的时候必须传入实际的参数值
	public void show(String name){  //参数name是一个字符串类型
        System.out.print("Hello！"+name);
}
	show("Quanta安卓"); //输出Hello！Quanta安卓
4.	带参带返回值方法：与上面类似。

功能实现

现在我们先实现点击order后，QUANTITY数量变为1。打开MainActivity，下面可以复制这段Java代码，粘贴到public class MainActivity extends AppCompatActivity {}里面，onCreate方法的外面

/**
*点击order时会执行的方法
*/
    public void submitOrder(View view){
        display(1);
    }
/**
*显示出数量
*/

    private void display(int number){
        TextView quantityTextView = (TextView)findViewById(R.id.quantity_text_view);
        quantityTextView.setText(""+number);
    }

方法里的是什么意思现在可以先不用细究，以后会学到的，学会了就可以自己写了(￣▽￣)”
然后回到我们写界面的activity_main，在order那个Button那里加上一个属性： android:onClick=“submitOrder”,像这样

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="order"
        android:textAllCaps="false"
        android:onClick="submitOrder"
        ></Button>

这时候点击order，会发现quantity那里数字由0变成了1。因为Button添加一个额外的属性：Android：onClick=submitOrder【属性的值是你希望为响应点击事件而调用的方法的名称】，点击的时候就会执行被命名为submitOrder的方法，因为这个方法的作用是把id为quantity_text_view的TextView的text显示为括号里的值，所以就变成了quantity就变成了1，同理如果改成2就会变成2。当然括号内除了能写数字，还能写数学表达式，如22，183+5等。

然后我们现在来实现点击显示数量和价钱。我们把这段代码粘贴到粘贴到public class MainActivity extends AppCompatActivity {}里面，onCreate方法的外面

/**
 * 在屏幕中显示出价格
 */
private void displayPrice(int number) {
       TextView priceTextView = (TextView) findViewById(R.id.price_text_view);
       priceTextView.setText(NumberFormat.getCurrencyInstance().format(number));
}

为了显示价格，需要在submitOrder方法中调用displayPrice方法，我们假设是一杯五块钱（当然数量和价格可以由你们自己自行设定），所以参数写成1*5

    public void submitOrder(View view){
        display(1);
        displayPrice(1*5);
    }

现在运行一下，点击order看看结果

变量

我们刚刚显示出来的都是固定的数值，现在我们来尝试使用按钮来改变数量吧~
（这些内容在小册子有，如果在小册子看过了懂了就可以跳过啦）
（1）变量命名：
1.变量的命名首字母可以是英文字母，$或者是下划线，由字母，数字，下划线组成。当然变量最好使用驼峰命名法（详见上一个博客）
2.变量的命名遵循见名知义原则，例如例如表示数量的，命名为quantity，不要命名成abc，虽然没错，但是不利于程序可读性。
3.Java变量名建议不用中文。
（2）变量的定义：

1. 每个变量必须属于一种数据类型。
2. 格式：
   数据类型 变量1，变量2，……变量n；
   例如int quantity；
   char name;
   （3）变量初始化
   1.变量的使用必须遵循先赋值初始化，然后再使用原则。
   2.变量赋值初始化：
   例如：quantity = 1；
   name = Tom；
3. 变量可以在定义时直接进行初始化。如：int quantity =1；

现在我们尝试用变量表示咖啡数量
submitOrder方法可以改成

    public void submitOrder(View view){
        int numberOfCoffee = 2;  //设置一个变量来表示咖啡数量，并且初始化为2。
        display(numberOfCoffee);
        displayPrice(numberOfCoffee*5);
}

运行之后结果是这样的

我们定义了一个变量numberOfCoffee然后对它进行初始化，值为2。

下一步，我们来做数量选择器，就是点击+，数量就加一，点击-，数量就减一，然后点order修改价格。我们的思路是写两个方法，分别是increment方法和decrement方法，功能分别是数量的加减。当点击+的时候，调用MainActivity里的increment方法，点-时调用MainActivity里的decrement方法。所以在MainActivity里添加increment方法和decrement方法。

    public void decrement(View view){
        int quantity = 0; //初始化quantity的值为0
        quantity =quantity - 1 ;
        display(quantity);
    }

    public void increment(View view){
        int quantity = 0;
        quantity =quantity + 1 ;
        display(quantity);
    }

在这两个方法里，increment方法里，先初始化一个数量的变量quantity为0，然后让quantity+1后再把新的值1赋值到quantity这个变量中，最后把新的quantity的值作为参数传给display方法。 decrement方法同理。

然后再在相应的button里加上onClick 的属性。

<Button
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:text="+"
    android:layout_marginBottom="16dp"
    android:onClick="increment"></Button>

    <Button
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:text="-"
        android:layout_marginBottom="16dp"
        android:onClick="decrement"></Button>

然后点击运行看看，我们会发现，我们一直点击加号数量却一直停留在1是因为+触发了increment方法，这个方法一直在创建一个新的quantity变量，并且初始值为0，当我们更新quantity的值的时候永远是1。减号同理。那么怎么才能完善这个功能呢，这就涉及到变量作用域的概念了。

变量作用域

在原来的代码中，increment方法中声明过一个局部变量quantity，也在decrement中声明过，之所以我们能声明一个同名变量两次是因为它们在不同的变量作用域。
如果是在一个方法里定义了一个变量，那这个变量只能在这个方法中使用，当方法执行完毕，这些变量就会被销毁。
这是代码中increment方法和decrement方法中的作用域：

因此我们需要一个全局变量，全局变量可以被应用中的任意一段代码（方法）调用，当一个方法执行完毕之后，不会被销毁。在MainActivity的起始大括号和结束大括号内声明，在MainActivity中就可以调用quantity变量了，把quantity作为全局变量就能存储咖啡的数量了。调用增加或者减少的方法，不会销毁这个值。这个时候quantity的作用域如图：

所以我们现在把increment和decrement方法中的定义变量去掉，在MainActivity中定义一个变量quantity，初始化为0；当然不要忘记修改submitOrder方法，可以把这个全局变量quantity作为参数，传给displayPrice方法。
修改之后代码：

    int quantity = 0;
    public void increment(View view){
        quantity =quantity + 1;
        display(quantity);
    }
    public void decrement(View view){
        quantity =quantity - 1 ;
        display(quantity);
    }

    public void submitOrder(View view){
        display(quantity);
        displayPrice(quantity *5);
    }

运行之后，可以点击加减选择数量，点击order，就能显示出价钱，一个简单的咖啡点单APP就好了！这其中还有很多可以改进的地方，可以以后慢慢改进~【下节课接着继续完善哦】