-
Title:
-
Description:
-
Để xây dựng layout này,
Tôi mở file activity_main.xml.
-
Tôi biết là cần một layout tuyến tính dọc
để đưa các view này
-
thành một cột dọc.
-
Vì vậy, đầu tiên tôi sẽ thay đổi
layout tương đối thành layout tuyến tính.
-
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
-
với thẻ đóng, nên tôi chỉ có thể sao chép
sau đó dán nó xuống ở đây.
-
Bây giờ các thẻ đã phù hợp.
-
Tiếp theo, có thể thêm vào các view.
-
Đầu tiên, tôi có text view quantity.
-
Vậy tôi sẽ đi lấy text view này, sau đó
thay đổi text bên trong nó thành quantity.
-
Tiếp theo, tôi có một text view ghi zero.
-
Vậy tôi có thể sao chép chữ zero
và dán ngay bên dưới.
-
Tôi sẽ thay đổi nó để chữ zero
phù hợp với ảnh chụp màn hình ở đây.
-
View con cuối cùng trong layout
tuyến tính này là một nút.
-
Ta đã không thêm nút vào layout trước đó,
vì vậy hãy Google Search nó.
-
Nếu bạn mở một trình duyệt
bạn có thể tìm kiếm nút android.
-
Liên kết đầu tiên này có vẻ tốt,
đó là trang developer.android.com.
-
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.
-
Chúng ta kéo xuống để đọc
tổng quan về lớp.
-
Nó nói một chút về một số code Java,
mà chúng ta chưa được học,
-
nhưng dưới này
ta có một số mã xml cho nút.
-
Ta có thể sao chép mã này
xem chúng sẽ làm gì trong code của ta.
-
Trong layout của chúng ta, thêm
một nút bên dưới hai text view này.
-
Tôi sẽ dán code
từ tài liệu ở đây.
-
Bây giờ thay vì chuỗi tự hủy,
tôi sẽ đi chọn một chút gì đó
-
thân thiện như order.
-
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ó.
-
Tuyệt, vậy bây giờ bạn có
text view quantity, text view zero,
-
và một nút lệnh.
-
Hãy chạy nó trong ứng dụng,
để xem sẽ thế nào,
-
bằng cách nhấn vào
nút play màu xanh lá cây.
-
Chúng ta có thể thấy ở dưới này
nó vẫn đang xây dựng.
-
Ồ, không phải là cái chúng ta muốn.
-
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.
-
Vì vậy, hãy chắc chắn rằng ta đã thêm
thuộc tính định hướng.
-
Chúng ta sẽ thay đổi nó thành
android:orientation= "vertical".
-
Điều đó sẽ khắc phục vấn đề.
-
Vậy hãy nhấn run một lần nữa.
-
Được rồi, tốt hơn rồi đấy.
-
Ba view con xuất hiện
trong một cột dọc.
-
Giờ chỉ cần định dạng các trường
-
để giống với các màn hình,
mà ta được cho trước.
-
Từ màn hình này ta thấy
text view quantity được viết hoa tất cả.
-
Trong bài một chúng ta đã học về
thuộc tính tên là android: textAllCaps,
-
và nó hiển thị ở đây
sau khi tự động hoàn tất.
-
Nếu nó hiển thị như thế này,
bạn chỉ cần nhấn Enter
-
và nó sẽ tự động thêm vào
trong code ở đây.
-
Chúng ta thiết lập giá trị đó là đúng
vì ta muốn nó được viết hoa tất cả.
-
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
-
là bởi nếu chúng ta muốn thay đổi
giao diện người dùng
-
cho quantity viết chữ thường như thế này,
tất cả những gì ta cần làm
-
chỉ là loại bỏ thuộc tính này
thay vì thay đổi dòng chữ đó.
-
Tiếp theo, với dòng zero này,
chúng ta nên sử dụng cỡ chữ 16sp.
-
Tôi sẽ dùng cỡ đó và nó hiển thị
trong các đề xuất tự động hoàn tất
-
nên tôi chỉ cần nhấn Enter
và sau đó chọn 16sp cho giá trị.
-
Chúng tôi cũng muốn font chữ màu đen.
-
Tôi sẽ sử dụng màu đen
trong bảng màu Android,
-
được gọi như thế này.
-
Tuyệt vời, màu này sẽ là của
cả hai text view quantity và zero.
-
Nút order được rồi, nó tự động viết hoa
cho bạn trong một nút với
-
chiều cao và chiều rộng
nằm trong phần nội dung.
-
Chúng ta cần phải giải quyết
không gian dọc này ở đây.
-
Ta muốn cỡ 16dp lót hoặc lề
ở giữa text view quantity và zero.
-
Ta cũng muốn cũng muốn cỡ 16dp lót hoăc lề
ở giữa zero và nút order.
-
Ta cũng muốn cũng muốn cỡ 16dp lót hoăc lề
-
ở giữa zero và nút order.
-
Bạn có thể thực hiện
bằng nhiều cách khác nhau,
-
Tôi sẽ thêm nó
như là lề trên của layout cho nút này.
-
Tôi sẽ thêm nó như là lề dưới của layout
cho text view quantity này.
-
Hãy thoải mái thử những cách khác
miễn là nó trông giống nhau.
-
Lý do tại sao tôi đã chọn
để lề dưới và lề trên
-
là vì biết khu vực ở giữa này
sau đó sẽ thay đổi.
-
Chúng tôi sẽ thay đổi nó thành
một bảng chọn số lượng
-
với nút + và nút -,
và tôi vẫn muốn có 16dp không gian
-
giữa dòng quantity và bảng chọn.
-
Tương tự với nút cũng vậy.
-
Được rồi, ta hãy chạy lại một lần nữa
trên thiết bị.
-
Tuyệt, và nó đã
giống như ý muốn của chúng ta.
-
Text view quantity đã được viết hoa,
-
text view zero đã có font chữ màu đen,
kích thước 16sp, và ta có nút order ở đây.
-
Ta cũng có 16dp không gian
giữa các dòng.
-
Làm tốt lắm.
Ồ, suýt thì tôi quên mất.
-
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.
-
À, thực sự thì chẳng có gì cả,
ít nhất là lúc này.
-
Hãy tiếp tục quan sát
xem chuyện gì xảy ra tiếp theo.