[Kodular Bài 2] Thiết kế giao diện – tùy chỉnh bố cục trên App

Posted by

Ở bài số 2 này mình sẽ hướng dẫn một số thao tác để làm chủ màn hình screen trên App để từ đó có thể thiết kế, sắp đặt bố cục các đối tượng theo thẩm mỹ, cách trình bày riêng của mỗi người. Cụ thể ở đây mình tạo một ứng dụng có tên “Test” tại trang Kodular Creator với màn hình Screen1 trống hoàn toàn

Muốn tạo 2 nút lệnh cân đối ở trên cùng, trước khi tạo từng nút lệnh mình chọn khối ngang Horizontal Arrangerment bằng cách: vào nhóm Layout ở bên trái ngoài cùng, chọn General –> kéo & thả khối Horizontal Arrangerment vào khu vực Screen 1. Tùy chọn chỉ sốchiều cao cho khối ngang bằng pixel hoặc tỉ lệ % so với màn hình tổng (ở đây mình chọn 20% để nó tự căn theo màn hình điện thoại người sử dụng), chỉ số chiều rộng nên chọn Fill Parent để tự lấp đầy bề ngang điện thoại.

Tiếp theo mình kéo và thả lần lượt 2 nút lệnh (button1, button2) vào khu vực khối ngang Horizontal Arrangerment đã có sẵn này…. ngay lập tức 2 nút lệnh sẽ được hiển thị nằm ngang nhau thay vì thứ tự dọc nếu ta không thiết kế bố cục trước

Nhớ kéo và thả vào đúng giữa khu vực Horizontal Arrangerment, sau đó thiết lập các thuộc tính cho nút lệnh (cột bên phải) như màu sắc, chiều rộng, chiều cao, tên hiển thị…. Như vậy ta đã tạo thành công bố cục cho 2 nút lệnh được xếp ngang và cân đối. Nếu tăng thêm 3 nút lệnh hay các đối tượng khác như Label, Image… các bạn làm hoàn toàn trương tự!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *