YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Vietnamese subtitles

← Add the Other Team in XML

Get Embed Code
13 Languages

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

  1. Trước khi bắt đầu viết mã,
    Tôi sẽ trả lời câu hỏi này.

  2. Tôi vẫn biết chỉ có hai
    nhóm dạng xem, và LinearLayout và
  3. RelativeLayout.
  4. Bây giờ mấu chốt ở đây là hai
    nhóm này phải có khoảng cách bằng nhau.
  5. Sử dụng độ dày bố trí là
    cách dễ dàng để thực hiện điều này.
  6. Hãy tiếp tục và xem đoạn mã.
  7. Đượ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à
  8. lướt qua activity_main.xml.
  9. Và đây là tập tin XML của tôi.
  10. Tôi sẽ bắt đầu bằng cách đưa tất cả
    đoạn mã sang một LinearLayout khác.
  11. Và đây là LinearLayout mẹ cho
    hai LinearLayout nhỏ của tôi.
  12. Tôi sẽ di chuyển
    hai dòng này lên đây,
  13. 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.
  14. Được rồi, Android Studio tự động tạo ra
    một thẻ đóng cho tôi ngay tại đây.
  15. Vậy, tôi tiếp tục và
  16. cắt thẻ đóng này,
    di chuyển xuống phía dưới, và dán nó.
  17. 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,
  18. Tôi thấy nó cho biết tôi cần phải có
    layout_height và layout_width cụ thể.
  19. Whoops!
    Được rồi, hãy tiến hành.
  20. 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.
  21. Được rồi,
  22. Bây giờ, tôi có một LinearLayout quanh
    một LinearLayout con.
  23. Và nếu tôi đến phần Xem trước,
    trông chúng khá giống nhau.
  24. Nên điều tôi chuẩn bị làm
    là tôi sẽ sao chép mọi thứ trong
  25. LinearLayout Đội A, và
    tôi sẽ dán nó ngay dưới Đội A.
  26. Và đây sẽ là
    LinearLayout Đội B của tôi.
  27. Bây giờ mọi thứ bắt đầu
    trông khá lộn xộn.
  28. Nên tôi sẽ thực hiện Cmd+A, hoặc
    chọn tất cả, rồi
  29. sử dụng phím tắt trên bàn phím
    Cmd+Option+L để định dạng mã của mình.
  30. Trên Windows là Ctrl+Alt+L,
    giờ trông ổn hơn một chút.
  31. 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.
  32. Di chuyển lên trên,
    tôi có một LinearLayout gốc ở đây.
  33. 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.
  34. Bên trong LinearLayout gốc đó,
    tôi sẽ di chuyển lên một lần nữa.
  35. Tôi có một bố trí con ở đây,
    nó bắt đầu ở đây.
  36. Tôi sẽ kéo xuống từ từ.
  37. Và nó kết thúc ở đây.
  38. Đây là cho Đội A.
  39. Và tôi có một LinearLayout con khác
    bắt đầu tại đây.
  40. Kéo xuống từ từ, kết thúc ở đây cho Đội B.
  41. Được rồi,
    tôi nhận thấy một số được tô đỏ ở đầu,
  42. nên tôi lại kéo lên một lần nữa và
    xem lỗi đó nói gì.
  43. Định hướng sai, không có định hướng,
    và mặc định theo chiều ngang.
  44. Nhưng, bố trí này có nhiều dạng xem con,
  45. mà có ít nhất một cái có
    chiều rộng match_parent.
  46. Hừm, tôi muốn nó theo chiều ngang,
    nhưng hãy cứ tiếp tục và
  47. xác định định hướng.
  48. 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
  49. làm rõ là điều tốt.
  50. Nó cho biết điều gì đó về
    các dạng xem con đè lên nhau.
  51. Tôi sẽ bấm vào Xem trước.
  52. Hừm, nó dường như không
    thay đổi mấy, mặc dù tôi đã đi đến
  53. toàn bộ các vấn đề về sao chép và
    dán LinearLayout khác.
  54. 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.
  55. Nó cho biết đó là
    bố trí ngang.
  56. Vậy nên nó cố gắng để đặt hai
    LinearLayout cạnh nhau, nhưng
  57. LinearLayout
    có một layout_width của
  58. match_parent vốn tràn ra cả màn hình.
  59. Vì vậy, về cơ bản LinearLayout đầu tiên
    lấp đầy cả màn hình, và
  60. LinearLayout kia được đặt cạnh nó
    ở đâu đó ngoài màn hình.
  61. 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.
  62. Chúng ta muốn có hai bố trí có
    khoảng cách bằng nhau và đặt cạnh cái kia.
  63. Đây là khi chúng ta sẽ cần
    layout_weight.
  64. Tôi sẽ lấy
    LinearLayout đầu tiên và
  65. gán cho nó layout_weight là 1.
  66. Tôi cũng sẽ đặt chiều rộng của nó là 0.
  67. Được rồi, chúng ta có thể thấy rằng
    thực ra chúng ta có hai LinearLayout,
  68. chúng không được
    hiển thị một cách chính xác.
  69. Nhưng cái này tốt hơn một chút.
  70. Nên tôi cũng phải đặt một layout_weight
    trên LinearLayout thứ hai của tôi,
  71. cái này ngay tại đây.
  72. Tôi sẽ kéo xuống.
  73. Đây là LinearLayout thứ hai của tôi.
  74. Tôi sẽ thực hiện chính xác điều tương tự.
  75. Tôi sẽ nói rằng nó cũng có
    layout_weight là 1, vì vậy
  76. giờ chúng có layout_weight tương đương.
  77. Và sau đó tôi sẽ
    đặt chiều rộng về 0.
  78. Được rồi, và lý do mà tôi đặt
    chiều rộng của cả hai là 0,
  79. đơ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.
  80. Thì tôi sẽ lấy
    toàn bộ khoảng cách thêm,
  81. đó là toàn bộ màn hình, và
    chia nó ra, thành mỗi cái một nửa
  82. bởi vì cả hai đều có
    độ dày bố trí giống nhau.
  83. Nếu những điều đó đều khó hiểu,
    tôi đã liên kết với một vài video trong
  84. ghi chép hướng dẫn
    nói về layout_weight.
  85. Được rồi, cái này trông khá ổn,
    ngoại trừ nó nói Đội A.
  86. Tôi sẽ kéo xuống để thay đổi nó
    ở đây, chuyển nó sang Đội B.
  87. 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à
  88. lỗi đó xảy ra bởi vì,
    chúng ta có một ID bị trùng.
  89. Hãy nhớ, tôi vừa sao chép
    và dán đoạn mã.
  90. Nên về cơ bản, chúng ta có hai thứ
    có cùng id
  91. là team_a_score.
  92. Tôi sẽ thay đổi nó
    thành team_b_score.
  93. Được rồi, trông khá ổn rồi.
  94. Hơi khó xem một chút.
  95. Tôi sẽ phóng to.
  96. Nhưng ở đây nó cho biết là Đội B.
  97. 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.
  98. Tôi sẽ thử chạy
    trên điện thoại của mình.
  99. Được rồi, trông có vẻ khá ổn.
  100. 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.
  101. Nếu tôi bấm các nút Đội B,
    nó cũng sẽ cập nhật.
  102. Thật đặc biệt.
  103. Nhưng hãy nhớ,
    chúng ta chỉ muốn có XML chính xác.
  104. Chúng ta không quá quan tâm về Java.
  105. Nhưng giờ chúng ta đã khiến XML làm việc,
    tại sao không sửa cả Java?