YouTube

Got a YouTube account?

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

Vietnamese subtitles

← 09-18 Coding the Details Screen

Get Embed Code
6 Languages

Showing Revision 1 created 08/02/2015 by Thanh Pham.

  1. Làm thế nào để bẻ UI này thành nhiều mảnh nhỏ hơn
  2. Well, bạn có thể nghĩ là dùng 2 cột như thế này
  3. Nhưng nó sẽ khó để xác định vị tri cho các thành phần ở đây
  4. Bạn có thể để chúng ở trung tâm theo chiều dọc màn hình
  5. Nhưng nó sẽ không nhất thiết phải thẳng hàng với temperature view ở
  6. Bên tay trái
  7. Thay vào đó, như thế này thì giống linear layout ngang hơn
  8. rồi các phần còn lại có thể sử dụng một
  9. linear layout dọc
  10. linear layout dọc có 6 đứa người con :v
  11. Người con thứ 3 là một linear layout ngang, và có 2 người con nữa :3
  12. Người con cả sẽ là một linear layout dọc (giống ông nó :v ) với 2 người con là 2 text view
  13. và người con thứ 2 cũng như vậy, cũng là linear layout và có
  14. 2 người con
  15. Để làm cho nội dung chạy dọc theo màn hình
  16. ta đặt chúng vào trong một scroll view
  17. Dùng một list view thì hơi thừa
    vì chúng ta không cần tăng
  18. tới vô hạn các item và
    chúng ta không cần tái chế
  19. Khi có một lượng field cố định trên màn hình
  20. scroll view là lựa chọn hoàn hảo
  21. Tôi có thế cho bạn xem code của fragment detail layout
  22. Chúng ta hardcođe một số dữ liệu trong layout
  23. Vì thế nó sẽ hiển thị ở khung Design
  24. Ở gốc của view hierarchy (phân cấp view),
    chúng ta có một Scroll view
  25. ScrollView có thể chỉ có một con
  26. Nên chúng ta set nó cho vertical Linear layout
  27. Trong layout này, chúng ta có một TextView cho một ngày trong tuần
  28. ngày tháng và
    một horizontal linear layout
  29. Và theo sau là
    text view độ ẩm
  30. text view gió và áp suất
  31. trong XML code chúng ta thấy scroll view với linear layout con
  32. Chúng ta cho nó padding là 16dp
  33. vì thế nội dung không bị phình ra cạnh màn hình
  34. Rồi chúng ta thấy text view, theo sau
    là horizontal linear layout
  35. Chúng ta xác định layout margin top là 16dp
  36. để cho nó thêm khoảng trống
    với đáy của text view này
  37. Trong horizontal layout này
    chúng ta có một vertical linear layout.
  38. nó có width là 0 và weight là 1, và
  39. linear layout khác với width là 0
    và weight là 1
  40. Nghĩa là cả 2 layout con đều có cùng chiều rộng
  41. Với linear layout này, chúng ta để gravity là center horizontal
  42. Nghĩa là nội dung trong nó sẽ được căn giữa theo chiều ngang
  43. Cái mà chứa icon cũng như forecast text view
  44. Cuối cũng chúng ta có các textview còn lại cho các chi tiết khác về thời tiết
  45. Khi layout trông ổn,
    chúng ta update detail fragment
  46. Ở thời điểm này,
    Chúng ta cũng chuyển nó vào trong file của nó
  47. Trong onLoadFinished
  48. chúng ta đã từng có một find view by id để tìm text view
  49. Giờ detail fragment
    có rất là nhiều text view
  50. Chúng ta không muốn
    tiếp tục thêm lệnh find view by id ở đây nữa
  51. vì nó sẽ phải đi qua
    view hierarchy mỗi khi
  52. loader refresh
  53. Thay vào đó ta sẽ sửa phương thức onCreate
  54. Một khi fragment
    đã inflate ta sẽ tiếp tục
  55. tìm một tham chiếu đến tất cả các view
    mà chúng ta sẽ cần sau này
  56. ta lưu nhưng view này như là
    biến thành viên của class
  57. Vì thế nên nó bắt đầu bằng chữ m
  58. Trong on create loader chúng ta
    đảm bảo là cái projection đó
  59. cho content provider query của chúng ta chứa
    tất cả thông tin mà chúng ta cần
  60. Nó khai báo ở trên đầu file
  61. Lúc trước chúng ta gọi nó là forecast column, nhưng
  62. giờ ta sửa tên nó thành detail column
  63. Và chúng ta cũng thêm một số column nữa
    vì giờ ta phải hiển thị nhiều
  64. thông tin hơn trên màn hình
  65. trong onLoadFinished chúng ta lấy
    một con trỏ trả về với dữ liệu mà ta cần
  66. chúng ta đọc weather condition ID từ cursor
  67. vì chúng ta sẽ cần nó
    để xác định ảnh nào cần hiển thị nhưng
  68. giờ chúng ta có thể dùng một place holder icon
  69. Chúng ta tiếp tục đọc từ cursor
    để lấy data, description và
  70. những field khác
  71. Để format data đúng cách cho người dùng
    chúng ta cũng chép những chuỗi và
  72. utility từ gist