Return to Video

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
    如果我们在视图上增加8点
    填充
  • 1:02 - 1:05
    然后使它在这里的每一个方向都增大8dp
  • 1:05 - 1:08
    如果再在TextView的布局边缘
    加上8点,
  • 1:08 - 1:11
    那么看起来就会是这样。
  • 1:11 - 1:13
    为了加上边界,你需要把它放到ViewGroup里面,
    所以
  • 1:13 - 1:16
    那就是为什么我在这儿
    有这个线性布局。
  • 1:16 - 1:19
    线性布局是一个
    需要原始的TextView和
  • 1:19 - 1:21
    8dips来推动。
  • 1:21 - 1:23
    从左边和从顶部。
  • 1:23 - 1:26
    并且还从侧面。
  • 1:26 - 1:28
    因此,即使你声明的填充或
  • 1:28 - 1:33
    在子TextView限定边界,填充
    会由TextView的本身处理。
  • 1:33 - 1:36
    而边界限定由父ViewGroup来处理。
  • 1:36 - 1:40
    如果你在真实设备上有这两个,
    但你没有
  • 1:40 - 1:43
    TextView的背景,那么在技术上
    两者看起来是一样的
  • 1:43 - 1:46
    文本将开始从左侧8点开始,
  • 1:46 - 1:48
    然后是低于该装置的顶部的8点。
  • 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:padding=“8dp”。
  • 2:11 - 2:12
    你可以选择任何
    你想要的大小
  • 2:12 - 2:15
    填充,
    只要它是一个dip值。
  • 2:15 - 2:19
    当我们指定8dp的填充,
    它增加了8dips到左侧,
  • 2:19 - 2:21
    顶部,底部和
    TextView的右边缘。
  • 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
    顶部填充,但不是底部,
    则底部填充会是零dips
  • 2:52 - 2:56
    要指定边界,你可以给TextView添加
    又一个属性。
  • 2:56 - 3:00
    该属性的名称是
    android:layout_margin="8dp",我们可以
  • 3:00 - 3:03
    设置它等于为
    例如8dips。
  • 3:03 - 3:07
    这会将子TextView
    挪开到离父TextView的8dips以外。
  • 3:07 - 3:12
    如果有另一个子TextView在
    这里的顶部,然后有一个边界限定会
  • 3:12 - 3:15
    迫使这个TextView到先前这个
    TextView下面8dips。
  • 3:16 - 3:19
    你可以认为边界限定是
  • 3:19 - 3:20
    这一视图周围的小力场。
  • 3:20 - 3:24
    没有其他视图可以进入这个
    周围8dip区域。
  • 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
    他们都始于layout_margin.
  • 3:45 - 3:48
    这样一来,你知道的ViewGroup
  • 3:48 - 3:49
    是用于处理这些视图的。
  • 3:50 - 3:53
    填充和边界限定可以适用于所有的视图。
  • 3:53 - 3:56
    让我们把我们刚刚学到的这些属性付诸实践。
  • 3:56 - 3:58
    在这里,在一个线性布局中
    有三个TextViews
  • 3:58 - 4:01
    他们都堆挤
    在屏幕的左边缘,所以
  • 4:01 - 4:02
    我想增加一些空间。
  • 4:03 - 4:05
    让我们开始尝试
    添加一定的边界。
  • 4:06 - 4:08
    很好,现在有更多的空间
    在这个TextView周围。
  • 4:09 - 4:11
    我会为其它两个TextViews
    做同样的事。
  • 4:12 - 4:17
    很有趣,所以这上面是16dips
    但这儿实际上是32dips,因为
  • 4:17 - 4:20
    它从第一TextView的底部得到8dips边界,
  • 4:20 - 4:23
    又从第二TextView的顶部获得8dips。
  • 4:23 - 4:25
    如果我们想的间距要一致,
    所以
    4:24.78
  • 4:25 - 4:30
    它总是16逢低在每个视图间
    那么我们要改变这里的余量。
    4:30.25
  • 4:30 - 4:33
    我可以打破它在给
    个人边距值。
    4:33.10
  • 4:33 - 4:38
    有了这个代码,我有一个左边距
    16个骤降和16个骤降上边距。
  • 4:38 - 4:41
  • 4:41 - 4:43
  • 4:43 - 4:47
  • 4:47 - 4:49
  • 4:50 - 4:53
  • 4:53 - 4:56
  • 4:56 - 4:59
  • 4:59 - 5:02
  • 5:02 - 5:05
  • 5:05 - 5:09
  • 5:10 - 5:12
  • 5:13 - 5:16
  • 5:16 - 5:20
  • 5:20 - 5:23
  • 5:23 - 5:27
  • 5:27 - 5:30
  • 5:31 - 5:33
  • 5:33 - 5:35
  • 5:35 - 5:38
  • 5:38 - 5:41
  • 5:42 - 5:45
  • 5:45 - 5:48
  • 5:48 - 5:51
  • 5:51 - 5:56
  • 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
  • 6:25 - 6:29
  • 6:29 - 6:33
  • 6:33 - 6:38
  • 6:38 - 6:41
  • 6:41 - 6:42
  • 6:42 - 6:44
  • 6:44 - 6:47
  • 6:47 - 6:54
  • 6:54 - 6:57
  • 6:57 - 6:59
  • 6:59 - 7:03
  • 7:03 - 7:05
  • 7:05 - 7:07
  • 7:07 - 7:11
  • 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
  • 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
  • 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
  • 8:46 - 8:49
  • 8:49 - 8:51
Title:
Padding vs. Margin
Description:

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

Chinese, Simplified subtitles

Revisions Compare revisions