这节课是 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 应用要实现的布局。
分解Views
布局中一共有四个 TextView 和三个 Button。这些 Views 总体垂直排列，通过 vertical 的 LinearLayout 能实现；除了第二行有三个水平摆放的 Views，通过 horizontal 的 LinearLayout 能实现。
- 画 Views 层级图。通常为树状图，表示 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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="quantity"
android:textAllCaps="true" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="decrement"
android:text="-" />
<TextView
android: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" />
<Button
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="increment"
android:text="+" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginTop="16dp"
android:text="price"
android:textAllCaps="true" />
<TextView
android:id="@+id/price_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$0"
android:textColor="#000000"
android:textSize="16sp" />
<Button
android: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;
@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 功能来润色代码。
网友评论