X in chào các bạn, trong bài học này mình sẽ cùng với các bạn tìm hiểu về cách bố trí các phần tử sao cho phù hợp, cách chúng ta ngăn khoảng cách giữa các phần tử với nhau hay căn phần tử ra chính giữa màn hình hoặc bất cứ vị trí nào khác.
Mình đã từng gặp 1 bạn có câu hỏi như này: "Tại sao mình kéo nút bấm vào màn hình mà sao nó cứ nằm ở phía trên bên trái mà không vào chính giữa?". Đây là câu hỏi chúng ta thường gặp ở những bạn mới bắt đầu làm quen, chính vì thế những bạn đã có nhiều năm kinh nghiệm cũng không nên cười vì tất cả chúng ta ai cũng đã từng trải qua giai đoạn này.
Trong 1 Screen, chúng ta có thể sắp xếp các vị trí sẵn như: bên trên cùng bên trái, bên trên cùng ở giữa, trên cùng bên phải, ở giữa bên trái, ở chính giữa, ở giữa bên phải, ở dưới cùng bên trái, dưới cùng ở giữa, dưới cùng bên phải và còn rất nhiều vị trí mà chúng ta muốn.
Và đối với mỗi Screen, nếu các bạn không sử dụng Layout để căn bố cục, thì chúng ta có thể căn được vị những vị trí theo chiều ngang bao gồm : Left, Center, Right và theo chiều dọc bao gồm : Top, Center, Bottom. Các tùy chọn này các bạn có thể tìm thấy ngay tại giao diện làm việc Designer, tại vùng All Component chọn Screen hiện tại, sau đó quan sát sang vùng Properties, các bạn sẽ thấy có 2 mục tùy chọn là Align Horizontal và Align Vertical. Trong mỗi tùy chọn này sẽ có những lựa chọn mà mình nói bên trên.
Ví dụ, mình muốn căn vị trí của nút bấm trong Screen nằm ở vị trí ở giữa màn hình phía bên phải, thì mình sẽ set giá trị tại Screen như sau:
- Align Horizontal : Right
- Align Vertical : Center
Tương tự như vậy, nếu mình muốn đặt vị trí nút bấm nằm ở giữa dưới cùng, thì mình sẽ set giá trị:
- Align Horizontal : center
- Align Vertical : Bottom
Như vậy, các bạn có thể hiểu được 2 thuộc tính: Horizontal - Sẽ căn bố cục theo chiều ngang, tương đương vị trí Trái, Giữa và Phải. Còn Vertical - sẽ căn bố cục theo chiều dọc tương đương với vị trí Trên, Giữa và Dưới
Trong nhóm Layout sẽ chia nhỏ ra thành nhiều hạng mục khác như : General, List, Navigation, Views. Ở đây chúng ta cần những phần tử giúp chúng ta có thể tạo ra được những bố cục ưng ý, vì thế chúng ta chỉ quan tâm đến mục General mà thôi.
Trong mục General chúng ta sẽ có rất nhiều phần tử khác nữa. Nhưng trong bài này, mình chỉ tập trung hướng dẫn các bạn những phần tử hỗ trợ chúng ta Layout. Những phần tử giúp chúng ta layout bao gồm:
1. Horizontal Arrangement - Sắp xếp các đối tượng theo hàng ngang.
2. Horizontal Scroll Arrangement - Khi các bạn muốn xếp nhiều phần tử theo hàng ngang, và số lượng phần tử trong 1 hàng rất nhiều, nhiều đến mức chiều rộng của Screen không thể hiển thị hết được thì đây là phần tử cho bạn, nó giúp bạn sắp xếp các phần tử theo hàng và khi nhiều quá nó sẽ hiển thị 1 thanh trượt giúp bạn kéo những phần tử bị ẩn ra ngoài.
3. Space - Tạo khoảng cách với các phần tử khác.
4. Table Arrangement - Bố cục theo dạng bảng (Các bạn có thể tùy chọn đặt số lượng hàng và cột khi dùng phần tử này)
5. Vertical Arrangement - Sắp xếp các đối tượng theo chiều dọc
6. Vertical Scroll Arrangement - Tương tự như phần từ Horizontal Scroll Arrangement nhưng khác là nó theo chiều dọc.
Các bạn có thể đặt phần tử Horizontal bên trong phần tử Vertical và ngược lại để có thể tạo ra những bố cục mong muốn!
Như vậy, bài học lần này mình đã giới thiệu tới các bạn cách làm sao để sắp xếp bố cục sao cho đúng ý. Chúng ta sẽ cùng gặp lại nhau trong những bài học tiếp theo!
Mình đã từng gặp 1 bạn có câu hỏi như này: "Tại sao mình kéo nút bấm vào màn hình mà sao nó cứ nằm ở phía trên bên trái mà không vào chính giữa?". Đây là câu hỏi chúng ta thường gặp ở những bạn mới bắt đầu làm quen, chính vì thế những bạn đã có nhiều năm kinh nghiệm cũng không nên cười vì tất cả chúng ta ai cũng đã từng trải qua giai đoạn này.
Trong 1 Screen, chúng ta có thể sắp xếp các vị trí sẵn như: bên trên cùng bên trái, bên trên cùng ở giữa, trên cùng bên phải, ở giữa bên trái, ở chính giữa, ở giữa bên phải, ở dưới cùng bên trái, dưới cùng ở giữa, dưới cùng bên phải và còn rất nhiều vị trí mà chúng ta muốn.
Có thể bạn sẽ thích!
Lựa chọn nền tảng nào để tạo app? Kodular? App Inventor? Thunkable? Tạo tài khoản, tạo dự án đầu tiên, làm quen Kodular Screens - Tạo, xóa, di chuyển, quản lý các màn hình Khoảng cách, vị trí của các phần tử
- Align Horizontal : Right
- Align Vertical : Center
Tương tự như vậy, nếu mình muốn đặt vị trí nút bấm nằm ở giữa dưới cùng, thì mình sẽ set giá trị:
- Align Horizontal : center
- Align Vertical : Bottom
Như vậy, các bạn có thể hiểu được 2 thuộc tính: Horizontal - Sẽ căn bố cục theo chiều ngang, tương đương vị trí Trái, Giữa và Phải. Còn Vertical - sẽ căn bố cục theo chiều dọc tương đương với vị trí Trên, Giữa và Dưới
Layout
Để có thể thiết kế nhiều dự án với nhiều bố cục khác nhau, nếu chỉ dựa vào căn lề của Screen thì chắc chắn không thể đủ, chính vì thế trong bảng Palette có chứa 1 nhóm với tên gọi Layout, bên trong chứa các phần tử phân chia bố cục theo chiều ngang chiều dọc khác nhau nhằm phục vụ cho việc design trở nên dễ dàng hơn.Trong mục General chúng ta sẽ có rất nhiều phần tử khác nữa. Nhưng trong bài này, mình chỉ tập trung hướng dẫn các bạn những phần tử hỗ trợ chúng ta Layout. Những phần tử giúp chúng ta layout bao gồm:
3. Space - Tạo khoảng cách với các phần tử khác.
4. Table Arrangement - Bố cục theo dạng bảng (Các bạn có thể tùy chọn đặt số lượng hàng và cột khi dùng phần tử này)
5. Vertical Arrangement - Sắp xếp các đối tượng theo chiều dọc
Các bạn có thể đặt phần tử Horizontal bên trong phần tử Vertical và ngược lại để có thể tạo ra những bố cục mong muốn!
Nếu các bạn thấy hữu ích, đừng ngại ngần chia sẻ bài này tới bạn bè của các bạn! Nếu bạn có câu hỏi gì hãy đặt câu hỏi ngay tại đây, mình sẽ trả lời sớm nhất có thể! Nếu có thiếu sót gì, các bạn hãy đóng góp ý kiến để những bài hướng dẫn sau của mình hoàn thiện hơn nhé !!! {alertInfo}
NOTE: Nội dung trên blog thuộc bản quyền của KIN. Vui lòng để lại nguồn khi bạn muốn sao chép! Xin cảm ơn :) {alertInfo}