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

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

关键词:嵌套 ViewGroups,字符串变量 String,转义字符

嵌套 ViewGroups (Nested ViewGroups)

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

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

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

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

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

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

  1. 画 Views 层级图。通常为树状图,表示 Views 间的父子或兄弟关系,如下图所示。
Views 层级图
  1. 写 XML 草稿。根据树状图写 XML 代码的草稿,可以清晰条理,减轻真正用代码实现时的负担。以下是一段 XML 草稿。
<LinearLayout…>
    <TextView.../>
    <LinearLayout…>
        <Button.../>
        <TextView.../>
        <Button.../>
    </LinearLayout>
    <TextView.../>
    <TextView.../>
    <Button.../>
</LinearLayout>

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

  1. 代码实现。以下是在 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. 字符串变量是变量的一种数据类型,包括字母、符号、数字;同样是先声明后引用。

  2. 字符串变量的声明格式为

     数据类型 变量名 = "初始值";
    

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容