Return to Video

02-20 Padding vs. Margin

  • 0:00 - 0:02
    Nãy giờ chúng ta làm tốt.
  • 0:02 - 0:05
    Bạn đang làm đúng thao tác
    thiết lập các layout hiệu quả.
  • 0:05 - 0:09
    Nhưng tôi thấy có vấn đề vướng mắc
    trong các layout chúng ta đã làm.
  • 0:09 - 0:13
    Các hiển thị nằm quá sát với
    rìa ViewGroup [Nhóm hiển thị]
  • 0:13 - 0:14
    Hoặc quá sát rìa thiết bị.
  • 0:14 - 0:16
    Với tất cả các layout
    chúng ta đã làm trong bài
  • 0:16 - 0:20
    chúng ta có thể
    chăm chút yếu tố thẩm mỹ một tí
  • 0:20 - 0:24
    để chúng đẹp hơn bằng cách
    thêm một chút khoảng trắng.
  • 0:24 - 0:26
    Chúng ta sẽ làm điều này
    bằng các khái niệm khoảng đệm và lề
  • 0:26 - 0:29
    sẽ giới thiệu trong video
  • 0:29 - 0:31
    chúng ta có thể thêm một chút
    khoảng trắng ở đây, ở đây
  • 0:31 - 0:34
    hoặc thậm chí phía trên
    để các hiển thị không chen khít
  • 0:34 - 0:38
    lấn lên rìa của layout mẹ
    hoặc lấn lên rìa thiết bị.
  • 0:38 - 0:39
    Đây là một quyết định thiết kế,
  • 0:39 - 0:42
    bởi vì đôi khi bạn cũng muốn
    nó tiếp giáp rìa, giống như
  • 0:42 - 0:45
    trong hiệu ứng hình ảnh in tràn mép giấy
    tôi có nói qua lúc trước.
  • 0:45 - 0:49
    Ở đây bạn có thể sử dụng khoảng trắng
    để tạo không gian thoáng đạt, dễ "thở",
  • 0:49 - 0:53
    làm sao cho nội dung
    dễ đọc và dễ quét hơn.
  • 0:53 - 0:57
    Tôi sẽ cho bạn thấy hiệu quả
    khi chèn khoảng đệm hoặc lề cho hiển thị.
  • 0:57 - 0:59
    Bắt đầu với TextView[hiển thị văn bản]
    ghi chữ “Xin chào”.
  • 0:59 - 1:02
    Nếu chúng ta chèn 8 dp
    khoảng đệm vào hiển thị
  • 1:02 - 1:05
    chữ "xin chào" sẽ trông lớn hơn 8 dp
    từ tất cả các hướng.
  • 1:05 - 1:08
    Nếu chèn thêm cho lề layout
    8 dp trong TextView,
  • 1:08 - 1:11
    thì nó sẽ như thế này.
  • 1:11 - 1:13
    Để chèn lề, bạn cần
    bỏ nó vào trong ViewGroup
  • 1:13 - 1:16
    Đó là lý do tôi đưa nó vào
    bài trí tuyến tính này.
  • 1:16 - 1:19
    Bài trí tuyến tính là yếu tố
    chứa TextView gốc
  • 1:19 - 1:21
    nó kéo giãn TextView ra 8 dp.
  • 1:21 - 1:23
    Từ bên trái và từ trên.
  • 1:23 - 1:26
    Và từ cả hai cạnh bên nữa.
  • 1:26 - 1:28
    Ngay khi bạn trình báo giá trị khoảng đệm
  • 1:28 - 1:33
    hay giá trị lề cho TextView con,
    khoảng đệm vẫn được xử lý bởi Textview.
  • 1:33 - 1:36
    Trong khi đó các lề được xử lý
    bởi ViewGroup mẹ.
  • 1:36 - 1:40
    Nếu cả hai cái này nằm trên thiết bị,
    và bạn không có nền
  • 1:40 - 1:43
    cho TextView, thì về mặt kỹ thuật
    cả hai vẫn sẽ giống nhau.
  • 1:43 - 1:46
    Văn bản sẽ định vị cách lề trái
    tám dp, ở dưới rìa trên thiết bị
  • 1:46 - 1:48
    cũng 8 dp.
  • 1:48 - 1:52
    Tuy nhiên, nếu bạn có màu nền
    cho TextView
  • 1:52 - 1:55
    người dùng có thể thấy
    TextView sẽ lớn cỡ này.
  • 1:55 - 1:59
    Nhưng nếu chuyển qua thiết bị khác,
    TextView sẽ chỉ lớn cỡ này thôi.
  • 1:59 - 2:01
    Đây là code
    hiển thị khoảng đệm trên hiển thị.
  • 2:02 - 2:07
    Trên TextView XML Element
    bạn sẽ phải trình báo một thuộc tính,
  • 2:07 - 2:11
    cú pháp android: padding=8 dp
    để trong ngoặc kép.
  • 2:11 - 2:12
    Bạn có thể chọn
    bất kỳ kích thước nào muốn
  • 2:12 - 2:15
    thiết lập cho khoảng đệm
    miễn sao đó là giá trị dp.
  • 2:15 - 2:19
    Khi đặt giá trị 8 dp khoảng đệm,
    nó sẽ chèn 8 dp vào bên trái,
  • 2:19 - 2:21
    trên, dưới
    và rìa phải của TextView.
  • 2:22 - 2:25
    Thay vì sử dụng thuộc tính
    android padding một cách đồng nhất,
  • 2:25 - 2:29
    bạn có thể chia ra cho từng hướng
    trái, phải, trên và dưới
  • 2:29 - 2:33
    quan trọng là bốn dòng code này
    có chức năng giống như dòng code mẹ này.
  • 2:33 - 2:36
    Các dòng code điều khiển đơn lẻ này
    giúp bạn lập nhiều giá trị khoảng đệm
  • 2:36 - 2:39
    cho phần bên trái
    bên phải, bên trên, bên dưới.
  • 2:39 - 2:43
    Bạn không cần thiết lập
    khoảng đệm bằng nhau cho bốn hướng.
  • 2:43 - 2:47
    Giá trị mặc định cho nó là zero,
    nên nếu bạn cấu hình đệm trái, phải, trên
  • 2:47 - 2:52
    nhưng không xác định có đệm dưới
    thì chỉ số đệm dưới sẽ là sẽ là 0 dp.
  • 2:52 - 2:56
    Để lập giá trị lề, chèn thêm
    thuộc tính này một lần nữa cho TextView.
  • 2:56 - 3:00
    Cú pháp thuộc tính android: layout_margin
    chúng ta có thể
  • 3:00 - 3:03
    đặt giá trị thuộc tính bằng 8 dp
    chẳng hạn như vậy.
  • 3:03 - 3:07
    Hệ thống sẽ dịch chuyển TextView con
    cách mọi rìa TextView mẹ 8 dp đồng đều.
  • 3:07 - 3:12
    Nếu có TextView con khác ở rìa trên này
    và bạn đặt lề hoặc đặt khoảng đệm cho nó
  • 3:12 - 3:15
    thì TextView mới này sẽ bị đẩy
    xuống dưới 8 dp so với TextView đầu tiên.
  • 3:16 - 3:19
    Bạn có thể hình dung việc đặt lề
    giống đặt một từ trường đẩy xung quanh
  • 3:19 - 3:20
    chế độ hiển thị.
  • 3:20 - 3:24
    Không hiển thị nào có thể xâm nhập
    vào khu vực 8 dp quanh nó.
  • 3:24 - 3:28
    Hoặc cũng có thể chia nhỏ lề layout
    thành bốn hướng,
  • 3:28 - 3:32
    layout marginLeft [lề layout trái],
    layout marginRight, top và bottom.
  • 3:32 - 3:36
    Nếu bạn không thiết lập bất kỳ
    giá trị nào, giá trị mặc định sẽ là 0.
  • 3:36 - 3:39
    Hãy nhớ rằng ViewGroup
    là yếu tố định vị
  • 3:39 - 3:42
    các TextView con theo lề,
    bạn có thể nhìn vào thuộc tính.
  • 3:42 - 3:45
    Tất cả đều bắt đầu bằng cú pháp
    layout_margin.
  • 3:45 - 3:48
    Nhìn đây có thể hiểu ViewGroup
    là yếu tố xử lý định vị.
  • 3:48 - 3:49
    Cho các hiển thị.
  • 3:50 - 3:53
    Yếu tố khoảng đệm
    và lề áp dụng cho mọi hiển thị.
  • 3:53 - 3:56
    Hãy tập ứng dụng các thuộc tính
    vừa học vào thực tế nhé
  • 3:56 - 3:58
    Ở đây tôi có ba TextView
    trong một bài trí tuyến tính.
  • 3:58 - 4:01
    Tất cả đều bị dồn ép
    sát rìa trái màn hình
  • 4:01 - 4:02
    tôi cần chèn khoảng trắng
  • 4:03 - 4:05
    bắt đầu bằng việc thêm lề.
  • 4:06 - 4:08
    Tốt, bây giờ cần thêm
    khoảng trắng quanh TextView.
  • 4:09 - 4:11
    Tôi sẽ thao tác tương tự
    cho hai TextView khác.
  • 4:12 - 4:17
    Hay quá, khoảng cách trên là 16 dp,
    nhưng thực sự ở chỗ này lại là 32 dp
  • 4:17 - 4:20
    vì nó nhận 8 dp lề dưới
    của TextView đầu tiên
  • 4:20 - 4:23
    cộng 8 dp của lề trên
    TextView thứ hai.
  • 4:23 - 4:25
    Muốn khoảng trắng đều, sao cho
  • 4:25 - 4:30
    luôn có 16 dp giữa các hiển thị,
    phải canh lại lề ở đây.
  • 4:30 - 4:33
    Tôi có thể tách nó ra
    thành nhiều giá trị lề riêng.
  • 4:33 - 4:38
    Với đoạn code này, tôi có lề trái
    16 dp còn lề trên cũng 16 dp.
  • 4:38 - 4:41
    Không có lề dưới
    của TextView đầu tiên
  • 4:41 - 4:43
    nên khoảng trắng giữa hai chữ
    bây giờ chính xác là 16 dp.
  • 4:43 - 4:47
    TextView cuối sẽ thao tác giống vậy.
  • 4:47 - 4:49
    Tốt, mọi khoảng trắng đứng
    đã bằng nhau.
  • 4:50 - 4:53
    Lúc nãy tôi có nói chèn khoảng trắng
    cho rìa của các hiển thị,
  • 4:53 - 4:56
    khoảng trắng này có tính xuyên thấu.
  • 4:56 - 4:59
    Nên nhìn xuyên qua được,
    thấy ở phía sau.
  • 4:59 - 5:02
    Trong trường hợp này chúng ta
    đặt nền màu xám cho ViewGroup.
  • 5:02 - 5:05
    Nên layout sẽ giống nhau
    trên thiết bị dù sử dụng
  • 5:05 - 5:09
    canh lề hay khoảng đệm, vì lúc này
    không có màu nền trên TextView.
  • 5:10 - 5:12
    Hãy chèn nó vào
    rồi xem ranh giới từng hiển thị ở đâu.
  • 5:13 - 5:16
    Được rồi, bây giờ có màu nền
    trên TextView đầu tiên này.
  • 5:16 - 5:20
    Khi chèn lề trái và lề trên,
    chúng ta thấy rằng nó sẽ đẩy.
  • 5:20 - 5:23
    TextView lên ở đây 8 dp
    và đẩy nó xuống ở đây 8 dp.
  • 5:23 - 5:27
    Có thể thay đổi cái này thành khoảng đệm
    chúng ta thấy textview lớn hơn
  • 5:27 - 5:30
    chiếm 8 dp khoảng trắng
    lề trái và phải.
  • 5:31 - 5:33
    Những gì mắt thấy được
    không có gì khác trên thiết bị,
  • 5:33 - 5:35
    Dù bạn dùng khoảng đệm hoặc lề.
  • 5:35 - 5:38
    Nếu có một màu nền
    trên TextView này.
  • 5:38 - 5:41
    Có thể thao tác tương tự
    với hiển thị khác sẽ thấy hiệu quả.
  • 5:42 - 5:45
    Chèn giá trị khoảng đệm và lề
    không giới hạn chỉ trong hiển thị con,
  • 5:45 - 5:48
    Có thể chèn giá trị này cho ViewGroup.
  • 5:48 - 5:51
    Nếu tôi thêm giá trị khoảng đệm
    cho bài trí tuyến tính.
  • 5:51 - 5:56
    Bạn sẽ thấy nó dịch chuyển
    chế độ hiển thị vào 16 dp mọi hướng.
  • 5:56 - 5:59
    Tôi có nói bạn có thể đặt
    mọi giá trị cho khoảng đệm hoặc lề.
  • 5:59 - 6:01
    Nhưng biết chọn giá trị nào bây giờ?
  • 6:01 - 6:05
    Vâng, tài liệu này có bộ hướng dẫn
    đề xuất bạn nên sử dụng bội số
  • 6:05 - 6:06
    của 8 dp.
  • 6:06 - 6:09
    Kiến thức này hơi nâng cao
    nhưng về cơ bản chúng tôi muốn
  • 6:09 - 6:13
    các phần hiển thị ngăn nắp trên màn hình
    dọc theo đường lưới vuông 8 dp này.
  • 6:13 - 6:16
    Bây giờ các đường lưới vuông
    chưa hiện trên màn hình,
  • 6:16 - 6:18
    Nếu bạn muốn định vị văn bản ở đây,
  • 6:18 - 6:21
    bạn sẽ di chuyển nó
    qua trái chừng hai ô vuông.
  • 6:21 - 6:25
    Hai ô vuông trên lưới
    sẽ tương đương 16 dp.
  • 6:25 - 6:29
    Trên màn hình email này
    mọi biểu tượng xếp dọc theo đường lưới.
  • 6:29 - 6:33
    Chúng được định vị cách 16 dp
    so với rìa trái màn hình.
  • 6:33 - 6:38
    Văn bản ở đây được định vị cách 72 dp
    so với rìa trái của màn hình.
  • 6:38 - 6:41
    Bạn có thể hình dung
    là nội dung sẽ được định vị trong
  • 6:41 - 6:42
    giới hạn các đường kẻ.
  • 6:42 - 6:44
    Một cách khác dễ hình dung.
  • 6:44 - 6:47
    Trong ảnh chụp màn hình này
    từ ứng dụng Google I/O,
  • 6:47 - 6:54
    nội dung xếp thẳng theo đường 16 dp này
    ngoài ra còn có đường 72 dp này.
  • 6:54 - 6:57
    Tức là cách 72 dp
    so với rìa trái của màn hình.
  • 6:57 - 6:59
    Và rìa phải này,
  • 6:59 - 7:03
    nội dung dừng ở đường lưới cách 16 dp
    phía trước rìa phải của màn hình.
  • 7:03 - 7:05
    Trên máy tính bảng,
    diện tích màn hình thoáng hơn
  • 7:05 - 7:07
    nên bạn có thể có tăng khoảng đệm.
  • 7:07 - 7:11
    Có thể cho nó cách 24 dp
    rìa trái màn hình và cứ thiết lập như vậy
  • 7:11 - 7:12
    cho các giá trị khác.
  • 7:12 - 7:17
    Chúng tôi đề xuất các giá trị này
    vì như thế nội dung sẽ dễ đọc.
  • 7:17 - 7:20
    Ví dụ, nếu hàng tiêu đề lớn này
    dịch chuyển qua trái vài pixel,
  • 7:20 - 7:24
    Nội dung tiêu đề con này dịch chuyển
    qua bên phải vài pixel,
  • 7:24 - 7:26
    sẽ có hiệu ứng lởm chởm xuất hiện ở đây.
  • 7:26 - 7:30
    Nó khiến người dùng mất tập trung
    và không đọc nội dung thực của bạn.
  • 7:30 - 7:35
    Cho nên khi chúng ta sắp xếp ngăn nắp
    ứng dụng của bạn sẽ dễ đọc và dễ sử dụng.
  • 7:35 - 7:38
    Dưới đây là một vài ví dụ thực tế
    về sử dụng khoảng đệm trong lề.
  • 7:38 - 7:40
    Ảnh màn hình Google Calendar[Google Lịch]
  • 7:40 - 7:44
    Chúng ta thấy văn bản
    đã được dịch chuyển vào một khoảng ở đây.
  • 7:44 - 7:47
    Có chút kẽ hở
    giữa các sự kiện lịch.
  • 7:47 - 7:48
    Nếu chúng ta xử lý nó bằng khoảng đệm,
  • 7:48 - 7:52
    thì hình nền này
    kéo giãn và tràn ra kẽ màu trắng này
  • 7:52 - 7:56
    ngược lại, nếu chúng ta sử dụng lề,
    sẽ có vùng đệm nhỏ quanh chế độ hiển thị,
  • 7:56 - 7:58
    có thể ở đây sử dụng canh lề.
  • 7:58 - 8:02
    Đây là ảnh chụp màn hình
    trang lịch chi tiết cho sự kiện.
  • 8:02 - 8:06
    Có rất nhiều nội dung khắp trang này
    khoảng cách các phần phân bố không đều.
  • 8:06 - 8:09
    Có thể tạo khoảng trắng lớn hơn
    bằng cách thêm khoảng đệm.
  • 8:09 - 8:13
    Để chèn thêm khoảng trắng ở đây, có thể
    chèn khoảng đệm dưới cho TextView này,
  • 8:13 - 8:15
    hoặc có thể chèn đệm trên cho TextView.
  • 8:16 - 8:18
    Cách nào cũng được.
  • 8:18 - 8:21
    Bạn cũng có thể xử lý
    bằng canh lề layout.
  • 8:21 - 8:24
    Thực sự không thể nhìn ra khác biệt
    giữa sử dụng lề layout với khoảng đệm
  • 8:24 - 8:28
    vì trong trường hợp này, nền văn bản
    ở dạng xuyên thấu.
  • 8:28 - 8:31
    Tới lượt bạn thực hành
    thiết lập các giá trị
  • 8:31 - 8:32
    khoảng đệm và giá trị lề khác nhau.
  • 8:32 - 8:35
    Chúng tôi đã cho bạn code đầu bài
    hãy bắt đầu bằng liên kết bên dưới.
  • 8:35 - 8:39
    Khi đã thành thạo canh chỉnh
    vùng đệm và lề, hãy tiếp tục
  • 8:39 - 8:40
    thử thiết lập layout này.
  • 8:41 - 8:46
    Hình này, văn bản được định vị
    cách các rìa 16 dp.
  • 8:46 - 8:49
    Nhưng thực sự chỉ có 8 dp
    giữa hai TextView này mà thôi.
  • 8:49 - 8:51
    Làm xong bài tập, đánh dấu vào ô này.
Title:
02-20 Padding vs. Margin
Description:

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

Vietnamese subtitles

Revisions