Return to Video

13-02 Adding a CheckBox - Solution

  • 0:01 - 0:03
    Để làm layout này trước tiên
    nghĩ xem cần chế độ hiển thị nào.
  • 0:03 - 0:07
    Giả định là tất cả phần này
    đã được thiết lập rồi.
  • 0:07 - 0:11
    Chỉ cần nói về những điều mới mẻ
    cần đưa vào layout.
  • 0:11 - 0:15
    Có hai hiển thị mới cần chèn
    TextView Các loại nhân phủ
  • 0:15 - 0:18
    hiển thị ô đánh dấu
    cho tiêu đề Kem sữa béo.
  • 0:18 - 0:21
    Có thể bạn chưa biết
    hiển thị ô đánh dấu đã có trong Android
  • 0:21 - 0:24
    nhưng mong khi bạn tìm trên Google
    bạn sẽ tìm thấy câu trả lời.
  • 0:25 - 0:28
    Qua bước 2,
    cần định vị các hiển thị.
  • 0:28 - 0:31
    Giả sử các hiển thị
    đã định vị chính xác.
  • 0:31 - 0:35
    Chỉ cần Các loại nhân phủ và Kem sữa béo
    chạy theo trục dọc thẳng hàng.
  • 0:35 - 0:37
    Vì chế độ hiển thị gốc định vị theo
  • 0:37 - 0:40
    bài trí tuyến tính dọc,
    chỉ cần chèn hai hiển thị này trên nó.
  • 0:41 - 0:44
    Bước thứ 3,
    thiết lập kiểu cho chế độ hiển thị.
  • 0:44 - 0:46
    Các kiểu ở tiêu đề Các loại nhân phủ
    giống kiểu phần tiêu đề Số lượng
  • 0:46 - 0:49
    tiêu đề Nhật ký đặt hàng
    vì thế chỉ cần copy và dán
  • 0:49 - 0:51
    các tiêu đề hiện có.
  • 0:51 - 0:55
    Nhưng hiển thị ô đánh dấu là chế độ mới
    cho nên cần phải định kiểu cho nó.
  • 0:55 - 0:59
    Nên để 24dp khoảng trống
    ở giữa ô đánh dấu và văn bản
  • 0:59 - 1:04
    nên thay đổi kích cỡ phông chữ của
    chữ Kem sữa béo thành 16 sp. sp.
  • 1:04 - 1:06
    Thực thi các thay đổi này lên ứng dụng.
  • 1:07 - 1:11
    Chèn tiêu đề Các loại nhân phủ giống
    tiêu đề Số lượng
  • 1:11 - 1:13
    copy dán đoạn code này.
  • 1:13 - 1:17
    Tôi sao chép và chèn đoạn code ở trên
    của bài trí tuyến tính dọc.
  • 1:18 - 1:20
    Được rồi
    Ở đây hiển thị chữ Số lượng hai lần.
  • 1:20 - 1:23
    Tôi sẽ thay đổi nội dung
    để ghi Các loại nhân phủ.
  • 1:23 - 1:25
    Tôi cũng sao chép code lề dưới này qua
  • 1:25 - 1:29
    để tạo khoảng trống
    giữa tiêu đề này và nội dung dưới.
  • 1:30 - 1:33
    Chúng ta chưa chèn ô đánh dấu
    vào ứng dụng.
  • 1:33 - 1:34
    Tôi sẽ Google xem hướng dẫn.
  • 1:34 - 1:38
    Tôi sẽ tìm kiếm
    android. Checkbox.
  • 1:38 - 1:41
    Nhớ nhập thêm từ android
    vì Google có thể ra kết quả ô đánh dấu
  • 1:41 - 1:45
    cho nền tảng khác, ví dụ
    nền tảng web hoặc nền tảng di động,
  • 1:45 - 1:48
    làm thế này bạn sẽ tìm được ngay
    kết quả tìm kiếm cho nền tảng Android.
  • 1:48 - 1:50
    Thử đường dẫn đầu tiên.
  • 1:50 - 1:53
    Đây là sưu liệu tham khảo
    cho lớp ô đánh dầu.
  • 1:53 - 1:56
    Tôi kéo trang xuống dưới
    nhìn hiển thị code tổng quan lớp, khá tốt
  • 1:56 - 1:59
    nó trỏ thẳng đến
    các thuộc tính XML.
  • 1:59 - 2:03
    Điều tôi đang cần
    là một ví dụ XML cho ô đánh dấu.
  • 2:03 - 2:05
    Hãy quay trở lại kết quả tìm kiếm.
  • 2:05 - 2:07
    Click vào đường dẫn thứ 2.
  • 2:07 - 2:10
    Tuyệt vời, trang này hiển thị
    hình ảnh ô đánh dấu.
  • 2:10 - 2:12
    Đây là một số XML.
  • 2:12 - 2:13
    Trông được đây.
  • 2:13 - 2:16
    Nó có hai ô đánh dấu
    trong mục LinearLayout.
  • 2:16 - 2:19
    Tôi chỉ cần copy
    ô đánh dấu đầu tiên
  • 2:19 - 2:20
    sau đó dán vào ứng dụng.
  • 2:22 - 2:26
    Trở lại ứng dụng, tôi sẽ dán nó
    sau tiêu đề Các loại nhân phủ
  • 2:26 - 2:29
    nhưng trước tiêu đề Số lượng, ngay đây.
  • 2:29 - 2:33
    Tôi sẽ điều chỉnh XML
    vì nó không phù hợp với bài tập đang dùng.
  • 2:33 - 2:37
    Tôi sẽ bỏ mã ID
    và phần nội dung văn bản ở đây.
  • 2:37 - 2:40
    Thay vì ghi là thịt
    quán cafe không bán thịt.
  • 2:40 - 2:42
    Tôi sẽ nhập nội dung là Kem sữa béo.
  • 2:43 - 2:46
    Nhân tiện, những gì bạn thấy lúc nãy
    tức là cú pháp @string/meat,
  • 2:46 - 2:50
    có liên quan đến tài nguyên
    trong file string.xlm.
  • 2:50 - 2:53
    Chúng ta sẽ nói về nó, nhưng để sau
    còn bây giờ,
  • 2:53 - 2:56
    bạn chỉ cần nhập vào chuỗi này
    trực tiếp ở đây.
  • 2:56 - 2:59
    Xem kìa, bản xem trước cập nhật
    có một ô đánh dấu ghi là Kem sữa béo.
  • 2:59 - 3:03
    Chế độ hiển thị ô đánh dấu này hay ở chỗ
    nó cung cấp cho bạn một ô,
  • 3:03 - 3:08
    bên cạnh có luôn phần nội dung
    bạn khỏi chèn thêm hiển thị văn bản.
  • 3:08 - 3:11
    Không cần dòng này
    onClick. Here nói về onClick.
  • 3:12 - 3:16
    Cần quan tâm trong bài tập code này
    là làm sao ô đánh dấu xuất hiện.
  • 3:16 - 3:20
    Một cách khác để tìm ra XML này
  • 3:20 - 3:22
    là cheat sheet hiển thị Android phổ biến.
  • 3:23 - 3:25
    Cheat sheet này liệt kê một loạt
    hiển thị Android phổ biến
  • 3:25 - 3:27
    ngoài ra còn cho ví dụ XML nữa.
  • 3:28 - 3:33
    Đây là hiển thị ô đánh dấu
    ví dụ này để bạn hiểu nó sẽ ra sao
  • 3:33 - 3:34
    bên cạnh đây là các XML tương ứng.
  • 3:34 - 3:37
    Bạn có thể copy XML từ đây
    rồi dán nó vào ứng dụng.
  • 3:38 - 3:41
    Trở lại với Android Studio
    chạy ứng dụng xem nó trông ra sao.
  • 3:42 - 3:43
    Đây rồi.
  • 3:43 - 3:44
    Cũng được đó.
  • 3:44 - 3:47
    Có tiêu đề Các loại nhân phủ
    và ô đánh dấu Kem sữa béo.
  • 3:48 - 3:50
    Cũng có hiệu ứng động rất thú vị
    khi đánh dấu tích vào ô đánh dấu.
  • 3:51 - 3:55
    Vấn đề duy nhất mà tôi nhận ra
    là không thấy có khoảng trống.
  • 3:55 - 3:58
    Ví dụ, chỗ này quá chật chội
    giữa tiêu đề Số lượng
  • 3:58 - 4:01
    với ô đánh dấu Kem sữa béo
    Ở đây không đủ khoảng trống ở giữa.
  • 4:02 - 4:04
    Trở lại đường minh họa màu đỏ
    đã vẽ ở đầu bài.
  • 4:04 - 4:09
    Cần chèn 24 dp khoảng trống ở đây
    sau đó thay đổi cỡ chữ về mức 16sp.
  • 4:11 - 4:13
    Đầu tiên, thay đổi kích thước phông chữ.
  • 4:13 - 4:18
    Gõ Android: textSize [Kích thước chữ]
    sau đó cho kích thước 16sp.
  • 4:18 - 4:22
    Tôi sẽ mở chế độ xem trước ở đây
    kiểm tra xem kích thước đã tăng hay chưa.
  • 4:22 - 4:24
    Xong rồi.
  • 4:24 - 4:27
    Kiểm tra xem trang đã refresh[làm mới]
    bạn có thể sử dụng nút này.
  • 4:27 - 4:27
    Được rồi.
  • 4:27 - 4:30
    Để xử lý phần trống này
    tôi thực sự đã làm được
  • 4:30 - 4:32
    thông qua nhiều lần làm thử và mắc lỗi.
  • 4:32 - 4:34
    Tôi đã đặt giá trị canh lề
  • 4:34 - 4:38
    sau đó đặt giá trị khoảng đệm,
    tôi phát hiện có paddingLeft [đệm trái]
  • 4:38 - 4:43
    Sẽ điều chỉnh khoảng trắng
    giữa ô đánh dấu và nội dung ở đây.
  • 4:43 - 4:44
    Bây giờ chèn khoảng đệm.
  • 4:45 - 4:47
    Hay quá, văn bản đã dịch sang một bên.
  • 4:47 - 4:49
    Tôi vẫn thấy có một vấn đề.
  • 4:49 - 4:53
    Đã có đủ khoảng cách chiều dọc ở đây
    nhưng chỗ này không đủ chỗ chiều dọc.
  • 4:53 - 4:58
    Hoặc tôi sẽ chèn khoảng đệm dưới
    tức là lề dưới cho hiển thị ô đánh dấu
  • 4:58 - 5:02
    hoặc tôi sẽ chèn khoảng đệm trên
    tức là lề trên cho tiêu đề Số lượng.
  • 5:02 - 5:03
    Làm cách nào cũng được.
  • 5:03 - 5:07
    Tôi sẽ chèn lề trên
    cho tiêu đề Số lượng.
  • 5:07 - 5:09
    Đấy! Tốt rồi!
  • 5:09 - 5:11
    Bây giờ mọi thứ có vẻ khá đồng đều.
  • 5:11 - 5:13
    Chạy thử ứng dụng trên thiết bị của tôi.
  • 5:14 - 5:15
    Và đây là ứng dụng.
  • 5:15 - 5:16
    Trông được lắm.
  • 5:16 - 5:17
    Làm tốt rồi.
  • 5:17 - 5:21
    Khi bạn cần thay đổi giao diện người dùng
    trong ứng dụng, có thể làm theo kiểu này
  • 5:21 - 5:25
    hãy lên Google tìm kiếm thông tin
    sau đó đưa vào ứng dụng.
Title:
13-02 Adding a CheckBox - Solution
Description:

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

Vietnamese subtitles

Revisions