Showing Revision 2 created 11/11/2015 by Fran Ontanaya.

1. Title:
2. Description:

3. 450 0:00 - 0:04
   Trước khi bắt đầu viết mã,
   Tôi sẽ trả lời câu hỏi này.
4. 3650 0:04 - 0:07
   Tôi vẫn biết chỉ có hai
   nhóm dạng xem, và LinearLayout và
5. 7460 0:07 - 0:09
   RelativeLayout.
6. 8626 0:09 - 0:14
   Bây giờ mấu chốt ở đây là hai
   nhóm này phải có khoảng cách bằng nhau.
7. 13710 0:14 - 0:16
   Sử dụng độ dày bố trí là
   cách dễ dàng để thực hiện điều này.
8. 17480 0:17 - 0:20
   Hãy tiếp tục và xem đoạn mã.
9. 20070 0:20 - 0:23
   Được rồi, tôi không còn làm trong Java
   nữa, vì vậy tôi sẽ đi tiếp và
10. 22880 0:23 - 0:25
    lướt qua activity_main.xml.
11. 25830 0:26 - 0:27
    Và đây là tập tin XML của tôi.
12. 28270 0:28 - 0:34
    Tôi sẽ bắt đầu bằng cách đưa tất cả
    đoạn mã sang một LinearLayout khác.
13. 33875 0:34 - 0:38
    Và đây là LinearLayout mẹ cho
    hai LinearLayout nhỏ của tôi.
14. 39360 0:39 - 0:44
    Tôi sẽ di chuyển
    hai dòng này lên đây,
15. 43900 0:44 - 0:50
    bởi vì chúng cần phải gắn liền vào
    dạng xem gốc, thêm một dấu ngoặc ôm đóng.
16. 49670 0:50 - 0:54
    Được rồi, Android Studio tự động tạo ra
    một thẻ đóng cho tôi ngay tại đây.
17. 53990 0:54 - 0:55
    Vậy, tôi tiếp tục và
18. 55060 0:55 - 0:59
    cắt thẻ đóng này,
    di chuyển xuống phía dưới, và dán nó.
19. 61160 1:01 - 1:06
    Bây giờ tôi có một dòng lượn sóng màu đỏ,
    và nếu tôi nhìn vào lỗi,
20. 66450 1:06 - 1:11
    Tôi thấy nó cho biết tôi cần phải có
    layout_height và layout_width cụ thể.
21. 70660 1:11 - 1:12
    Whoops!
    Được rồi, hãy tiến hành.
22. 73210 1:13 - 1:18
    Bởi vì đấy là dạng xem gốc, nên tôi sẽ
    tiếp tục và tạo match_parent này.
23. 80050 1:20 - 1:21
    Được rồi,
24. 81140 1:21 - 1:26
    Bây giờ, tôi có một LinearLayout quanh
    một LinearLayout con.
25. 85610 1:26 - 1:31
    Và nếu tôi đến phần Xem trước,
    trông chúng khá giống nhau.
26. 90500 1:31 - 1:36
    Nên điều tôi chuẩn bị làm
    là tôi sẽ sao chép mọi thứ trong
27. 95510 1:36 - 1:41
    LinearLayout Đội A, và
    tôi sẽ dán nó ngay dưới Đội A.
28. 102160 1:42 - 1:47
    Và đây sẽ là
    LinearLayout Đội B của tôi.
29. 107026 1:47 - 1:52
    Bây giờ mọi thứ bắt đầu
    trông khá lộn xộn.
30. 112209 1:52 - 1:57
    Nên tôi sẽ thực hiện Cmd+A, hoặc
    chọn tất cả, rồi
31. 117264 1:57 - 2:04
    sử dụng phím tắt trên bàn phím
    Cmd+Option+L để định dạng mã của mình.
32. 123520 2:04 - 2:08
    Trên Windows là Ctrl+Alt+L,
    giờ trông ổn hơn một chút.
33. 127930 2:08 - 2:12
    Bây giờ, tôi muốn chắc chắn rằng
    bạn hiểu những gì đang xảy ra ở đây.
34. 131560 2:12 - 2:17
    Di chuyển lên trên,
    tôi có một LinearLayout gốc ở đây.
35. 136640 2:17 - 2:22
    Nó bắt đầu ở đây, và nếu tôi kéo
    xuống tận dưới cùng, nó kết thúc ở đây.
36. 143320 2:23 - 2:27
    Bên trong LinearLayout gốc đó,
    tôi sẽ di chuyển lên một lần nữa.
37. 148220 2:28 - 2:32
    Tôi có một bố trí con ở đây,
    nó bắt đầu ở đây.
38. 151919 2:32 - 2:35
    Tôi sẽ kéo xuống từ từ.
39. 155459 2:35 - 2:37
    Và nó kết thúc ở đây.
40. 157150 2:37 - 2:39
    Đây là cho Đội A.
41. 158860 2:39 - 2:42
    Và tôi có một LinearLayout con khác
    bắt đầu tại đây.
42. 162260 2:42 - 2:47
    Kéo xuống từ từ, kết thúc ở đây cho Đội B.
43. 167418 2:47 - 2:50
    Được rồi,
    tôi nhận thấy một số được tô đỏ ở đầu,
44. 169956 2:50 - 2:53
    nên tôi lại kéo lên một lần nữa và
    xem lỗi đó nói gì.
45. 174400 2:54 - 2:58
    Định hướng sai, không có định hướng,
    và mặc định theo chiều ngang.
46. 178440 2:58 - 3:01
    Nhưng, bố trí này có nhiều dạng xem con,
47. 180965 3:01 - 3:04
    mà có ít nhất một cái có
    chiều rộng match_parent.
48. 183793 3:04 - 3:08
    Hừm, tôi muốn nó theo chiều ngang,
    nhưng hãy cứ tiếp tục và
49. 188092 3:08 - 3:10
    xác định định hướng.
50. 191360 3:11 - 3:15
    Nói lại, về kỹ thuật, nó không cần thiết,
    bởi vì mặc định là nằm ngang, nhưng
51. 195400 3:15 - 3:16
    làm rõ là điều tốt.
52. 197950 3:18 - 3:22
    Nó cho biết điều gì đó về
    các dạng xem con đè lên nhau.
53. 202168 3:22 - 3:24
    Tôi sẽ bấm vào Xem trước.
54. 204334 3:24 - 3:28
    Hừm, nó dường như không
    thay đổi mấy, mặc dù tôi đã đi đến
55. 207901 3:28 - 3:31
    toàn bộ các vấn đề về sao chép và
    dán LinearLayout khác.
56. 211905 3:32 - 3:34
    Cái này có thể phải có tác dụng với
    lỗi mà tôi vừa mới xem.
57. 215525 3:36 - 3:39
    Nó cho biết đó là
    bố trí ngang.
58. 218915 3:39 - 3:43
    Vậy nên nó cố gắng để đặt hai
    LinearLayout cạnh nhau, nhưng
59. 222615 3:43 - 3:47
    LinearLayout
    có một layout_width của
60. 226591 3:47 - 3:50
    match_parent vốn tràn ra cả màn hình.
61. 229940 3:50 - 3:55
    Vì vậy, về cơ bản LinearLayout đầu tiên
    lấp đầy cả màn hình, và
62. 234510 3:55 - 3:59
    LinearLayout kia được đặt cạnh nó
    ở đâu đó ngoài màn hình.
63. 240000 4:00 - 4:03
    Hãy suy nghĩ về thứ chúng ta thực sự
    muốn xảy ra vào thời điểm này.
64. 243360 4:03 - 4:08
    Chúng ta muốn có hai bố trí có
    khoảng cách bằng nhau và đặt cạnh cái kia.
65. 248090 4:08 - 4:12
    Đây là khi chúng ta sẽ cần
    layout_weight.
66. 251860 4:12 - 4:16
    Tôi sẽ lấy
    LinearLayout đầu tiên và
67. 256267 4:16 - 4:20
    gán cho nó layout_weight là 1.
68. 261140 4:21 - 4:26
    Tôi cũng sẽ đặt chiều rộng của nó là 0.
69. 266160 4:26 - 4:30
    Được rồi, chúng ta có thể thấy rằng
    thực ra chúng ta có hai LinearLayout,
70. 269940 4:30 - 4:33
    chúng không được
    hiển thị một cách chính xác.
71. 272940 4:33 - 4:35
    Nhưng cái này tốt hơn một chút.
72. 274560 4:35 - 4:38
    Nên tôi cũng phải đặt một layout_weight
    trên LinearLayout thứ hai của tôi,
73. 277807 4:38 - 4:39
    cái này ngay tại đây.
74. 278877 4:39 - 4:41
    Tôi sẽ kéo xuống.
75. 280500 4:41 - 4:42
    Đây là LinearLayout thứ hai của tôi.
76. 282190 4:42 - 4:44
    Tôi sẽ thực hiện chính xác điều tương tự.
77. 284250 4:44 - 4:48
    Tôi sẽ nói rằng nó cũng có
    layout_weight là 1, vì vậy
78. 288186 4:48 - 4:51
    giờ chúng có layout_weight tương đương.
79. 292650 4:53 - 4:56
    Và sau đó tôi sẽ
    đặt chiều rộng về 0.
80. 295630 4:56 - 5:00
    Được rồi, và lý do mà tôi đặt
    chiều rộng của cả hai là 0,
81. 300160 5:00 - 5:05
    đơn giản là nếu cả hai phía này
    không chiếm bất kỳ chiều rộng nào.
82. 304588 5:05 - 5:07
    Thì tôi sẽ lấy
    toàn bộ khoảng cách thêm,
83. 306850 5:07 - 5:11
    đó là toàn bộ màn hình, và
    chia nó ra, thành mỗi cái một nửa
84. 311340 5:11 - 5:15
    bởi vì cả hai đều có
    độ dày bố trí giống nhau.
85. 314950 5:15 - 5:18
    Nếu những điều đó đều khó hiểu,
    tôi đã liên kết với một vài video trong
86. 317650 5:18 - 5:20
    ghi chép hướng dẫn
    nói về layout_weight.
87. 320350 5:20 - 5:24
    Được rồi, cái này trông khá ổn,
    ngoại trừ nó nói Đội A.
88. 324162 5:24 - 5:29
    Tôi sẽ kéo xuống để thay đổi nó
    ở đây, chuyển nó sang Đội B.
89. 330460 5:30 - 5:35
    Lúc này có thể bạn đã nhận thấy rằng
    cũng có một lỗi nữa ở đây, và
90. 335420 5:35 - 5:40
    lỗi đó xảy ra bởi vì,
    chúng ta có một ID bị trùng.
91. 339760 5:40 - 5:42
    Hãy nhớ, tôi vừa sao chép
    và dán đoạn mã.
92. 342340 5:42 - 5:46
    Nên về cơ bản, chúng ta có hai thứ
    có cùng id
93. 346090 5:46 - 5:48
    là team_a_score.
94. 348030 5:48 - 5:52
    Tôi sẽ thay đổi nó
    thành team_b_score.
95. 351800 5:52 - 5:54
    Được rồi, trông khá ổn rồi.
96. 353840 5:54 - 5:55
    Hơi khó xem một chút.
97. 354830 5:55 - 5:55
    Tôi sẽ phóng to.
98. 356800 5:57 - 5:58
    Nhưng ở đây nó cho biết là Đội B.
99. 359290 5:59 - 6:02
    Và tôi có tất cả các nút chính xác,
    và tất cả các dạng xem văn bản chính xác.
100. 362420 6:02 - 6:04
     Tôi sẽ thử chạy
     trên điện thoại của mình.
101. 365490 6:05 - 6:08
     Được rồi, trông có vẻ khá ổn.
102. 367960 6:08 - 6:13
     Bây giờ nếu tôi bấm các nút Đội A,
     thật tuyệt là nó sẽ cập nhật.
103. 373418 6:13 - 6:19
     Nếu tôi bấm các nút Đội B,
     nó cũng sẽ cập nhật.
104. 378840 6:19 - 6:21
     Thật đặc biệt.
105. 380910 6:21 - 6:23
     Nhưng hãy nhớ,
     chúng ta chỉ muốn có XML chính xác.
106. 383480 6:23 - 6:26
     Chúng ta không quá quan tâm về Java.
107. 385630 6:26 - 6:29
     Nhưng giờ chúng ta đã khiến XML làm việc,
     tại sao không sửa cả Java?