这节课是 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">
<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 功能来润色代码。