-
Title:
-
Description:
-
Trước khi bắt đầu viết mã,
Tôi sẽ trả lời câu hỏi này.
-
Tôi vẫn biết chỉ có hai
nhóm dạng xem, và LinearLayout và
-
RelativeLayout.
-
Bây giờ mấu chốt ở đây là hai
nhóm này phải có khoảng cách bằng nhau.
-
Sử dụng độ dày bố trí là
cách dễ dàng để thực hiện điều này.
-
Hãy tiếp tục và xem đoạn mã.
-
Đượ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à
-
lướt qua activity_main.xml.
-
Và đây là tập tin XML của tôi.
-
Tôi sẽ bắt đầu bằng cách đưa tất cả
đoạn mã sang một LinearLayout khác.
-
Và đây là LinearLayout mẹ cho
hai LinearLayout nhỏ của tôi.
-
Tôi sẽ di chuyển
hai dòng này lên đây,
-
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.
-
Được rồi, Android Studio tự động tạo ra
một thẻ đóng cho tôi ngay tại đây.
-
Vậy, tôi tiếp tục và
-
cắt thẻ đóng này,
di chuyển xuống phía dưới, và dán nó.
-
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,
-
Tôi thấy nó cho biết tôi cần phải có
layout_height và layout_width cụ thể.
-
Whoops!
Được rồi, hãy tiến hành.
-
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.
-
Được rồi,
-
Bây giờ, tôi có một LinearLayout quanh
một LinearLayout con.
-
Và nếu tôi đến phần Xem trước,
trông chúng khá giống nhau.
-
Nên điều tôi chuẩn bị làm
là tôi sẽ sao chép mọi thứ trong
-
LinearLayout Đội A, và
tôi sẽ dán nó ngay dưới Đội A.
-
Và đây sẽ là
LinearLayout Đội B của tôi.
-
Bây giờ mọi thứ bắt đầu
trông khá lộn xộn.
-
Nên tôi sẽ thực hiện Cmd+A, hoặc
chọn tất cả, rồi
-
sử dụng phím tắt trên bàn phím
Cmd+Option+L để định dạng mã của mình.
-
Trên Windows là Ctrl+Alt+L,
giờ trông ổn hơn một chút.
-
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.
-
Di chuyển lên trên,
tôi có một LinearLayout gốc ở đây.
-
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.
-
Bên trong LinearLayout gốc đó,
tôi sẽ di chuyển lên một lần nữa.
-
Tôi có một bố trí con ở đây,
nó bắt đầu ở đây.
-
Tôi sẽ kéo xuống từ từ.
-
Và nó kết thúc ở đây.
-
Đây là cho Đội A.
-
Và tôi có một LinearLayout con khác
bắt đầu tại đây.
-
Kéo xuống từ từ, kết thúc ở đây cho Đội B.
-
Được rồi,
tôi nhận thấy một số được tô đỏ ở đầu,
-
nên tôi lại kéo lên một lần nữa và
xem lỗi đó nói gì.
-
Định hướng sai, không có định hướng,
và mặc định theo chiều ngang.
-
Nhưng, bố trí này có nhiều dạng xem con,
-
mà có ít nhất một cái có
chiều rộng match_parent.
-
Hừm, tôi muốn nó theo chiều ngang,
nhưng hãy cứ tiếp tục và
-
xác định định hướng.
-
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
-
làm rõ là điều tốt.
-
Nó cho biết điều gì đó về
các dạng xem con đè lên nhau.
-
Tôi sẽ bấm vào Xem trước.
-
Hừm, nó dường như không
thay đổi mấy, mặc dù tôi đã đi đến
-
toàn bộ các vấn đề về sao chép và
dán LinearLayout khác.
-
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.
-
Nó cho biết đó là
bố trí ngang.
-
Vậy nên nó cố gắng để đặt hai
LinearLayout cạnh nhau, nhưng
-
LinearLayout
có một layout_width của
-
match_parent vốn tràn ra cả màn hình.
-
Vì vậy, về cơ bản LinearLayout đầu tiên
lấp đầy cả màn hình, và
-
LinearLayout kia được đặt cạnh nó
ở đâu đó ngoài màn hình.
-
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.
-
Chúng ta muốn có hai bố trí có
khoảng cách bằng nhau và đặt cạnh cái kia.
-
Đây là khi chúng ta sẽ cần
layout_weight.
-
Tôi sẽ lấy
LinearLayout đầu tiên và
-
gán cho nó layout_weight là 1.
-
Tôi cũng sẽ đặt chiều rộng của nó là 0.
-
Được rồi, chúng ta có thể thấy rằng
thực ra chúng ta có hai LinearLayout,
-
chúng không được
hiển thị một cách chính xác.
-
Nhưng cái này tốt hơn một chút.
-
Nên tôi cũng phải đặt một layout_weight
trên LinearLayout thứ hai của tôi,
-
cái này ngay tại đây.
-
Tôi sẽ kéo xuống.
-
Đây là LinearLayout thứ hai của tôi.
-
Tôi sẽ thực hiện chính xác điều tương tự.
-
Tôi sẽ nói rằng nó cũng có
layout_weight là 1, vì vậy
-
giờ chúng có layout_weight tương đương.
-
Và sau đó tôi sẽ
đặt chiều rộng về 0.
-
Được rồi, và lý do mà tôi đặt
chiều rộng của cả hai là 0,
-
đơ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.
-
Thì tôi sẽ lấy
toàn bộ khoảng cách thêm,
-
đó là toàn bộ màn hình, và
chia nó ra, thành mỗi cái một nửa
-
bởi vì cả hai đều có
độ dày bố trí giống nhau.
-
Nếu những điều đó đều khó hiểu,
tôi đã liên kết với một vài video trong
-
ghi chép hướng dẫn
nói về layout_weight.
-
Được rồi, cái này trông khá ổn,
ngoại trừ nó nói Đội A.
-
Tôi sẽ kéo xuống để thay đổi nó
ở đây, chuyển nó sang Đội B.
-
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à
-
lỗi đó xảy ra bởi vì,
chúng ta có một ID bị trùng.
-
Hãy nhớ, tôi vừa sao chép
và dán đoạn mã.
-
Nên về cơ bản, chúng ta có hai thứ
có cùng id
-
là team_a_score.
-
Tôi sẽ thay đổi nó
thành team_b_score.
-
Được rồi, trông khá ổn rồi.
-
Hơi khó xem một chút.
-
Tôi sẽ phóng to.
-
Nhưng ở đây nó cho biết là Đội B.
-
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.
-
Tôi sẽ thử chạy
trên điện thoại của mình.
-
Được rồi, trông có vẻ khá ổn.
-
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.
-
Nếu tôi bấm các nút Đội B,
nó cũng sẽ cập nhật.
-
Thật đặc biệt.
-
Nhưng hãy nhớ,
chúng ta chỉ muốn có XML chính xác.
-
Chúng ta không quá quan tâm về Java.
-
Nhưng giờ chúng ta đã khiến XML làm việc,
tại sao không sửa cả Java?