Vietnamese subtitles

← 05-07 Build Layout - Solution

Get Embed Code
13 Languages

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

  1. Để xây dựng layout này,
    Tôi mở file activity_main.xml.
  2. Tôi biết là cần một layout tuyến tính dọc
    để đưa các view này
  3. thành một cột dọc.
  4. Vì vậy, đầu tiên tôi sẽ thay đổi
    layout tương đối thành layout tuyến tính.
  5. 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
  6. với thẻ đóng, nên tôi chỉ có thể sao chép
    sau đó dán nó xuống ở đây.
  7. Bây giờ các thẻ đã phù hợp.
  8. Tiếp theo, có thể thêm vào các view.
  9. Đầu tiên, tôi có text view quantity.
  10. Vậy tôi sẽ đi lấy text view này, sau đó
    thay đổi text bên trong nó thành quantity.
  11. Tiếp theo, tôi có một text view ghi zero.
  12. Vậy tôi có thể sao chép chữ zero
    và dán ngay bên dưới.
  13. Tôi sẽ thay đổi nó để chữ zero
    phù hợp với ảnh chụp màn hình ở đây.
  14. View con cuối cùng trong layout
    tuyến tính này là một nút.
  15. Ta đã không thêm nút vào layout trước đó,
    vì vậy hãy Google Search nó.
  16. Nếu bạn mở một trình duyệt
    bạn có thể tìm kiếm nút android.
  17. Liên kết đầu tiên này có vẻ tốt,
    đó là trang developer.android.com.
  18. 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.
  19. Chúng ta kéo xuống để đọc
    tổng quan về lớp.
  20. Nó nói một chút về một số code Java,
    mà chúng ta chưa được học,
  21. nhưng dưới này
    ta có một số mã xml cho nút.
  22. Ta có thể sao chép mã này
    xem chúng sẽ làm gì trong code của ta.
  23. Trong layout của chúng ta, thêm
    một nút bên dưới hai text view này.
  24. Tôi sẽ dán code
    từ tài liệu ở đây.
  25. Bây giờ thay vì chuỗi tự hủy,
    tôi sẽ đi chọn một chút gì đó
  26. thân thiện như order.
  27. 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ó.
  28. Tuyệt, vậy bây giờ bạn có
    text view quantity, text view zero,
  29. và một nút lệnh.
  30. Hãy chạy nó trong ứng dụng,
    để xem sẽ thế nào,
  31. bằng cách nhấn vào
    nút play màu xanh lá cây.
  32. Chúng ta có thể thấy ở dưới này
    nó vẫn đang xây dựng.
  33. Ồ, không phải là cái chúng ta muốn.
  34. 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.
  35. Vì vậy, hãy chắc chắn rằng ta đã thêm
    thuộc tính định hướng.
  36. Chúng ta sẽ thay đổi nó thành
    android:orientation= "vertical".
  37. Điều đó sẽ khắc phục vấn đề.
  38. Vậy hãy nhấn run một lần nữa.
  39. Được rồi, tốt hơn rồi đấy.
  40. Ba view con xuất hiện
    trong một cột dọc.
  41. Giờ chỉ cần định dạng các trường
  42. để giống với các màn hình,
    mà ta được cho trước.
  43. Từ màn hình này ta thấy
    text view quantity được viết hoa tất cả.
  44. Trong bài một chúng ta đã học về
    thuộc tính tên là android: textAllCaps,
  45. và nó hiển thị ở đây
    sau khi tự động hoàn tất.
  46. Nếu nó hiển thị như thế này,
    bạn chỉ cần nhấn Enter
  47. và nó sẽ tự động thêm vào
    trong code ở đây.
  48. Chúng ta thiết lập giá trị đó là đúng
    vì ta muốn nó được viết hoa tất cả.
  49. 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
  50. là bởi nếu chúng ta muốn thay đổi
    giao diện người dùng
  51. cho quantity viết chữ thường như thế này,
    tất cả những gì ta cần làm
  52. chỉ là loại bỏ thuộc tính này
    thay vì thay đổi dòng chữ đó.
  53. Tiếp theo, với dòng zero này,
    chúng ta nên sử dụng cỡ chữ 16sp.
  54. Tôi sẽ dùng cỡ đó và nó hiển thị
    trong các đề xuất tự động hoàn tất
  55. nên tôi chỉ cần nhấn Enter
    và sau đó chọn 16sp cho giá trị.
  56. Chúng tôi cũng muốn font chữ màu đen.
  57. Tôi sẽ sử dụng màu đen
    trong bảng màu Android,
  58. được gọi như thế này.
  59. Tuyệt vời, màu này sẽ là của
    cả hai text view quantity và zero.
  60. Nút order được rồi, nó tự động viết hoa
    cho bạn trong một nút với
  61. chiều cao và chiều rộng
    nằm trong phần nội dung.
  62. Chúng ta cần phải giải quyết
    không gian dọc này ở đây.
  63. Ta muốn cỡ 16dp lót hoặc lề
    ở giữa text view quantity và zero.
  64. Ta cũng muốn cũng muốn cỡ 16dp lót hoăc lề
    ở giữa zero và nút order.
  65. Ta cũng muốn cũng muốn cỡ 16dp lót hoăc lề
  66. ở giữa zero và nút order.
  67. Bạn có thể thực hiện
    bằng nhiều cách khác nhau,
  68. Tôi sẽ thêm nó
    như là lề trên của layout cho nút này.
  69. Tôi sẽ thêm nó như là lề dưới của layout
    cho text view quantity này.
  70. Hãy thoải mái thử những cách khác
    miễn là nó trông giống nhau.
  71. Lý do tại sao tôi đã chọn
    để lề dưới và lề trên
  72. là vì biết khu vực ở giữa này
    sau đó sẽ thay đổi.
  73. Chúng tôi sẽ thay đổi nó thành
    một bảng chọn số lượng
  74. với nút + và nút -,
    và tôi vẫn muốn có 16dp không gian
  75. giữa dòng quantity và bảng chọn.
  76. Tương tự với nút cũng vậy.
  77. Được rồi, ta hãy chạy lại một lần nữa
    trên thiết bị.
  78. Tuyệt, và nó đã
    giống như ý muốn của chúng ta.
  79. Text view quantity đã được viết hoa,
  80. text view zero đã có font chữ màu đen,
    kích thước 16sp, và ta có nút order ở đây.
  81. Ta cũng có 16dp không gian
    giữa các dòng.
  82. Làm tốt lắm.
    Ồ, suýt thì tôi quên mất.
  83. 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.
  84. À, thực sự thì chẳng có gì cả,
    ít nhất là lúc này.
  85. Hãy tiếp tục quan sát
    xem chuyện gì xảy ra tiếp theo.