Thiết kế cho những thiết bị khác nhau

Giao diện người dùng (user interfaces – UI) của các ứng dụng app android phải được thiết kế sao cho tương thích với với các thiết bị di động như điện thoại thông minh thông minh hay máy tính bảng có kích thước khác nhau. Xung quanh ra, từng thiết bị lại sở hữu hai cơ chế xem là portrait (hướng dọc) cùng landscape (hướng ngang) đề xuất giao diện vận dụng cũng cần biến đổi một cách tương ứng với từng chế độ.Bạn vẫn xem: xây dựng giao diện android đẹp

Views và views group

Một giao diện người tiêu dùng của ứng dụng game android được tạo thành thành vì nhiều bộ phận khác nhau. Mỗi phần tử trên giao diện là 1 trong những lớp nhỏ của lớp View (android.view.View). Các views trong Android còn gọi là các widgets giỏi components. Android SDK cung ứng nhiều views được chế tạo sẵn cung cấp cho việc xây cất giao diện như Button, CheckBox, TextView, v.v.

Bạn đang xem: Thiết kế giao diện android

Mỗi view có thể chứa nhiều views khác, bây giờ chúng ta gọi là view group. Mỗi view group là lớp con của lớp ViewGroup (android.view.ViewGroup) cùng ViewGroup lại là lớp con của lớp View. Một lấy ví dụ về ViewGroup có sẵn là RadioGroup chứa những RadioButton.

Một dạng không giống của ViewGroup là layout manager (trình quản lý layout).

Layout managers

Một layout là 1 trong dạng của ViewGroup yêu cầu cũng là lớp con của lớp ViewGroup. Trách nhiệm của layout là kiểm soát phương pháp các thành phần xuất xắc views được xác định trong đồ họa màn hình.

Android SDK hỗ trợ một số layouts cung cấp cho việc thi công giao diện gồm:

ConstraintLayout (hỗ trợ từ apk Studio 3.0 hay app android 8)LinearLayoutTableLayoutFrameLayoutGridLayoutRelativeLayoutAssoluteLayoutCoordinatorLayout

Một số layout ko được khuyên cần sử dụng như AbsoluteLayout vày tính “cứng nhắc” của nó hay một số layout sẽ lỗi thời như CoordinatorLayout. Những layout sẽ tiến hành đề cập kĩ hơn trong các bài viết sau này.

Thiết kế giao diện bạn dùng

Chúng ta rất có thể thiết kế hình ảnh cho ứng dụng trong môi trường Android Studio 3.X theo 3 biện pháp (còn một giải pháp khác là phối hợp các biện pháp này):

Dùng các view được xây cất sẵn: hoàn toàn có thể dùng những views trường đoản cú thanh phương tiện PaletteDùng ngôn từ XMLDùng java

Thông thường họ dùng các views tự thanh Palette và thỉnh thoảng xây cất hay điều chỉnh lại bối cảnh bằng ngôn ngữ XML, và một số trong những ít ngôi trường hợp dùng Java. Trong các ứng dụng apk phức tạp, xây dựng giao diện là việc kết hợp biến hóa năng động giữa những cách trên.

Xem thêm: Bài: Ứng Dụng Công Nghệ Vi Sinh Trong Sản Xuất Phân Bón

Hệ thống các views

Các views bên trên một giao diện người tiêu dùng được tổ chức theo một khối hệ thống thứ bậc những views (giống như một hệ thống thư mục). Các views trên một đồ họa được chứa trong một view duy nhất điện thoại tư vấn là view nơi bắt đầu (giống như folder gốc). Việc tổ chức khối hệ thống các views như thế nào tùy ở trong vào hình ảnh của mỗi ứng dụng, cách nhìn của người xây dựng và từ đầu đến chân dùng. Ví dụ hình ảnh một ứng dụng đơn giản như sau:


*

*

View gốc là một trong RelativeLayout cất hai layout khác là LinearLayout (chứa nhì Button) và TableLayout (chứa tứ CheckBox). Chúng ta cũng có thể thể hiện kết cấu trên theo hình thức cây như sau:


*

Tạo dự án mới

Đầu tiên, bọn họ sẽ chế tạo ra một dự án mới với tên là LayoutSample với những thông tin như hình sau:


*

Nhấn Next. Lựa chọn API 14 tự mục Phone và Tablet và nhấn Next. Vào phần Add an Activity lớn Mobile, chúng ta sẽ không chọn Activity nào bằng phương pháp chọn Add No Activity:


*

Nhấn Finish.

Tạo một Activity

Do nghỉ ngơi trên họ đã không lựa chọn một Activity làm sao từ danh sách các mẫu Activity nên họ phải tự sinh sản một Activity mới. Giao diện vận dụng LayoutSample thời điểm này:


Chọn folder app > java > com.khanhhoatrip.com.layoutsample và click chuột phải thư mục này chọn New > Activity > Empty Activity:


Trong vỏ hộp thoại New game android Activity nhập thương hiệu Activity trên Activity NameLayoutSampleActivityLayout Name tương xứng là activity_layout_sample. Bọn họ cũng phải chọn checkbox Generate Layout File nhằm phát sinh tập tin tài nguyên của layout. Tùy lựa chọn Launcher Activity đến phép họ chọn Activity nào đã xuất hiện trước tiên khi một ứng dụng có khá nhiều Activity. Vì vận dụng của họ chỉ gồm một Activity nên những khi ứng dụng được cài xuống thiết bị họ muốn Activity hiện tại tại xuất hiện thêm nên checkbox Launcher Activity cần được chọn


Nhấn Finish.

Lúc này, game android Studio đã thêm một số tập tin cho dự án. Một tập tin java (LayoutSampleActivity.java) sẽ tiến hành thêm mang lại thư mục app > java > com.khanhhoatrip.com.layoutsample:


Một tập tin XML (activity_layout_sample.xml) phát sinh layout ứng dụng trong thư mục app > res > layout:


Và một tập tin XML khác chứa các thông tin về Activity là AndroidManifest.xml cũng khá được thêm mang đến thư mục app > manifests:


Nội dung của tập tin này như sau:

Không gian kiến tạo giao diện app android Studio

Mở tập tin activity_layout_sample.xml bằng phương pháp tìm mang lại thư mục app > res > layout và nhấp đôi chuột vào tập tin activity_layout_sample.xml. Mang định, các thành phần (views) vào giao diện áp dụng của bọn họ sẽ được tổ chức trong một ConstraintLayout. Rất có thể dễ dàng thấy điều này bằng phương pháp chọn chế độ Text giúp xem mã XML của tập tin activity_layout_sample.xml:


Mã XML như sau:

Chúng ta hoàn toàn có thể thêm bất kể thành phần như thế nào như Button, TextView, v.v. đến bối cảnh vào thân cặp và . Tuy nhiên, để đơn giản hơn, họ sẽ kiến thiết giao diện vận dụng trong chính sách Design:


Mặc định, trong chế độ Design bọn họ sẽ có hai khung nhìn là Design – mang đến phép họ xem trước giao diện trên những thiết bị thực – và Blueprint – chỉ là phác thảo giao diện:


Chúng ta hoàn toàn có thể xem thông tin hay đổi khác không gian kiến thiết nhờ thanh công cụ phía bên trên hai size nhìn:


Có thể chỉ chọn khung chú ý Design hay chỉ chọn khung quan sát Blueprint hay lựa chọn cả hai cùng lúc (mặc định) bằng cách vào mục Select thiết kế Surface (B) trên thanh công cụ:


Có thể thay đổi hướng khung quan sát như Potrait (mặc định) tốt Landscape và một trong những tùy lựa chọn khác bằng phương pháp vào mục Orientation in Editor (O) bên trên thanh công cụ:


Chúng ta cũng hoàn toàn có thể xem hay điều chỉnh thông tin về máy (trong trường thích hợp của họ là Nexus 4), về phiên phiên bản API (trong trường đúng theo của bọn họ là API 27), theme (trong trường vừa lòng của chúng ta là AppTheme), phóng to tuyệt thu bé dại khung nhìn, v.v.

Bên cạnh những khung nhìn như Design xuất xắc Blueprint, thanh công cụ, không gian thiết kế trong game android Studio còn hỗ trợ thanh Palette chứa những thành phần cơ bạn dạng trong một hình ảnh như Button, TextView, v.v. Với khung Component Tree giúp bọn họ kiểm soát kết cấu của bối cảnh đang thiết kế:


Chúng ta hoàn toàn có thể ẩn hai size PaletteComponent Tree bằng cách nhấn vào nút mũi tên mặt góc đề nghị trên của từng khung:


Mỗi thành phần trong UI sẽ có nhiều thuộc tính khác nhau và họ sẽ tìm hiểu về bọn chúng trong phần sau của nội dung bài viết này tuyệt các bài viết kế tiếp.

Thiết kế giao diện

Android Studio hỗ trợ họ thiết kế bối cảnh bằng nhiều cách như dùng mã Java, viết mã XML giỏi dùng các công thế trực quan. Trong phần này họ sẽ mày mò cách xây đắp bằng cách thức trực quan tiền và bằng mã XML; tạo thành giao diện bằng mã Java sẽ được mày mò trong các bài sau.

Dùng pháp luật trực quan

Trở lại tập tin activity_layout_sample.xml trong cơ chế Design. Trong bài Dạo quanh ứng dụng apk trong apk Studio 3.X họ đã khám phá qua cách xây đắp một giao diện bạn dùng dễ dàng và đơn giản dùng những thành phần từ thanh Palette, cách xác định và tự khắc phụ các lỗi hay cảnh báo khi thêm một nguyên tố như Button xuất xắc TextView mang đến khung chú ý Design. Trong phần này sẽ không còn đề cập lại các khía cạnh trên. Bạn có thể xem lại nội dung bài viết này.

Thêm một Button tự mục Common bên trên thanh Palette mang đến khung nhìn Design. Định vị lại Button trên size nhìn:


Mở tập tin strings.xml trong thư mục app > res > values cùng thêm cái mã XML sau:

LayoutSample Press MeĐóng tập tin strings.xml và quay lại tập tin activity_layout_sample.xml trong chính sách Design. Lựa chọn Button và thay đổi thông tin các thuộc tính ID cùng text (mục TextView) của Button này trong form Attributes khớp ứng là btnPress với