Showing Revision 3 created 10/10/2015 by Retired user.

1. Title:
2. Description:

3. 180 0:00 - 0:05
   Để xây dựng layout này,
   Tôi mở file activity_main.xml.
4. 4710 0:05 - 0:08
   Tôi biết là cần một layout tuyến tính dọc
   để đưa các view này
5. 7670 0:08 - 0:09
   thành một cột dọc.
6. 9340 0:09 - 0:13
   Vì vậy, đầu tiên tôi sẽ thay đổi
   layout tương đối thành layout tuyến tính.
7. 12870 0:13 - 0:17
   Ngay lập tức, nó xuất hiện một lỗi
   thông báo các thẻ mở không phù hợp
8. 17110 0:17 - 0:21
   với thẻ đóng, nên tôi chỉ có thể sao chép
   sau đó dán nó xuống ở đây.
9. 20740 0:21 - 0:22
   Bây giờ các thẻ đã phù hợp.
10. 22100 0:22 - 0:24
    Tiếp theo, có thể thêm vào các view.
11. 23930 0:24 - 0:26
    Đầu tiên, tôi có text view quantity.
12. 25720 0:26 - 0:30
    Vậy tôi sẽ đi lấy text view này, sau đó
    thay đổi text bên trong nó thành quantity.
13. 29880 0:30 - 0:32
    Tiếp theo, tôi có một text view ghi zero.
14. 31960 0:32 - 0:35
    Vậy tôi có thể sao chép chữ zero
    và dán ngay bên dưới.
15. 34590 0:35 - 0:38
    Tôi sẽ thay đổi nó để chữ zero
    phù hợp với ảnh chụp màn hình ở đây.
16. 38430 0:38 - 0:42
    View con cuối cùng trong layout
    tuyến tính này là một nút.
17. 41500 0:42 - 0:45
    Ta đã không thêm nút vào layout trước đó,
    vì vậy hãy Google Search nó.
18. 45020 0:45 - 0:48
    Nếu bạn mở một trình duyệt
    bạn có thể tìm kiếm nút android.
19. 48160 0:48 - 0:52
    Liên kết đầu tiên này có vẻ tốt,
    đó là trang developer.android.com.
20. 52570 0:53 - 0:57
    Và đây là tài liệu về nút android,
    ta có thể bỏ qua hầu hết văn bản ở đây.
21. 56700 0:57 - 0:59
    Chúng ta kéo xuống để đọc
    tổng quan về lớp.
22. 59250 0:59 - 1:03
    Nó nói một chút về một số code Java,
    mà chúng ta chưa được học,
23. 63000 1:03 - 1:06
    nhưng dưới này
    ta có một số mã xml cho nút.
24. 66130 1:06 - 1:09
    Ta có thể sao chép mã này
    xem chúng sẽ làm gì trong code của ta.
25. 69280 1:09 - 1:12
    Trong layout của chúng ta, thêm
    một nút bên dưới hai text view này.
26. 72420 1:12 - 1:16
    Tôi sẽ dán code
    từ tài liệu ở đây.
27. 76030 1:16 - 1:19
    Bây giờ thay vì chuỗi tự hủy,
    tôi sẽ đi chọn một chút gì đó
28. 78900 1:19 - 1:21
    thân thiện như order.
29. 81120 1:21 - 1:25
    Dòng cuối cùng này cũng có thể
    xóa đi bởi vì chúng ta không cần đến nó.
30. 84900 1:25 - 1:29
    Tuyệt, vậy bây giờ bạn có
    text view quantity, text view zero,
31. 88580 1:29 - 1:29
    và một nút lệnh.
32. 89910 1:30 - 1:32
    Hãy chạy nó trong ứng dụng,
    để xem sẽ thế nào,
33. 92220 1:32 - 1:34
    bằng cách nhấn vào
    nút play màu xanh lá cây.
34. 94320 1:34 - 1:37
    Chúng ta có thể thấy ở dưới này
    nó vẫn đang xây dựng.
35. 96950 1:37 - 1:39
    Ồ, không phải là cái chúng ta muốn.
36. 98660 1:39 - 1:43
    Có vẻ như layout tuyến tính của chúng ta
    thực sự nằm ngang thay vì nằm dọc.
37. 103470 1:43 - 1:48
    Vì vậy, hãy chắc chắn rằng ta đã thêm
    thuộc tính định hướng.
38. 107586 1:48 - 1:52
    Chúng ta sẽ thay đổi nó thành
    android:orientation= "vertical".
39. 112020 1:52 - 1:54
    Điều đó sẽ khắc phục vấn đề.
40. 113570 1:54 - 1:55
    Vậy hãy nhấn run một lần nữa.
41. 115520 1:56 - 1:57
    Được rồi, tốt hơn rồi đấy.
42. 117010 1:57 - 2:00
    Ba view con xuất hiện
    trong một cột dọc.
43. 120270 2:00 - 2:02
    Giờ chỉ cần định dạng các trường
44. 121810 2:02 - 2:04
    để giống với các màn hình,
    mà ta được cho trước.
45. 125280 2:05 - 2:08
    Từ màn hình này ta thấy
    text view quantity được viết hoa tất cả.
46. 129600 2:10 - 2:14
    Trong bài một chúng ta đã học về
    thuộc tính tên là android: textAllCaps,
47. 133950 2:14 - 2:16
    và nó hiển thị ở đây
    sau khi tự động hoàn tất.
48. 136230 2:16 - 2:19
    Nếu nó hiển thị như thế này,
    bạn chỉ cần nhấn Enter
49. 138630 2:19 - 2:21
    và nó sẽ tự động thêm vào
    trong code ở đây.
50. 141400 2:21 - 2:25
    Chúng ta thiết lập giá trị đó là đúng
    vì ta muốn nó được viết hoa tất cả.
51. 144970 2:25 - 2:29
    Lý do tại sao nên sử dụng thuộc tính này
    để viết hoa toàn văn bản
52. 148580 2:29 - 2:32
    là bởi nếu chúng ta muốn thay đổi
    giao diện người dùng
53. 152380 2:32 - 2:36
    cho quantity viết chữ thường như thế này,
    tất cả những gì ta cần làm
54. 155650 2:36 - 2:38
    chỉ là loại bỏ thuộc tính này
    thay vì thay đổi dòng chữ đó.
55. 158410 2:38 - 2:42
    Tiếp theo, với dòng zero này,
    chúng ta nên sử dụng cỡ chữ 16sp.
56. 161840 2:42 - 2:46
    Tôi sẽ dùng cỡ đó và nó hiển thị
    trong các đề xuất tự động hoàn tất
57. 165970 2:46 - 2:50
    nên tôi chỉ cần nhấn Enter
    và sau đó chọn 16sp cho giá trị.
58. 170000 2:50 - 2:52
    Chúng tôi cũng muốn font chữ màu đen.
59. 172450 2:52 - 2:55
    Tôi sẽ sử dụng màu đen
    trong bảng màu Android,
60. 174700 2:55 - 2:57
    được gọi như thế này.
61. 177380 2:57 - 3:01
    Tuyệt vời, màu này sẽ là của
    cả hai text view quantity và zero.
62. 180558 3:01 - 3:05
    Nút order được rồi, nó tự động viết hoa
    cho bạn trong một nút với
63. 185011 3:05 - 3:09
    chiều cao và chiều rộng
    nằm trong phần nội dung.
64. 188820 3:09 - 3:12
    Chúng ta cần phải giải quyết
    không gian dọc này ở đây.
65. 191898 3:12 - 3:15
    Ta muốn cỡ 16dp lót hoặc lề
    ở giữa text view quantity và zero.
66. 194880 3:15 - 3:18
    Ta cũng muốn cũng muốn cỡ 16dp lót hoăc lề
    ở giữa zero và nút order.
67. 198090 3:18 - 3:20
    Ta cũng muốn cũng muốn cỡ 16dp lót hoăc lề
68. 200187 3:20 - 3:21
    ở giữa zero và nút order.
69. 201430 3:21 - 3:24
    Bạn có thể thực hiện
    bằng nhiều cách khác nhau,
70. 203960 3:24 - 3:28
    Tôi sẽ thêm nó
    như là lề trên của layout cho nút này.
71. 211410 3:31 - 3:35
    Tôi sẽ thêm nó như là lề dưới của layout
    cho text view quantity này.
72. 217810 3:38 - 3:41
    Hãy thoải mái thử những cách khác
    miễn là nó trông giống nhau.
73. 220810 3:41 - 3:44
    Lý do tại sao tôi đã chọn
    để lề dưới và lề trên
74. 224000 3:44 - 3:47
    là vì biết khu vực ở giữa này
    sau đó sẽ thay đổi.
75. 227040 3:47 - 3:50
    Chúng tôi sẽ thay đổi nó thành
    một bảng chọn số lượng
76. 229670 3:50 - 3:55
    với nút + và nút -,
    và tôi vẫn muốn có 16dp không gian
77. 234620 3:55 - 3:57
    giữa dòng quantity và bảng chọn.
78. 236830 3:57 - 3:58
    Tương tự với nút cũng vậy.
79. 238610 3:59 - 4:01
    Được rồi, ta hãy chạy lại một lần nữa
    trên thiết bị.
80. 241280 4:01 - 4:04
    Tuyệt, và nó đã
    giống như ý muốn của chúng ta.
81. 243580 4:04 - 4:07
    Text view quantity đã được viết hoa,
82. 247150 4:07 - 4:12
    text view zero đã có font chữ màu đen,
    kích thước 16sp, và ta có nút order ở đây.
83. 251710 4:12 - 4:15
    Ta cũng có 16dp không gian
    giữa các dòng.
84. 255760 4:16 - 4:18
    Làm tốt lắm.
    Ồ, suýt thì tôi quên mất.
85. 258240 4:18 - 4:22
    Bài kiểm tra cũng sẽ hỏi đến
    chuyện gì sẽ xảy ra khi bạn bấm nút này.
86. 261560 4:22 - 4:26
    À, thực sự thì chẳng có gì cả,
    ít nhất là lúc này.
87. 265950 4:26 - 4:29
    Hãy tiếp tục quan sát
    xem chuyện gì xảy ra tiếp theo.