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:25 - 4:30
    在每个视图间总是16dips,
    那么我们要改变这里的边距。
  • 4:30 - 4:33
    我可以打破它,给
    每个边距不同的值。
  • 4:33 - 4:38
    有了这个代码,我把左边距
    定为16个dips和上边距定为16dips。
  • 4:38 - 4:41
    这个TextView没有底部的边距,所以
  • 4:41 - 4:43
    这个其中的空间更正为16dips。
  • 4:43 - 4:47
    最后一个TexView也是一样。
  • 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
    因为在这个例子里, TexView
    没有背景颜色。
  • 5:10 - 5:12
    让我加点颜色看看每个视图的
    边界在哪儿。
  • 5:13 - 5:16
    好的,现在第一个TextView有了背景颜色。
  • 5:16 - 5:20
    当我们增加了左边和顶部的边距,
    我们就看到ViewGroup迫使
  • 5:20 - 5:23
    TextView 8个dips上面和下边。
  • 5:23 - 5:27
    我们能改变这个填充,现在我们看到
    这个TextView更大了,并且
  • 5:27 - 5:30
    在左边和顶部都占据了8个dips的空间。
  • 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
    那么你就能看见它在所有的方向都扩展16dips。
  • 5:56 - 5:59
    我提到,你可以设置任何
    值填充或保证金。
    5:59.39
  • 5:59 - 6:01
    但你怎么知道挑哪个值?
    6:01.38

  • 6:01 - 6:05
    好了,材料设计指南
    建议您使用增量
  • 6:05 - 6:06
    8dips。
  • 6:06 - 6:09
    这是更高级一些的知识,但基本上我们希望
  • 6:09 - 6:13
    组件在屏幕上
    沿着这8dips的方形网格排队。
  • 6:13 - 6:16
    现在,方形网格实际在屏幕上并不
    显示,但
  • 6:16 - 6:18
    如果你想在这里放置文本,
  • 6:18 - 6:21
    你可能想将其移动到
    左侧像两个正方形的距离。
  • 6:21 - 6:25
    两个方形在这个网格
    将等于16dips。
  • 6:25 - 6:29
    在这封电子邮件屏幕,
    所有的图标沿着这条线一字排开。
  • 6:29 - 6:33
    他们从位于16骤降超过
    该屏幕的左边缘,并
    6:33.12
  • 6:33 - 6:38
    这里所有的这段文字定位72骤降
    在从该屏幕的左边缘。
    6:38.02
  • 6:38 - 6:41
    所以,你可以种想象
    内容开始遵循一定的
    6:41.28
  • 6:41 - 6:42
    线在这里。
    6:42.25
  • 6:42 - 6:44
    这里是另一种方式来进行可视化。
    6:44.44
  • 6:44 - 6:47
    在这张截图来自
    在谷歌I / O的应用程序,
    6:47.16
  • 6:47 - 6:54
    我们列队这16内容
    浸线,以及这72 DIP直插。
    6:53.92
  • 6:54 - 6:57
    它本质上是72比骤降
    从屏幕的左边缘。
    6:57.40
  • 6:57 - 6:59
    并在此优势,
    6:58.86
  • 6:59 - 7:03
    内容停止16骤降之前
    在屏幕的右边缘。
    7:03.30
  • 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