Hướng dẫn thiết kế bố cục Android: Mọi thứ bạn cần biết

Hướng dẫn thiết kế bố cục Android này sẽ giúp bạn hiểu cách bố trí có thể được thiết kế bằng cách sử dụng các khung nhìn và nhóm xem với bản trình diễn.

Nếu bạn là người mới , bạn đã đến nơi hoàn hảo để bắt đầu tìm hiểu về thiết kế bố cục. Bài viết này về hướng dẫn thiết kế bố cục Android sẽ giúp bạn theo đuổimột số mẹo hữu ích để thiết kế giao diện người dùng tốt hơn và cũng giải thích cách thiết kế giao diện người dùng.

Tôi sẽ thảo luận về các chủ đề dưới đây:





Vậy hãy bắt đầu!

thẻ html để chèn dấu ngắt dòng

Hướng dẫn thiết kế bố cục Android: Giới thiệu về các thành phần giao diện người dùng

Nói về các thành phần giao diện người dùng, giao diện người dùng điển hình của bất kỳ ứng dụng Android nào bao gồm các thành phần sau:



  • Thanh hành động chính
  • Xem điều khiển
  • Khu vực nội dung
  • Thanh tác vụ tách

Chúng đóng một vai trò quan trọng trong khi bạn đang phát triển một ứng dụng phức tạp. Bạn sẽ thấy rõ điều này khi chúng ta đến phần demo của bài viết này.

Một yếu tố quan trọng khác giúp tùy chỉnh thiết kế giao diện người dùng là thành phần chế độ xem.

Hãy xem Chế độ xem trong



Hướng dẫn thiết kế bố cục Android: Lượt xem

ĐẾN Lượt xem được coi là khối xây dựng cơ bản cho một giao diện người dùng phù hợp thực sự được tạo ra từ Xem lớp học . Điều này chiếm một vùng hình chữ nhật trên màn hình và cuối cùng sẽ được xử lý bằng cách vẽ và xử lý sự kiện.

Chế độ xem là lớp cơ sở cho các tiện ích con, được sử dụng để tạo các thành phần giao diện người dùng tương tác như nút, trường văn bản, v.v. Bây giờ nói về vùng hình chữ nhật hoặc hộp, nó có thể là một hình ảnh, một đoạn văn bản, một nút hoặc bất kỳ thứ gì mà ứng dụng Android có thể hiển thị. Hình chữ nhật ở đây thực sự là vô hình, nhưng mọi chế độ xem đều chiếm một hình chữ nhật.

Bạn có thể có một câu hỏi, kích thước của hình chữ nhật này là bao nhiêu?

Câu trả lời là bạn có thể đặt nó theo cách thủ công bằng cách chỉ định kích thước chính xác (với các đơn vị thích hợp) hoặc bằng cách sử dụng một số giá trị được xác định trước. Các giá trị được xác định trước này là match_parent và wrap_content. Điều này match_parent biểu thị rằng nó sẽ chiếm toàn bộ không gian có sẵn trên màn hình của thiết bị. Trong khi, wrap_content đề cập đến rằng nó sẽ chỉ chiếm khoảng không gian cần thiết để hiển thị nội dung của nó.

Bây giờ, hãy chỉ ra những điểm khác biệt chính giữa View và ViewGroup.

Lượt xem

  1. Lượt xem các đối tượng là các khối xây dựng cơ bản của các phần tử giao diện người dùng trong Android.
  2. Chế độ xem là một hộp hình chữ nhật đơn giản phản hồi các hành động của người dùng.
  3. View đề cập đến lớp android.view.View, là lớp cơ sở của tất cả các lớp UI.
  4. Ví dụ như EditText, Button, CheckBox, v.v.

ViewGroup

  1. ViewGroup là vùng chứa ẩn chứa View và ViewGroup.
  2. ViewGroup là lớp cơ sở cho Bố cục .
  3. Ví dụ, LinearLayout là ViewGroup có chứa Nút (View) và các Layout khác cũng có.

Bây giờ chúng ta hãy tiếp tục và hiểu các Bố cục hiện có.

Hướng dẫn thiết kế bố cục Android: Các loại bố cục

ĐẾN bố trí xác định cấu trúc cho Giao diện người dùng trong ứng dụng. Tất cả các phần tử trong bố cục được xây dựng bằng cách sử dụng hệ thống phân cấp Lượt xemViewGroup các đối tượng.

Bây giờ, hãy xem cách khai báo bố cục.

Bạn có thể khai báo một bố cục theo hai cách:

  • Khai báo các phần tử giao diện người dùng trong XML. Android cung cấp một kho từ vựng XML đơn giản tương ứng với các lớp View và lớp con, chẳng hạn như các lớp dành cho widget và layout.

Ghi chú: Bạn cũng có thể sử dụng Trình chỉnh sửa bố cục của Android Studio để xây dựng bố cục XML của mình bằng giao diện kéo và thả.

  • Khởi tạo các phần tử bố cục tại thời gian chạy . Ứng dụng có thể tạo Lượt xemViewGroup các đối tượng và thao tác các thuộc tính của chúng theo lập trình.

Hãy thảo luận về các loại Bố cục khác nhau.

Giao diện người dùng trong Android là một hệ thống phân cấp Chế độ xem và Nhóm xem. Các ViewGroup sẽ là các nút trung gian trong hệ thống phân cấp và các khung nhìn sẽ là các nút đầu cuối.

  • Bố cục tuyến tính
  • Bố cục tuyệt đối
  • Giao diện tương đối
  • Bố cục bảng
  • Bố cục khung

Hãy thảo luận chi tiết về chúng.

Bố cục tuyến tính

Bố cục tuyến tính được sử dụng để đặt một phần tử trên mỗi dòng. Vì vậy, tất cả các yếu tố sẽ được đặt theo thứ tự từ trên xuống dưới. Đây là một bố cục được sử dụng rất rộng rãi để tạo biểu mẫu trên Android. Nó cũng có thể được gọi là một nhóm chế độ xem sắp xếp tất cả các trẻ em theo một hướng duy nhất, theo chiều dọc hoặc chiều ngang.

Bố cục tuyệt đối

Trong bố cục tuyệt đối, bạn có thể chỉ định tọa độ chính xác của từng điều khiển mà bạn muốn đặt. Trong kiểu bố trí này, bạn có thể cung cấp tọa độ X và Y chính xác của mỗi điều khiển. Nó cho phép bạn xác định vị trí chính xác của các con của nó.

Giao diện tương đối

Bố cục tương đối là ViewGroup hiển thị các chế độ xem con ở các vị trí tương đối. Bạncó thể chỉ định vị trí của các phần tử trong mối quan hệ với các phần tử khác hoặc trong mối quan hệ với vùng chứa mẹ.

Bố cục bảng

Sử dụng bố cục bảng, bạn có thể tạo một bảng với các hàng và cột và đặt các phần tử bên trong chúng. Trong mỗi hàng, bạn có thể chỉ định một hoặc nhiều phần tử. Bạn có thể sử dụng lệnh này để tạo một bố cục bảng mới.

Bố cục khung

Bố cục Khung được sử dụng khi bạn muốn hiển thị một mục trên mỗi màn hình. Sử dụng bố cục khung, bạn có thể có nhiều mục.Bố cục Khung này là một chỗ dành sẵn trên màn hình mà bạn có thể sử dụng để hiển thị một dạng xem.

Hướng dẫn thiết kế bố cục Android: Đơn vị đo lường

Khi bạn chỉ định kích thước của một phần tử trên giao diện người dùng Android, bạn chắc chắn nên nhớ các đơn vị đo lường sau.

Đơn vị Sự miêu tả
dp Điểm ảnh độc lập mật độ. 1dp tương đương với một pixel trên 160dpi màn.
sp Điểm ảnh độc lập quy mô. Điều này rất giống với dp nhưng chỉ là điều này được khuyến nghị để chỉ định kích thước phông chữ.
pt Điểm. Một điểm được xác định là 1/72 inch.
px Pixel. Tương ứng với pixel thực tế trên màn hình

Bây giờ, hãy chuyển sang chủ đề cuối cùng của bài viết này.

Hướng dẫn thiết kế bố cục Android: Bản giới thiệu

Trong phần demo này, hãy hiểu cách làm việc với các bố cục trong Android Studio .

Tham khảo sang Android Studio.

Đây là cách bố trí trông như thế nào. Chỉ cần chọn có thể vẽ và bạn sẽ tìm thấy một vài lớp, chọn bất kỳ lớp nào khác trong lớp có thể vẽ này. Bạn có thể viết mã cấu trúc bố cục hoặc bạn có thể xem thiết kế và chỉ cần kéo và thả các thành phần trên không gian thiết kế.

Demo - Hướng dẫn thiết kế bố cục Android - Edureka

Bạn có thể xem các thành phần mà bạn đã chọn trong cây thành phần.

Bạn cũng có thể tìm thấy những thứ này trong bố cục.

  1. Bảng màu : Điều này chứa danh sách dạng xem và nhóm dạng xem mà bạn có thể kéo vào bố cục của mình.
  2. Thành phần Cây : Bao gồm phân cấp Chế độ xem cho bố cục của bạn.
  3. Thanh công cụ : Các nút để định cấu hình giao diện bố cục trong trình chỉnh sửa và thay đổi một vài thuộc tính bố cục.
  4. Biên tập thiết kế : Bố cục trong dạng xem Thiết kế hoặc Kế hoạch chi tiết hoặc cả hai. Cũng được coi là không gian thiết kế.
  5. Thuộc tính : Nó kiểm soát các thuộc tính của chế độ xem đã chọn.

Với điều này, chúng ta sẽ đến phần cuối của bài viết này về “Hướng dẫn thiết kế bố cục Android”. Hy vọng các bạn đã rõ với những gì đã được chia sẻ với bạn trong hướng dẫn này.Hãy theo dõi các blog khác và Chúc may mắn với sự nghiệp Phát triển Android của bạn.

Bây giờ bạn đã hiểu cơ bản về Thiết kế bố cục Android, hãy xem của Edureka, một công ty học trực tuyến đáng tin cậy với mạng lưới hơn 250.000 người học hài lòng trải dài trên toàn cầu.

Khóa đào tạo Chứng chỉ Phát triển Ứng dụng Android của Edureka được thiết kế cho sinh viên và các chuyên gia muốn trở thành Nhà phát triển Android. Khóa học được thiết kế để cung cấp cho bạn khởi đầu về lập trình Java và đào tạo bạn về cả khái niệm cốt lõi và nâng cao cùng với một dự án mà bạn dự kiến ​​sẽ tạo một Ứng dụng trong Android.

Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của blog “Hướng dẫn thiết kế bố cục Android” này và chúng tôi sẽ liên hệ lại với bạn trong thời gian sớm nhất.