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

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

關(guān)鍵詞:嵌套 ViewGroups橡庞,字符串變量 String,轉(zhuǎn)義字符

嵌套 ViewGroups (Nested ViewGroups)

課程 2B 通過(guò)嵌套 ViewGroups 來(lái)升級(jí) Just Java App 的布局,這有兩個(gè)好處:

  1. 更快捷第從頭到尾瀏覽界面登刺,提升用戶體驗(yàn);
  2. 使內(nèi)容充滿屏幕嗡呼,而不是一長(zhǎng)條纸俭。

RelativeLayout 或 LinearLayout 的嵌套使用能夠使布局豐富多樣,但要注意嵌套 ViewGroups 對(duì)設(shè)備性能的消耗南窗。另外掉蔬,FrameLayoutGridLayout 這兩種 ViewGroups 也能夠嵌套。

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

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

布局中一共有四個(gè) TextView 和三個(gè) Button壕翩。這些 Views 總體垂直排列,通過(guò) vertical 的 LinearLayout 能實(shí)現(xiàn)傅寡;除了第二行有三個(gè)水平擺放的 Views放妈,通過(guò) horizontal 的 LinearLayout 能實(shí)現(xiàn)。

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

注意自閉標(biāo)簽和單獨(dú)標(biāo)簽的使用疗绣,他們用來(lái)區(qū)分 Views 間的嵌套關(guān)系线召。

  1. 代碼實(shí)現(xiàn)。以下是在 Android Studio 中實(shí)現(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ù)類型讯壶,包括字母、符號(hào)患雏、數(shù)字鹏溯;同樣是先聲明后引用。

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

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

(1)數(shù)據(jù)類型:String淹仑,注意首字母大寫丙挽。
(2)變量名:命名規(guī)則可 Google 搜索 "variable names java" 找到 Oracle 的說(shuō)明文檔肺孵。通常變量名不能太長(zhǎng)也不能短到一兩個(gè)字母;若是一個(gè)單詞則全小寫颜阐;若是多個(gè)單詞則用小駝峰命名法平窘。
(3)=: 賦值符號(hào),而不是等號(hào)凳怨。這里需要養(yǎng)成右手邊閱讀習(xí)慣瑰艘,即把右邊的值賦予左邊的變量。另外肤舞,賦值符號(hào)兩邊各有一個(gè)空格紫新,這種編程風(fēng)格可提高代碼的可讀性。
(4)初始值:賦予變量的值李剖,通常是字面值 (Literal)芒率,也可以為空;值在一對(duì)雙引號(hào) "..." 內(nèi)篙顺,若要在其中添加雙引號(hào) "偶芍,需要在前面使用轉(zhuǎn)義字符 \,即 \"德玫;若要換行則為 \n匪蟀。轉(zhuǎn)義序列可 Google 搜索 "java escape characters" 找到 Oracle 的說(shuō)明文檔
(5)分號(hào)結(jié)尾宰僧。

  1. 字符串變量的賦值同樣無(wú)需再指定數(shù)據(jù)類型材彪,也具有右手邊閱讀習(xí)慣;類似 int(整型變量)的運(yùn)算琴儿,字符串變量能用 + 號(hào)連接字符串 (String Concatenation)查刻,有許多組合方式:
    (1)"字符" + "字符"
    (2)"字符" + 數(shù)字
    (3)"字符" + 整形變量
    連接數(shù)字和其他變量時(shí)無(wú)需用雙引號(hào)包括。組合其他變量時(shí)凤类,僅改變字符串變量的一部分即可實(shí)現(xiàn)內(nèi)容的更新穗泵。組合變量時(shí)注意添加空格。
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);
   }
}

添加了一個(gè) displayMessage method谜疤,使點(diǎn)擊 ORDER 按鈕顯示的內(nèi)容更多了佃延。另外修改了 XML 代碼,使控制數(shù)量的按鈕布局改變了夷磕。效果如下圖履肃。

注意粘貼代碼時(shí)的位置,尤其注意大括號(hào)的位置坐桩。
代碼完成后尺棋,使用 Android Studio 的 Reformat Code 和 Rearrange Code 功能來(lái)潤(rùn)色代碼。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末绵跷,一起剝皮案震驚了整個(gè)濱河市膘螟,隨后出現(xiàn)的幾起案子成福,更是在濱河造成了極大的恐慌,老刑警劉巖荆残,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件奴艾,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡内斯,警方通過(guò)查閱死者的電腦和手機(jī)蕴潦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)俘闯,“玉大人潭苞,你說(shuō)我怎么就攤上這事≌胬剩” “怎么了萄传?”我有些...
    開(kāi)封第一講書人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)蜜猾。 經(jīng)常有香客問(wèn)我,道長(zhǎng)振诬,這世上最難降的妖魔是什么蹭睡? 我笑而不...
    開(kāi)封第一講書人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮赶么,結(jié)果婚禮上肩豁,老公的妹妹穿的比我還像新娘。我一直安慰自己辫呻,他們只是感情好清钥,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著放闺,像睡著了一般祟昭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上怖侦,一...
    開(kāi)封第一講書人閱讀 49,821評(píng)論 1 290
  • 那天篡悟,我揣著相機(jī)與錄音,去河邊找鬼匾寝。 笑死搬葬,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的艳悔。 我是一名探鬼主播急凰,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼猜年!你這毒婦竟也來(lái)了抡锈?” 一聲冷哼從身側(cè)響起疾忍,我...
    開(kāi)封第一講書人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎企孩,沒(méi)想到半個(gè)月后锭碳,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡勿璃,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年擒抛,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片补疑。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡歧沪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出莲组,到底是詐尸還是另有隱情诊胞,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布锹杈,位于F島的核電站撵孤,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏竭望。R本人自食惡果不足惜邪码,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望咬清。 院中可真熱鬧闭专,春花似錦、人聲如沸旧烧。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)掘剪。三九已至平委,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間夺谁,已是汗流浹背肆汹。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留予权,地道東北人昂勉。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像扫腺,于是被迫代替她去往敵國(guó)和親岗照。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容