Return to Video

02-20 Padding vs. Margin

  • 0:00 - 0:02
    目前為止不錯
  • 0:02 - 0:05
    你即將要建立很棒的配置
  • 0:05 - 0:09
    但是,目前建立的配置
    我看到一個問題
  • 0:09 - 0:13
    畫面太靠近ViewGroup的邊緣
  • 0:13 - 0:14
    或太靠近裝置邊緣
  • 0:14 - 0:16
    我們在這個課程中
    建立的配置
  • 0:16 - 0:20
    我們可以增加一點視覺效果
  • 0:20 - 0:24
    增加一點留白
    看起來會更美觀
  • 0:24 - 0:26
    我們利用加框與留白概念完成
  • 0:26 - 0:29
    在這影片中會做說明
  • 0:29 - 0:31
    舉例來說,這裡跟這裡
    我們可以加點留白
  • 0:31 - 0:34
    或甚至上方
    畫面看起來不會太擠
  • 0:34 - 0:38
    擠到母項目邊緣裝置邊緣
  • 0:38 - 0:39
    這只是一種設計方法
  • 0:39 - 0:42
    因為有時候你會想要邊靠邊
  • 0:42 - 0:45
    像我稍早說的填滿影像效果
  • 0:45 - 0:49
    但任何時候,你可以增加留白
    增加一點喘息空間
  • 0:49 - 0:53
    讓內文更容易閱讀與掃描
  • 0:53 - 0:57
    我會示範增加外框或留白到畫面中
  • 0:57 - 0:59
    我們從哈囉TextView開始
  • 0:59 - 1:02
    若我增加八點框到畫面中
  • 1:02 - 1:05
    每一個方向就會增加八點
  • 1:05 - 1:08
    若我們加八點的配置留白到TextView
  • 1:08 - 1:11
    看起來就會像這樣
  • 1:11 - 1:13
    要增加留白
    你必須放到ViewGroup裡面
  • 1:13 - 1:16
    所以我才有這個線形配置
  • 1:16 - 1:19
    線形配置採用原始TextView
  • 1:19 - 1:21
    然後推加八點
  • 1:21 - 1:23
    從左邊與從上面
  • 1:23 - 1:26
    也從各邊增加
  • 1:26 - 1:28
    因此就算你在子TextView宣稱
  • 1:28 - 1:33
    外框或留白
    外框由TextView自己處理
  • 1:33 - 1:36
    而留白是由母ViewGroup處理
  • 1:36 - 1:40
    若這兩個都放到真實裝置上
    而且你沒有TextView的
  • 1:40 - 1:43
    背景,技術上來說
    兩者看起來一樣
  • 1:43 - 1:46
    文字會從左邊八點開始
  • 1:46 - 1:48
    裝置上方八點開始
  • 1:48 - 1:52
    但是,如果TextView有背景顏色
  • 1:52 - 1:55
    使用者會看到TextView這麼大
  • 1:55 - 1:59
    而在其他裝置上
    TextView只有這麼大
  • 1:59 - 2:01
    這是顯示畫面外框的編碼
  • 2:02 - 2:07
    在TextView XML元素
    你會宣稱新的屬性
  • 2:07 - 2:11
    android冒號外框等於八點問號
  • 2:11 - 2:12
    你可以選擇你要的大小
  • 2:12 - 2:15
    只要符合點值
  • 2:15 - 2:19
    當我們明確指示八點
    TextView左邊
  • 2:19 - 2:21
    上方、底部與右邊會增加八點
  • 2:22 - 2:25
    不用一般android外框屬性
  • 2:25 - 2:29
    你可以從左邊、上方或下方分開
  • 2:29 - 2:33
    實質上,這四行編碼都是做同一件事
  • 2:33 - 2:36
    但是,這些細部粒子控制
    讓你能有不同的外框
  • 2:36 - 2:39
    左邊、右邊、上方或下方都不同
  • 2:39 - 2:43
    四個邊不需要有相同的外框值
  • 2:43 - 2:47
    外框的預設值是零
    所以若你明定左邊、右邊
  • 2:47 - 2:52
    與上方外框,但沒有下方
    下方外框會是零
  • 2:52 - 2:56
    要明訂留白,你可以
    再增加一個屬性到TextVIew
  • 2:56 - 3:00
    屬性名稱是android
    冒號配置底線留白
  • 3:00 - 3:03
    我們可以設定相等
    例如八點
  • 3:03 - 3:07
    讓子項目各邊遠離母項目八點
  • 3:07 - 3:12
    若上方還有另一個子項目\擁有留白則會
  • 3:12 - 3:15
    把這個TextView往第一個TextView
    下方推八點
  • 3:16 - 3:19
    你可以把留白想成這個畫面
  • 3:19 - 3:20
    四周的立場
  • 3:20 - 3:24
    沒有畫面可以進入八點的區域內
  • 3:24 - 3:28
    或者你也可以分開設定四邊的留白
  • 3:28 - 3:32
    配置marginLeft、配置
    marginRight、上方與下方
  • 3:32 - 3:36
    若你沒有明訂這些值
    預設值為零
  • 3:36 - 3:39
    記住ViewGroup根據留白定位這些
  • 3:39 - 3:42
    子項目,你可以查看屬性
  • 3:42 - 3:45
    都是由配置底線留白開始
  • 3:45 - 3:48
    如此一來,你知道ViewGroup
    處理這些畫面的
  • 3:48 - 3:49
    定位
  • 3:50 - 3:53
    外框與留白可以應用在所有畫面
  • 3:53 - 3:56
    讓我們實際練習剛學的屬性
  • 3:56 - 3:58
    我這裡有線形配置的三個TextView
  • 3:58 - 4:01
    通通都擠在螢幕的左邊
  • 4:01 - 4:02
    所以我要增加一點空間
  • 4:03 - 4:05
    讓我們從增加留白開始
  • 4:06 - 4:08
    酷,這個TextViewn四周有多些空間
  • 4:09 - 4:11
    另外兩個TextView我也做同樣的事
  • 4:12 - 4:17
    真有趣,上面是16點
    但實際上是32點因為
  • 4:17 - 4:20
    從第一個TextView底部有八點留白
  • 4:20 - 4:23
    第二個TextView上方有八點留白
  • 4:23 - 4:25
    若我們要空間一致
  • 4:25 - 4:30
    每個畫面之間都是16點
    我們可以改變這裡的留白
  • 4:30 - 4:33
    我可以拆成各別的留白值
  • 4:33 - 4:38
    這個編碼,我有16點左邊留白
    上方留白16點
  • 4:38 - 4:41
    沒有第一個TextViw的底部留白
  • 4:41 - 4:43
    所以中間的空間現在是16點
  • 4:43 - 4:47
    最後一個TextView也一樣
  • 4:47 - 4:49
    酷,現在所有垂直空間一致
  • 4:50 - 4:53
    稍早我說要在這些畫面加一些白邊
  • 4:53 - 4:56
    技術上來說空間是透明的
  • 4:56 - 4:59
    你可以看透後面的東西
  • 4:59 - 5:02
    在這個案例中
    ViewGroup有灰色背景
  • 5:02 - 5:05
    配置在裝置上看起來一樣
    不論我們使用留白或是
  • 5:05 - 5:09
    外框,因為在這例子中
    我們TextView沒有背景顏色
  • 5:10 - 5:12
    讓我們增加並看
    每一個畫面的邊界在哪裡
  • 5:13 - 5:16
    好,第一個TextView有背景顏色了
  • 5:16 - 5:20
    當我們增加左邊與上方留白
    我們看到ViewGroup推
  • 5:20 - 5:23
    TextView八點,往下推八點
  • 5:23 - 5:27
    我們可以改變外框
    現在我們看到TextView變大
  • 5:27 - 5:30
    占用左邊與上方八點空間
  • 5:31 - 5:33
    所以視覺上
    裝置上的畫面看起來不同
  • 5:33 - 5:35
    不論是有外框或是留白
  • 5:35 - 5:38
    若這個TextView有背景顏色
  • 5:38 - 5:41
    其他畫面也能做同樣的事
    所以你看這很好
  • 5:42 - 5:45
    增加外框與留白值
    不限於這些子畫面
  • 5:45 - 5:48
    你可以在ViewGroup增加
  • 5:48 - 5:51
    若我在線形配置增加外框值
  • 5:51 - 5:56
    你會看到這個畫面
    所有方向都改變16點
  • 5:56 - 5:59
    我說過外框或留白值可以自行設定
  • 5:59 - 6:01
    但你怎麼知道選什麼值?
  • 6:01 - 6:05
    材料設計指引建議
    你使用八點
  • 6:05 - 6:06
    倍增
  • 6:06 - 6:09
    這是進階知識
    但基本上我們要
  • 6:09 - 6:13
    元件在八點框格螢幕排列
  • 6:13 - 6:16
    螢幕上不會真的出現正方形
  • 6:16 - 6:18
    若你要把文字定位在這裡
  • 6:18 - 6:21
    你可能要往左邊移動兩個正方形
  • 6:21 - 6:25
    框格裡兩個正方形等於16點
  • 6:25 - 6:29
    在電子郵件螢幕
    所有圖示排在這條線上
  • 6:29 - 6:33
    他們定位在螢幕左邊16點
  • 6:33 - 6:38
    所有的文字定位
    在螢幕邊緣左邊72點
  • 6:38 - 6:41
    所以你可以想像
    內文開始跟在特定的
  • 6:41 - 6:42
    行這裡
  • 6:42 - 6:44
    這是另一個視覺化的方法
  • 6:44 - 6:47
    從Google I/O應用程式的螢幕擷取
  • 6:47 - 6:54
    我們有內文排列在16點線
    與72點線
  • 6:54 - 6:57
    實質上72點從螢幕左邊開始
  • 6:57 - 6:59
    從這一邊
  • 6:59 - 7:03
    內文停在螢幕右邊16點
  • 7:03 - 7:05
    在平板上,螢幕較大,所以
  • 7:05 - 7:07
    可以有更多外框
  • 7:07 - 7:11
    可以從螢幕左邊24點
  • 7:11 - 7:12
    或其他值
  • 7:12 - 7:17
    我們建議這些數值的原因
    是讓內文更容易閱讀
  • 7:17 - 7:20
    舉例來說,若這個標題
    改變一些畫素
  • 7:20 - 7:24
    下文就會往右移幾個畫素
  • 7:24 - 7:26
    就會有鋸齒狀的邊緣
  • 7:26 - 7:30
    就會讓讀者分心
  • 7:30 - 7:35
    讓每個東西排列好
    讓應用程式更容易閱讀使用
  • 7:35 - 7:38
    這是使用外框留白的實際例子
  • 7:38 - 7:40
    在Google行事曆螢幕擷取畫面
  • 7:40 - 7:44
    這裡有一些文字移動到這邊
  • 7:44 - 7:47
    這些行事曆事件之間也有些空間
  • 7:47 - 7:48
    若我們使用外框
  • 7:48 - 7:52
    則背景影像可能會延伸到空白處
  • 7:52 - 7:56
    若我們使用留白,就會在畫面
    周圍增加一些緩衝空間
  • 7:56 - 7:58
    這應該是留白
  • 7:58 - 8:02
    這是行事曆事件的數位螢幕擷取
  • 8:02 - 8:06
    這裡那裡有很多文字
    間格似乎都比其他大
  • 8:06 - 8:09
    我們可以增加外框
    建立較大的間格
  • 8:09 - 8:13
    要增加間格,你可以在
    這個TextView下方增加外框
  • 8:13 - 8:15
    或在這個畫面上方增加外框
  • 8:16 - 8:18
    兩種都可行
  • 8:18 - 8:21
    或你可以甚至使用配置留白
  • 8:21 - 8:24
    你很難分辨使用配置留白
    或是外框之間的差異
  • 8:24 - 8:28
    因為文字背景是透明的
  • 8:28 - 8:31
    現在換你練習設定不同的外框
  • 8:31 - 8:32
    與留白數值
  • 8:32 - 8:35
    我們提供一些初始編碼
    讓你使用下列連結開始
  • 8:35 - 8:39
    當你熟悉外框與留白數值
  • 8:39 - 8:40
    試著建立配置
  • 8:41 - 8:46
    對了,這個文字位在邊緣16點處
  • 8:46 - 8:49
    但在兩個TextView之間只有八點
  • 8:49 - 8:51
    完成後,勾選這個格子
Title:
02-20 Padding vs. Margin
Description:

more » « less
Video Language:
English
Team:
Udacity
Project:
UD837 - Android for Beginners
Duration:
08:52

Chinese, Traditional subtitles

Revisions