Giao diện 3d tuyệt đẹp cho android

     

Ứng dụng phitienkiem.com hỗ trợ hệ sinh thái xanh không chấm dứt mở rộng của các yếu tố mẫu mã thiết bị. Giao diện người tiêu dùng của áp dụng phải ưng ý ứng cùng với nhiều size màn hình cũng giống như hướng với trạng thái thiết bị.

Bạn đang xem: Giao diện 3d tuyệt đẹp cho android

Giao diện người dùng thích ứng triệu tập vào các nguyên tắc linh hoạt cùng liên tục.

Tính linh hoạt tức là việc bố cục sử dụng tối ưu không khí có sẵn và điều chỉnh khi không khí thay đổi. Có rất nhiều cách điều chỉnh: đơn giản như tăng size của thành phần hiển thị, để lại địa chỉ để dễ dàng tiếp xúc thành phần hiển thị đó hơn, hiện tại hoặc ẩn các thành phần hiển thị bổ sung hoặc phối hợp các biện pháp này.

Tính liên tục tức là trải nghiệm người dùng liền mạch khi chuyển đổi từ kích cỡ cửa sổ này sang kích thước cửa sổ khác. Trải nghiệm hiện tại của người tiêu dùng tiếp tục ra mắt mà không bị gián đoạn. Vày sự biến hóa về kích thước hoàn toàn có thể khiến toàn bộ hệ phân cấp thành phần hiển thị bị huỷ vứt và tái tạo, phải điều đặc biệt quan trọng là người dùng không bị mất vị trí hoặc dữ liệu của họ.

Những điều nên tránh

Tránh áp dụng giá trị thứ lý, phần cứng để lấy ra quyết định về bố cục. Vấn đề đưa ra quyết định dựa bên trên một giá trị thắt chặt và cố định có thể hấp dẫn, nhưng trong vô số nhiều trường hợp, các giá trị này không hữu ích khi xác định không gian hoạt động của giao diện tín đồ dùng.

Trên máy vi tính bảng, ứng dụng có thể chạy ở chế độ nhiều hành lang cửa số khi share màn hình cùng với một vận dụng khác. Bên trên Chrome OS, áp dụng nằm vào một cửa sổ có thể chuyển đổi kích thước. Thậm chí có không ít hơn một màn hình hiển thị vật lý, chẳng hạn như với thiết bị rất có thể gập lại hoặc thiết bị có không ít màn hình. Trong số những trường hòa hợp như vậy, size màn hình thực tiễn không liên quan đến việc đưa ra quyết định nội dung hiển thị.

*
Hình 1. kích cỡ cửa sổ có thể khác với kích thước màn hình hoặc sản phẩm công nghệ thực tế.

Do đó, hãy tránh việc khoá ứng dụng theo một phía hoặc tỷ lệ cơ thể cụ thể. Tuy nhiên thiết bị rất có thể nằm tại 1 hướng nỗ lực thể, vận dụng cũng có thể ở 1 hướng khác dựa trên form size của cửa ngõ sổ. Chẳng hạn như trên máy vi tính bảng nằm ngang lúc sử dụng chế độ nhiều cửa ngõ sổ, ứng dụng rất có thể ở chế độ dọc vì chưng ứng dụng cao hơn chiều rộng.

Ngoài ra, tránh cố khẳng định thiết bị là điện thoại cảm ứng hay máy tính xách tay bảng.Tiêu chí nhằm một thứ được xem như là máy tính bảng có phần khá nhà quan: nghĩa là nó dựa trên size hoặc tỷ lệ cơ thể nhất định hay phối hợp cả hai? Khi lộ diện hệ số hình dạng, hồ hết định nghĩa này dễ dàng đổi khác và sự khác biệt đó ko còn quan trọng nữa.

Thay bởi dựa vào bất kỳ tiêu chí như thế nào ở trên, hãy chú ý vào yếu tố điểm ngắt và loại kích cỡ cửa sổ.

Điểm ngắt với lớp kích thước cửa sổ

Phần thực tế của màn hình hiển thị được phân chia cho ứng dụng của chúng ta là hành lang cửa số của ứng dụng hành lang cửa số này có thể chiếm cục bộ màn hình hoặc một phần màn hình. Vày vậy, hãy sử dụng form size cửa sổ khi đưa ra quyết định tổng thể và toàn diện về bố cục của ứng dụng.

Khi xây đắp cho nhiều thông số hình dạng, hãy tìm đông đảo giá trị ngưỡng có thể làm đổi khác phương hướng của rất nhiều quyết định tổng thể như vậy. Để đạt được kim chỉ nam này, chế độ của Material Design chuyển ra các điểm ngắt về chiều rộng cùng chiều cao, có thể chấp nhận được bạn links các form size thô thành những nhóm riêng lẻ được chuẩn hoá gọi là lớp size cửa sổ. Do sự thịnh hành của câu hỏi cuộn theo chiều dọc, số đông ứng dụng chủ yếu chăm nom đến lớp form size chiều rộng, bởi vậy đa số ứng dụng đều rất có thể được về tối ưu hoá mang đến tất cả size màn hình bằng phương pháp chỉ cách xử lý một vài điểm ngắt. (Để biết thêm thông tin về những loại size cửa sổ hãy xem nội dung cung ứng nhiều size màn hình.)

Thành phần định hình trên giao diện người dùng

Nguyên tắc về ba cụcthiết kế Material thiết kế xác xác định trí đến thanh ứng dụng, mục điều hướng và nội dung. Thông thường, hai phần tử đầu tiên là các bộ phận giao diện người tiêu dùng ổn định là gốc rễ (hoặc gần như vậy) của chế độ xem. Chú ý "ổn định" không độc nhất thiết gồm nghĩa là chế độ xem luôn hiển thị, cố gắng vào đó, chính sách này vẫn được không thay đổi trong khi các cơ chế xem câu chữ khác hoàn toàn có thể di đưa hoặc vắt đổi. Chẳng hạn: một phần tử điều hướng có thể nằm trong một sliding drawer (ngăn trượt màn hình) hiện không hiện trên màn hình, mà lại nó luôn có sống đó.

Các phần tử ổn định có thể thích ứng cùng thường chiếm toàn thể chiều rộng hoặc độ cao của cửa ngõ sổ, vì chưng vậy, nên chọn các loại form size để quyết định vị trí đặt các bộ phận đó. Nó vẫn phác họa khoảng trống còn sót lại cho phần nội dung. Trong khúc mã sau đây, vận động sử dụng thanh dưới cùng cho màn hình nhỏ dại gọn cùng thanh áp dụng trên thuộc cho màn hình hiển thị lớn hơn. Bố cục tổng quan đủ đk sử dụng những điểm ngắt chiều rộng như được bộc lộ ở trên.

Nội dung

Sau lúc bạn định vị các yếu tố giao diện người tiêu dùng ổn định, hãy sử dụng không khí còn lại mang lại nội dung, chẳng hạn như sử dụng NavHostFragment cùng với biểu đồ điều hướng của ứng dụng. Hãy xem phầnThao tác trên giao diện người tiêu dùng thích ứng để biết thêm các điểm cần xem xét khác.

Đảm bảo toàn bộ dữ liệu đều sở hữu sẵn cho nhiều kích thước

Hầu hết các khung ứng dụng hiện giờ đều sử dụng mô hình dữ liệu tách bóc biệt với các thành phần apk xây hình thành giao diện người dùng (Hoạt động, miếng và chính sách xem). Với Jetpack, vai trò này thường xuyên được tiến hành bởi ViewModels, lớp này còn có thêm một tiện ích là chất nhận được dữ liệu trường tồn qua các biến đổi về cấu hình (xem phầnTổng quan tiền về ViewModel để hiểu biết thêm thông tin).

Khi tiến hành bố viên thích ứng trên các kích thước, gồm thể bạn có nhu cầu sử dụng một mô hình dữ liệu không giống dựa trên size hiện tại. Mặc dù nhiên, vấn đề này đi ngược lại nguyên tắc luồng dữ liệu một chiều. Tài liệu sẽ truyền xuống cơ chế xem và những sự kiện như lượt địa chỉ của người tiêu dùng sẽ truyền lên.Việc chế tạo ra phần nhờ vào theo hướng khác (tức là quy mô dữ liệu phụ thuộc vào cấu hình của lớp giao diện người dùng) khiến việc này trở nên phức hợp hơn. Khi ứng dụng chuyển đổi kích thước, bạn phải chuyển đổi mô hình dữ liệu sang một mô hình khác.

Thay vào đó, hãy để mô hình dữ liệu kiểm soát và điều chỉnh cho phù hợp với lớp kích thước lớn nhất. Sau đó, bạn cũng có thể hiển thị, ẩn hoặc đặt lại vị trí văn bản trong giao diện người dùng sao cho tương xứng với lớp kích cỡ hiện tại. Dưới đó là một vài ba chiến lược bạn cũng có thể sử dụng khi ra quyết định cách hoạt động vui chơi của bố cục khi chuyển đổi giữa các lớp kích thước.

Mở rộng nội dung

Bố viên chuẩn: Nguồn cung cấp dữ liệu

Không gian mở rộng rất có thể đơn giản là cơ hội để tạo cho mọi thứ to hơn và format lại câu chữ để dễ dàng tiếp cập hơn.

Phóng to cỗ sưu tập.

Xem thêm: Truyện Tranh Âm Dương Sư - Nhóm Thức Thần Toxic Pvp Âm Dương Sư

Nhiều áp dụng hiển thị một tập hợp những mục trong một vùng cất cuộn, ví dụ như RecyclerView hoặc ScrollView. Có thể chấp nhận được một vùng chứa tự động trở nên lớn hơn có nghĩa là có thể cho thấy nhiều nội dung hơn.Tuy nhiên, hãy suy nghĩ nội dung trong vùng cất để không biến thành kéo giãn quá mức cần thiết hoặc bị méo hình. Ví dụ: với RecyclerView, hãy xem xét sử dụng một trình cai quản bố cục khác ví như GridLayoutManager,StaggeredGridLayoutManager, hoặc FlexboxLayout lúc chiều rộng không bé dại gọn.

*
Hình 2. các cách bố trí ứng dụng của những trình làm chủ bố cục dựa vào lớp kích cỡ chiều rộng.

Các mục lẻ tẻ cũng rất có thể sử dụng size hoặc bản thiết kế khác để cho thấy nhiều nội dung hơn và thuận lợi hơn trong bài toán phân biệt các ranh giới của mục.

Nhấn mạnh phần tử chính. Nếu bố cục có một tiêu điểm cố kỉnh thể, chẳng hạn như hình hình ảnh hoặc video, hãy không ngừng mở rộng bố cục đó khi hành lang cửa số ứng dụng mở rộng để bảo trì sự tập trung của fan dùng. Bạn cũng có thể sắp xếp lại các thành phần hỗ trợ khác bao bọc hoặc dưới chế độ coi hình hình ảnh chính.

Có nhiều cách để tạo một bố cục như vậy, dẫu vậy ConstraintLayout quánh biệt cân xứng cho mục đích này do lớp này cung ứng nhiều phương pháp để ràng buộc form size của yếu tắc hiển thị bé (bao gồm cả buộc ràng theo xác suất phần trăm, hoặc thực thi xác suất khung hình) và để tại vị vị trí theo thành phần bé có liên quan hoặc thành phần nhỏ khác. Xem thêm về tất cả các khả năng này trong bài viết Tạo Giao diện người dùng thích ứng bởi ConstraintLayout.

Hiển thị nội dung rất có thể thu gọn gàng theo mặc định. Khi gồm không gian, hãy hiện câu chữ mà thường xuyên thì chỉ truy vấn được thông qua tương tác bổ sung của người dùng như nhấn, cuộn hoặc cử chỉ. Ví dụ: nội dung lộ diện trong đồ họa thẻ lúc thu gọn hoàn toàn có thể được sắp xếp lại thành cột hoặc list khi bao gồm thêm ko gian.

Mở rộng lớn lề. Nếu không khí quá lớn đến cả bạn ko thể tạo nên sự bắt mắt ngay cả sau thời điểm sử dụng tổng thể nội dung, hãy mở rộng lề của bố cục tổng quan để văn bản vẫn ở ở trung tâm và cá nguyên tố hiển thị đơn thân có kích thước và khoảng cách tự nhiên.

Ngoài ra, yếu tố toàn screen có thể biến hóa thành giao diện người tiêu dùng hộp thoại nổi. Điều này sệt biệt phù hợp khi thành phần đó yên cầu tiêu điểm riêng biệt để chấm dứt một nhiệm vụ tức thì cho những người dùng, chẳng hạn như soạn e-mail hoặc chế tạo ra sự kiện trên lịch.

*
Hình 3. hộp thoại toàn màn hình chuyển thành hộp thoại chuẩn với chiều rộng trung bình và mở rộng.

Thêm nội dung

Bố viên chuẩn: Bảng tinh chỉnh và điều khiển hỗ trợ, yếu tố hiển thị cụ thể danh sách

Sử dụng bảng điều khiển hỗ trợ. Bảng điều khiển cung cấp trình bày thêm văn bản hoặc làm việc theo ngữ cảnh liên quan đến ngôn từ chính, chẳng hạn như nhận xét vào một tư liệu hoặc các mục trong danh sách phát nhạc. Thường xuyên thì các loại này sử dụng 1/3 dưới thuộc của màn hình để mở rộng chiều cao hoặc 1/3 cạnh dưới cùng để không ngừng mở rộng chiều rộng.

Một điều quan trọng đặc biệt cần lưu ý là điểm đặt nội dung này khi không có đủ không gian để hiện bảng điều khiển. Sau đấy là một vài phương án sửa chữa thay thế để chúng ta khám phá:

Ngăn bên ở cạnh sau thực hiện DrawerLayoutNgăn bên dưới cùng sử dụng BottomSheetBehaviorBạn hoàn toàn có thể truy cập trình 1-1 hoặc hành lang cửa số bật lên bằng cách nhấn vào biểu tượng trình solo Trình duyệt của bạn không hỗ trợ thẻ clip này. Hình 4. các phương pháp khác để trình diễn nội dung bổ sung trong một bảng tinh chỉnh và điều khiển hỗ trợ.

Tạo bố cục hai ngăn. Các màn hình lớn rất có thể hiển thị phối kết hợp các tài năng thường xuất hiện đơn lẻ trên những màn hình nhỏ tuổi hơn. Cách thức tương tác phổ biến trong nhiều áp dụng là cho biết một danh sách những mục (như danh bạ hoặc hiệu quả tìm kiếm) rồi gửi sang phần chi tiết của một mục khi mục đó được chọn.Thay vị phóng to danh sách cho các màn hình lớn hơn, hãy áp dụng thành phần hiển thị chi tiết về list để cho biết cả hai nhân tài cạnh nhau theo bố cục hai ngăn. Không y hệt như bảng tinh chỉnh hỗ trợ, ngăn chi tiết của yếu tố hiển thị chi tiết về danh sách là một phần tử hòa bình có thể xuất hiện hòa bình trên màn hình bé dại hơn.

Hãy sử dụng tiện ích SlidingPaneLayout dành riêng cho việc xúc tiến thành phần hiển thị cụ thể về danh sách. ứng dụng này auto tính toán coi liệu bao gồm đủ khoảng trống để hiện cả hai phòng này cùng lúc dựa trên giá trị layout_width được hướng dẫn và chỉ định cho hai phòng hay không, và mọi không khí còn lại có thể được phân bố bằng phương pháp sử dụng layout_weight. Lúc không đủ không gian, mỗi chống sẽ sử dụng tổng thể chiều rộng của bố cục và ngăn cụ thể sẽ trượt ra khỏi màn hình hiển thị hoặc sinh hoạt đầu chống danh sách.


Chuyên mục: Tin Tức