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
    我们会用到 padding(内边距)和 margin(外边距)的概念
  • 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
    我们以一个 Hello 的 TextView 开始
  • 0:59 - 1:02
    如果我们给视图的内边距增加 8dips
  • 1:02 - 1:05
    在每个方向上添加 8dips 会使它看起来更大
  • 1:05 - 1:08
    如果我们给 TextView 添加 8dips 的外边距
  • 1:08 - 1:11
    这就是它的样子
  • 1:11 - 1:13
    为了加入外边距 你需要把视图放到一个 ViewGroup 中
  • 1:13 - 1:16
    这就是我为什么把它放在这个 linearlayout 里
  • 1:16 - 1:19
    linearlayout 是一个需要原始 TextView 并
  • 1:19 - 1:21
    把它向内推 8dips
  • 1:21 - 1:23
    从左边还有上边
  • 1:23 - 1:26
    还有这些边
  • 1:26 - 1:28
    即使你在子视图中声明外边距或
  • 1:28 - 1:33
    内边距也得由 TextView 本身操作
  • 1:33 - 1:36
    然而内边距是由父 ViewGroup 操作
  • 1:36 - 1:40
    如果这两种都在真实设备上 你没有给 TextView 设置背景
  • 1:40 - 1:43
    严格地说 它们都是一样的
  • 1:43 - 1:46
    这个文本在距离设备左边 8dips 和
  • 1:46 - 1:48
    设备顶部 8dips 处开始
  • 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 = “8 dp”
  • 2:11 - 2:12
    你可以选择任何你想要的内边距的大小
  • 2:12 - 2:15
    只要它是 dip 值
  • 2:15 - 2:19
    当我们指定内边距为 8dips 时 它会在
  • 2:19 - 2:21
    TextView 的上 下 左 右 都添加 8dips
  • 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
    在四个方向上 你不用必须使用同一个padding值
  • 2:43 - 2:47
    padding的默认值为零 如果你设定左、右、上的内边距值
  • 2:47 - 2:52
    但是没有设置底部 那么底部的内边距值就是零
  • 2:52 - 2:56
    为了指定外边距 你需要在 TextView 中再添加一个属性
  • 2:56 - 3:00
    这个属性的名字是 android:layout_margin
  • 3:00 - 3:03
    我们给它设一个值 例如 8dips
  • 3:03 - 3:07
    子 TextView 远离父视图的所有边缘 8dips
  • 3:07 - 3:12
    如果在顶部有另一个子TextView 那么外边距
  • 3:12 - 3:15
    会使这个 TextView 在第一个 TextView 的下面8 dips 处
  • 3:16 - 3:19
    你可以认为有了外边距就像有了防护区域
  • 3:19 - 3:20
    在视图周围
  • 3:20 - 3:24
    没有其他的视图能进入它周围的8 dips 区域
  • 3:24 - 3:28
    或者你也可以将 Layout margin 在四个方向上分开写
  • 3:28 - 3:32
    分别是 layout_marginLeft layout_marginRight layout_marginTop layout_marginbottom
  • 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
    在 LinearLayout 中 我有3个 TextView
  • 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
    有趣 在这里是16 dips 但是实际上是32 dips
  • 4:17 - 4:20
    在第一个 TextView 的底部有8 dips 的外边距
  • 4:20 - 4:23
    在第二个 TextView 的上部有8 dips 的外边距
  • 4:23 - 4:25
    如果我们想要间距一致
  • 4:25 - 4:30
    视图之间总是16 dips 我们必须改变这里的外边距
  • 4:30 - 4:33
    我可以将它分成独立的外边距值
  • 4:33 - 4:38
    用代码 我有 16dips 的左侧外边距和 16dips 的顶部外边距
  • 4:38 - 4:41
    第一个 TextView 没有底部外边距
  • 4:41 - 4:43
    所以它们之间的空间正好是 16dips
  • 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 向右 向下推了 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
    如果我给 linearlayout 添加内边距值
  • 5:51 - 5:56
    你会看到它在所有方向上使这些视图都改变了 16dips
  • 5:56 - 5:59
    我提到过你可以设置任意的内边距和外边距
  • 5:59 - 6:01
    但是你怎样知道应该使用哪个值呢?
  • 6:01 - 6:05
    Material Design 指南中建议你可以使用
  • 6:05 - 6:06
    8dips 的增量
  • 6:06 - 6:09
    这些知识有些超前 但是本质上我们想让我们的组件
  • 6:09 - 6:13
    在屏幕上沿着 8dip 方格线网络排列
  • 6:13 - 6:16
    这个方格并不会显示在屏幕上
  • 6:16 - 6:18
    但是如果你想在这写文本的话
  • 6:18 - 6:21
    你也许会想要向左移动2个小方格
  • 6:21 - 6:25
    网格上的2个小方格就是 16dips
  • 6:25 - 6:29
    在邮件界面中 所有的图标是沿着这条线排列的
  • 6:29 - 6:33
    它们的位置距离屏幕的左边缘是16 dips
  • 6:33 - 6:38
    并且所有的文本距离屏幕的左边缘是72 dips
  • 6:38 - 6:41
    所以你可以想象这些内容是跟随
  • 6:41 - 6:42
    某条线开始的
  • 6:42 - 6:44
    有另一种方法将它可视化
  • 6:44 - 6:47
    在Google I/O应用的截图中
  • 6:47 - 6:54
    我们能看到内容是沿着16 dips 和72 dips 这两条线排列的
  • 6:54 - 6:57
    实质上 它是距离屏幕的左边缘72 dips
  • 6:57 - 6:59
    在这边
  • 6:59 - 7:03
    内容在距离屏幕右边缘16 dips 处停止
  • 7:03 - 7:05
    在平板上 屏幕更大 所以
  • 7:05 - 7:07
    你会看到更多内边距
  • 7:07 - 7:11
    它距离屏幕左边缘会变为24 dips
  • 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 Calendar 应用截图中
  • 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
    给这个 TextView 增加顶部padding
  • 8:16 - 8:18
    或者两个都做
  • 8:18 - 8:21
    或者你使用 layout_margin 来实现
  • 8:21 - 8:24
    在这个例子中 你并不能区分布 layout_margin 和内边距之间的区别
  • 8:24 - 8:28
    因为 TextView 的背景是透明的
  • 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 dips
  • 8:46 - 8:49
    但是在两个 TextViews 之间只有8 dips
  • 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