课程 2B: 制作一款交互性应用

这节课是 Android 开发（入门）课程 的第一部分《布局和交互》的第四节课，导师依然是 Katherine Kuan 和 Kunal Chawla，主要内容是嵌套 ViewGroups 和字符串变量。

关键词：嵌套 ViewGroups，字符串变量 String，转义字符

嵌套 ViewGroups (Nested ViewGroups)

课程 2B 通过嵌套 ViewGroups 来升级 Just Java App 的布局，这有两个好处：

1. 更快捷第从头到尾浏览界面，提升用户体验；
2. 使内容充满屏幕，而不是一长条。

RelativeLayout 或 LinearLayout 的嵌套使用能够使布局丰富多样，但要注意嵌套 ViewGroups 对设备性能的消耗。另外，FrameLayout 和 GridLayout 这两种 ViewGroups 也能够嵌套。

使用嵌套 ViewGroups 的步骤：分解 Views→画 Views 层级图→写 XML 草稿→代码实现。

1. 分解Views。下图为课程 2B 应用要实现的布局。

分解Views

布局中一共有四个 TextView 和三个 Button。这些 Views 总体垂直排列，通过 vertical 的 LinearLayout 能实现；除了第二行有三个水平摆放的 Views，通过 horizontal 的 LinearLayout 能实现。

2. 画 Views 层级图。通常为树状图，表示 Views 间的父子或兄弟关系，如下图所示。

Views 层级图

3. 写 XML 草稿。根据树状图写 XML 代码的草稿，可以清晰条理，减轻真正用代码实现时的负担。以下是一段 XML 草稿。

注意自闭标签和单独标签的使用，他们用来区分 Views 间的嵌套关系。

4. 代码实现。以下是在 Android Studio 中实现布局的代码。

注意属性的设置，比如嵌套的 LinearLayout 高度应该为 "wrap_content"，而不是 "match_parent"。

字符串变量 (String Variables)

1. 字符串变量是变量的一种数据类型，包括字母、符号、数字；同样是先声明后引用。

2. 字符串变量的声明格式为

    数据类型 变量名 = "初始值";
   

（1）数据类型：String，注意首字母大写。
（2）变量名：命名规则可 Google 搜索 "variable names java" 找到 Oracle 的说明文档。通常变量名不能太长也不能短到一两个字母；若是一个单词则全小写；若是多个单词则用小驼峰命名法。
（3）=: 赋值符号，而不是等号。这里需要养成右手边阅读习惯，即把右边的值赋予左边的变量。另外，赋值符号两边各有一个空格，这种编程风格可提高代码的可读性。
（4）初始值：赋予变量的值，通常是字面值 (Literal)，也可以为空；值在一对双引号 "..." 内，若要在其中添加双引号 "，需要在前面使用转义字符 \，即 \"；若要换行则为 \n。转义序列可 Google 搜索 "java escape characters" 找到 Oracle 的说明文档。
（5）分号结尾。

3. 字符串变量的赋值同样无需再指定数据类型，也具有右手边阅读习惯；类似 int（整型变量）的运算，字符串变量能用 + 号连接字符串 (String Concatenation)，有许多组合方式：
   （1）"字符" + "字符"
   （2）"字符" + 数字
   （3）"字符" + 整形变量
   连接数字和其他变量时无需用双引号包括。组合其他变量时，仅改变字符串变量的一部分即可实现内容的更新。组合变量时注意添加空格。

Just Java App

In MainActivity.java

package com.example.android.justjava;

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

import java.text.NumberFormat;

/**
* This app displays an order form to order coffee.
*/
public class MainActivity extends AppCompatActivity {

   int quantity = 0;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
   }

   /**
    * This method is called when the order button is clicked.
    */
   public void submitOrder(View view) {
       int price = quantity * 5;
       String priceMessage = "Total: $" + price;
       priceMessage = priceMessage + "\nThank you!";
       displayMessage(priceMessage);
   }

   /**
    * This method is called when the + button is clicked.
    */
   public void increment(View view) {
       quantity = quantity + 1;
       display(quantity);
   }

   /**
    * This method is called when the - button is clicked.
    */
   public void decrement(View view) {
       quantity = quantity - 1;
       display(quantity);
   }

   /**
    * This method displays the given quantity value on the screen.
    */
   private void display(int number) {
       TextView quantityTextView = (TextView) findViewById(
               R.id.quantity_text_view);
       quantityTextView.setText("" + number);
   }

   /**
    * This method displays the given quantity value on the screen.
    */
   private void displayPrice(int number) {
       TextView priceTextView = (TextView) findViewById(R.id.price_text_view);
       priceTextView.setText(NumberFormat.getCurrencyInstance().format(number));
   }

   /**
    * This method displays the given text on the screen.
    */
   private void displayMessage(String message) {
       TextView priceTextView = (TextView) findViewById(R.id.price_text_view);
       priceTextView.setText(message);
   }
}

添加了一个 displayMessage method，使点击 ORDER 按钮显示的内容更多了。另外修改了 XML 代码，使控制数量的按钮布局改变了。效果如下图。

注意粘贴代码时的位置，尤其注意大括号的位置。
代码完成后，使用 Android Studio 的 Reformat Code 和 Rearrange Code 功能来润色代码。