課程 2B: 制作一款交互性應(yīng)用

這節(jié)課是 Android 開發(fā)（入門）課程 的第一部分《布局和交互》的第四節(jié)課，導(dǎo)師依然是 Katherine Kuan 和 Kunal Chawla，主要內(nèi)容是嵌套 ViewGroups 和字符串變量。

關(guān)鍵詞：嵌套 ViewGroups，字符串變量 String，轉(zhuǎn)義字符

嵌套 ViewGroups (Nested ViewGroups)

課程 2B 通過嵌套 ViewGroups 來升級 Just Java App 的布局，這有兩個好處：

  1. 更快捷第從頭到尾瀏覽界面，提升用戶體驗；
  2. 使內(nèi)容充滿屏幕，而不是一長條。

RelativeLayout 或 LinearLayout 的嵌套使用能夠使布局豐富多樣，但要注意嵌套 ViewGroups 對設(shè)備性能的消耗。另外，FrameLayout 和 GridLayout 這兩種 ViewGroups 也能夠嵌套。

使用嵌套 ViewGroups 的步驟：分解 Views→畫 Views 層級圖→寫 XML 草稿→代碼實現(xiàn)。

  1. 分解Views。下圖為課程 2B 應(yīng)用要實現(xiàn)的布局。
分解Views

布局中一共有四個 TextView 和三個 Button。這些 Views 總體垂直排列，通過 vertical 的 LinearLayout 能實現(xiàn)；除了第二行有三個水平擺放的 Views，通過 horizontal 的 LinearLayout 能實現(xiàn)。

  1. 畫 Views 層級圖。通常為樹狀圖，表示 Views 間的父子或兄弟關(guān)系，如下圖所示。
Views 層級圖
  1. 寫 XML 草稿。根據(jù)樹狀圖寫 XML 代碼的草稿，可以清晰條理，減輕真正用代碼實現(xiàn)時的負擔(dān)。以下是一段 XML 草稿。
<LinearLayout…>
    <TextView.../>
    <LinearLayout…>
        <Button.../>
        <TextView.../>
        <Button.../>
    </LinearLayout>
    <TextView.../>
    <TextView.../>
    <Button.../>
</LinearLayout>

注意自閉標(biāo)簽和單獨標(biāo)簽的使用，他們用來區(qū)分 Views 間的嵌套關(guān)系。

  1. 代碼實現(xiàn)。以下是在 Android Studio 中實現(xiàn)布局的代碼。
<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>

注意屬性的設(shè)置，比如嵌套的 LinearLayout 高度應(yīng)該為 "wrap_content"，而不是 "match_parent"。

字符串變量 (String Variables)

  1. 字符串變量是變量的一種數(shù)據(jù)類型，包括字母、符號、數(shù)字；同樣是先聲明后引用。

  2. 字符串變量的聲明格式為

     數(shù)據(jù)類型 變量名 = "初始值";

（1）數(shù)據(jù)類型：String，注意首字母大寫。
（2）變量名：命名規(guī)則可 Google 搜索 "variable names java" 找到 Oracle 的說明文檔。通常變量名不能太長也不能短到一兩個字母；若是一個單詞則全小寫；若是多個單詞則用小駝峰命名法。
（3）=: 賦值符號，而不是等號。這里需要養(yǎng)成右手邊閱讀習(xí)慣，即把右邊的值賦予左邊的變量。另外，賦值符號兩邊各有一個空格，這種編程風(fēng)格可提高代碼的可讀性。
（4）初始值：賦予變量的值，通常是字面值 (Literal)，也可以為空；值在一對雙引號 "..." 內(nèi)，若要在其中添加雙引號 "，需要在前面使用轉(zhuǎn)義字符 \，即 \"；若要換行則為 \n。轉(zhuǎn)義序列可 Google 搜索 "java escape characters" 找到 Oracle 的說明文檔。
（5）分號結(jié)尾。

  1. 字符串變量的賦值同樣無需再指定數(shù)據(jù)類型，也具有右手邊閱讀習(xí)慣；類似 int（整型變量）的運算，字符串變量能用 + 號連接字符串 (String Concatenation)，有許多組合方式：
    （1）"字符" + "字符"
    （2）"字符" + 數(shù)字
    （3）"字符" + 整形變量
    連接數(shù)字和其他變量時無需用雙引號包括。組合其他變量時，僅改變字符串變量的一部分即可實現(xiàn)內(nèi)容的更新。組合變量時注意添加空格。
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 按鈕顯示的內(nèi)容更多了。另外修改了 XML 代碼，使控制數(shù)量的按鈕布局改變了。效果如下圖。

注意粘貼代碼時的位置，尤其注意大括號的位置。
代碼完成后，使用 Android Studio 的 Reformat Code 和 Rearrange Code 功能來潤色代碼。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容