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

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

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

嵌套 ViewGroups (Nested ViewGroups)

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

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

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

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

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

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

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

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

<LinearLayout…><TextView.../><LinearLayout…><Button.../><TextView.../><Button.../></LinearLayout><TextView.../><TextView.../><Button.../>
</LinearLayout>
复制代码

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

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:paddingBottom="16dp"android:paddingLeft="16dp"android:paddingRight="16dp"android:paddingTop="16dp"tools:context="com.example.android.justjava.MainActivity"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginBottom="16dp"android:text="quantity"android:textAllCaps="true" /><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"><Buttonandroid:layout_width="48dp"android:layout_height="48dp"android:onClick="decrement"android:text="-" /><TextViewandroid:id="@+id/quantity_text_view"android:layout_width="match_parent"android:layout_height="wrap_content"android:paddingLeft="8dp"android:paddingRight="8dp"android:text="0"android:textColor="#000000"android:textSize="16sp" /><Buttonandroid:layout_width="48dp"android:layout_height="48dp"android:onClick="increment"android:text="+" /></LinearLayout><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginBottom="16dp"android:layout_marginTop="16dp"android:text="price"android:textAllCaps="true" /><TextViewandroid:id="@+id/price_text_view"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="$0"android:textColor="#000000"android:textSize="16sp" /><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="16dp"android:onClick="submitOrder"android:text="order" />
</LinearLayout>
复制代码

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

字符串变量 (String Variables)

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

字符串变量的声明格式为

 数据类型 变量名 = "初始值";
复制代码

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

字符串变量的赋值同样无需再指定数据类型，也具有右手边阅读习惯；类似 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;@Overrideprotected 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 功能来润色代码。