Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Adaptive Design
Code

Giới thiệu về adaptive design

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Gần đây, Apple đã thúc đẩy các nhà phát triển tạo ra các ứng dụng iOS phổ biến. Tại WWDC 12, Auto Layout trên iOS đã được phát hành và có cải tiến trong iOS 7. Và hiện giờ với iOS 8, adaptive design (thiết kế thích ứng) được giới thiệu, với vài API mới và những tiến bộ của Interface Builder để quảng bá cho việc phát triển.

Trong hướng dẫn này, chúng ta sẻ xem xét adaptive design thực ra là gì và cách sử dụng những khái niệm của nó. Khi kết thúc hướng dẫn, bạn sẽ có thể dùng adaptive design để tạo các ứng dụng phổ biến với một quy trình làm việc trực quan. Chúng ta sẽ dùng size class mới để tạo một ứng dụng cho cửa hàng máy tính hoạt động trên tất cả thiết bị.

1. Adaptive design là gì?

Adaptive design gồm một số ý tưởng và kỹ thuật mới thay vì chỉ là một API riêng lẻ. Vài thành phần của adaptive design gồm có các trait collection, size class, adaptive font, Auto Layout, và nhiều nữa. Chủ yếu adaptive design tồn tại để giúp người phát triển tạo các ứng dụng phổ biến và được bản địa hoá dễ dàng.

Nếu bạn đang phát triển ứng dụng iOS vài năm, bạn có thể nhận ra vì sao adaptive design trở nên hữu ích. Autoresize mask nhanh chóng tách rời, việc theo dõi các phương hướng có thể tẻ nhạt và việc phát triển các đường dẫn code khác nhau dựa trên loại thiết bị không thể mở rộng được. Adaptive design chủ yếu chỉ ra những vấn đề này.

Giờ bạn đã định nghĩa adaptive design là gì và tại sao chúng ta nên sử dụng nó, tải về dự án mẫu để bắt đầu.

2. Size Class

Size class là tính năng marquee của adaptive design. Sử dụng chúng cho phép bạn huỷ bỏ code và logic để điều chỉnh cho nhiều kích thước màn hình, phương hướng, hoặc các thiết bị cụ thể. Điều này cũng làm cho việc chỉ cần một giao diện cho tất cả thiết bị trở thành khả thi.

Có 2 loại size class: compactregular. Mỗi loại size class được diễn tả theo chiều dọc hoặc chiều ngang, và mỗi thiết bị được gán một size class cho cả hai hướng. Một regular size đại diện cho một số lượng lớn mạn hình, chẳng hạn như trên iPad. Đồng thời cũng là những hình mẫu giao diện mang đến ảo tưởng về không gian vượt quá mức qui định, giống như scroll view trên iPhone.

Mặt khác, kích thước màn hình "compact" bao hàm một không gian nhỏ hơn. iPhone và iPod Touch nhìn chung sẽ phù hợp với loại này. Tuy nhiên, đó không là một quy tắc tất yếu. Ví dụ, iPhone 6 Plus hỗ trợ regular size class theo chiều ngang. Bảng sau đây liệt kệ các thiết bị iOS và kích thước tương ứng của chúng:


Theo chiều dọc Theo chiều ngang
iPhone Portrait Regular (bình thường) Compact (ngắn gọn)
iPhone Landscape Compact Compact
iPhone 6 Plus Landscape Compact Regular
iPad Portrait Regular Regular
iPad Landscape Regular Regular

Bước 1: Chọn 1 Size Class trong Interface Builder

Mở Main.storyboard trong dự án. Bạn sẽ thấy canvas có hình chữ nhật. Điều này thực sự hiển thị một thành phần cốt lõi của adaptive design. Nhìn xuống bên dưới của Interface Builder, bạn sẽ thấy một button có tên wAny hAny.

Có nghĩa là Any Width, Any Height, điều này báo hiệu rằng bất kể thay đổi nào trong giao diện người dùng ở đây sẽ được áp dụng cho từng size class. Nếu bạn click vào button, một grid xuất hiện cho phép bạn chuyển đổi giữa các size class khác nhau:

Trong ví dụ bên trên, Compact Width | Compact Height được chọn lựa và có một chấm xanh lục trong grid màu xanh dương. Chấm xanh lục thể hiện cho biết kích thước mà size class đại diện. Trong tình huống này, các thay đổi chỉ áp dụng cho iPhone có màn hình 3.5, 4 và 4.7 inch ở chế độ landscape.

Chú ý rằng có sử khác biệt nhỏ trong từ ngữ, Interface Builder sử dụng widthheight trong khi size class dùng horizontalvertical. Width tương ứng với horizontal và height tương ứng với vertical.

Nếu bạn thay đổi size class đang chọn hiện tại, hãy chắc chắn chuyển về Any Width | Any Height.

Bước 2: Bổ sung một hình ảnh

Kéo khung nhìn ảnh vào canvas của khung nhìn controller từ Object Library. Sử dụng Size Inspector, thiết lập vị trí X thành 0 point và vị trí Y thành 72 point. Thiết lập width thành 800 point và height thành 218 point. Mở Attribute Inspector và thay đổi mode của view thành aspect fitimage thành "Laptop". Canvas của bạn sẽ giống như hình bên dưới:

Bước 3: Bổ sung một label

Mở Object Library lần nữa và kéo một label vào canvas. Mở Size Inspector và thiết lập vị trí X của label thành 16 point và vị trí Y thành 312 point. Cho kích thước, xét width thành 568 point và height thành 242 point.

Trong Attribute Inspector, hãy thay đổi như sau:

  • xét Text thành "Silver Laptop"
  • đổi Font Size thành System 100.0 point
  • xét Alignment thành Center
  • xét Lines thành 0

Bước 4: Bổ sung các constraint

Giờ ta sẽ bổ sung các constraint cho label và image. Ở dưới cùng của Interface Builder, click Reset to Suggested Constraint bên dưới mục All Views in View Controller. Nếu chọn lựa trở nên xám màu, hãy bảo đảm một trong các view trong canvas đã được chọn.

Khi image view có cùng background trắng với containing view, chúng ta sẽ thay đổi màu background của view để dễ dàng phân biệt giữa hai view này. Chọn View từ document outline và đổi background color thành Group Table View Background Color.

Bước 5: Build và run

Trên cùng của Xcode, chọn iPad Retina để dùng cho iOS simulator (trình giả lập). Build và chạy ứng dụng bằng tổ hợp Command + R. Ứng dụng có vẻ ổn trên iPad, nhưng chúng ta muốn chắc chắn nó hiển thị tốt trên tất cả thiết bị.

3. Live Preview

Xây dựng và chạy ứng dụng của bạn chỉ cho thấy giao diện người dùng sẽ như thế nào rõ ràng là nhiệm vụ nhàm chán. Thật may, Xcode 8 đã bổ sung khả năng xem live (trực tiếp) cho giao diện người dùng trên bất ky thiết bị nào theo mọi hướng. Nó giúp ta giải quyết bất kỳ vấn đề về auto layout nhanh hơn việc chạy ứng dụng trên iOS simulator.

Bước 1: Kích hoạt hỗ trợ Preview

Trên cùng của Xcode, click vào button Assistant Editor.

Điều này chia editor của Xcode thành 2 bảng. Trong bảng bên phải, chọn Automatic > Preview > Main.storyboard trong jump bar.

Bước 2: Bổ sung các thiết bị thành Preview

Interface Builder hiện giờ thể hiện live preview (bản xem trước trực tiếp) của giao diên người dùng trên một iPhone 4 inch. Như dự đoán, giao diện người dùng không lý tưởng bằng iPhone. Nếu bạn chưa thấy gì trong preview, thì hãy click vào view controller trong bảng bên trái để tải lại.

Trong bảng bên phải, click vào button + ở dưới cùng cho phép bạn bổ sung thêm thiết bị để xem trước. Tiếp tục và bổ sung thêm iPad.

Bước 3: Chuyển đổi hướng hiển thị

Di chuyển trên iPhone trong assistant editor về hướng bên dưới. Bên trái tên thiết bị, có một button để chuyển hướng hiển thị. Click một lần để chuyển chế độ xem trước của iPhone thành hướng landscape.

Với hướng landscape, giao diện người dùng trông còn tệ hơn. Image view hoàn toàn không hiển thị và nội dung của label lại quá to.

4. Cài đặt các constraint cụ thể cho Size Class

Để sửa giao diện người dùng, chúng ta sẽ bổ sung một vài constraint dành riêng cho một size class cụ thể. Đây là một lợi thế khác của adaptive design. Chúng ta có thể xem giao diện người dùng nên bố trí view như thế nào cho các size class nhất định, sử dụng cùng storyboard. Trước đó, sẽ yêu cầu hai storyboard khác nhau và tải storyboard chính xác lúc runtime.

Bước 1: Bổ sung constraint Image VIew Base

Đầu tiên chúng ta sẽ bổ sung các constraint phù hợp với đa số thiết bị và điều chỉnh từ đây. Bắt đầu bằng việc xoá bỏ các constraint được bổ sung trước đó bằng cách click vào bất kỳ view nào trong canvas và chọn Editor > Resolve Auto Layout Issues > All Views in View Controller - Clear Constraints.

Chọn image view, click vào button Align, chọn Horizontal Center in Container, và click vào Add 1 Constraint.

Mở constraint mà ta vừa thêm vào trong Size Inspector ở bên phải và double-click nó để điều chỉnh.

Ràng buộc có trung tâm của superview bằng với trung tâm của image view, nhưng chúng tôi muốn điều ngược lại. Click vào Second Item và chọn Reverse First And Second Item để hiệu chỉnh.

Tiếp đến, nhấn Control và kéo image view vào View bên trong document outline ở bên trái, và chọn Equal Heights. Chọn constraint trong Size Inspector và thay đổi multiplier thành 0.4. Việc này sẽ ép chiều cao của image view bằng với chiều cao của superview hoặc ít nhất 40% của nó - tuỳ theo view ngắn hơn.

Tiếp theo, click vào button Pin và chọn topbottom spacing đến vị trí lân cận gần nhất. Với bottom spacing, nhập 18 point. Top spacing nên được xét thành 0 point. Bảo đảm rằng Constrain to margins chưa được chọn khi chúng ta không muốn vùng đệm xung quanh view. Click vào Add 2 Constraints ở phía dưới cùng để bổ sung thêm constraint.

Double-click vào Bottom Space trong Size Inspector để điều chỉnh. Thay đổi Relation thành Greater Than or Equal. Để hoàn tất các constraint của image view, Control và kéo từ image view sang label và chọn Equal Heights.

Constraints cho image view sẽ giống như vậy:

Bước 2: Bổ sung Label Base Constraints

Bởi vì constraints được bổ sung vào image view, label đã có height và vertical spacing từ image view. Chọn label và click vào button Pin để bổ sung leading, trailing, và vertical spacing constraint như đã hiển thị bên dưới.

Nếu bạn xem trước ứng dụng trong assistant editor, constraints đã giúp mọi thứ trông khá hơn nhiều. Tuy vậy, vẫn còn một vấn đề khi ứng dụng dùng compact size class theo chiều ngang như bạn thấy bên dưới (ở giữa).

Trong trường hợp này, sẽ rất tốt khi có image view nằm bên cạnh label thay vị nằm lên trên nhau.

Bước 3: Bổ sung Compact Horizontal Constraint

Sử dụng button bật tắt size class ở phía dưới, chọn Compact Width | Compact Height. Thanh này chuyển thành màu xanh lam để cho biết bạn hiện đang chỉnh sửa giao diện người dùng cho một size class cụ thể.

Chọn image view, mở Size Inspector, và cập nhật khung hình của nó như hình bên dưới.

Tiếp theo, chọn label và cập nhật khung hình của nó trong Size Inspector như bên dưới.

Với label vẫn đang chọn và Size Inspector đang được mở, chọn constraint của label và xoá bỏ chúng bằng cách nhấn Delete. Bạn có thể chọn nhiều constraint bằng cách giữ phím Shift khi chọn. Nó sẽ xoá constraint mà bạn đã thêm vào, nhưng chỉ áp dụng cho size class này.

Thực hiện tương tự cho image view bằng cách chọn nó, mở Size Inspector, chọn constraint của nó, và nhấn Delete. Chúng ta sẽ bổ sung constraint và bảo đảm rằng image view và label được đặt cạnh nhau.

Thật may, Xcode có thể dễ dàng tính toán các constraint này cho chúng ta. Với image view hoặc label đang được chọn, chọn Editor > Resolve Auto Layout Issues > All Views in View Controller - Reset to Suggested Constraints.

Bước 5: Constraint cập nhật cho bản xem trước

Mở Size Inspector cho image view. Bạn sẽ thấy rằng có nhiều constraint được liệt kê, nhưng một vài cái bị xám màu và số khác thì không bị. Điều này báo hiệu constraint nào đang được kích hoạt cho size class hiện thời.

Nếu bạn double-click vào bất kỳ cái này, phần bên dưới cho chúng ta thấy size class nào đang áp dụng những constraint đó. Hình bên dưới cho thấy constraint được cài đặt cho Compact Width | Compact Height và vô hiệu cho Regular Width | Regular Height. Click vào button x hoặc + sẽ kích hoạt hoặc vô hiệu constraint cho size class đã chọn.

Mở Preview Assitant Editor lần nữa và bổ sung iPhone 3.5 Inch ở chế độ landscape nếu chưa có chọn lựa này. Có thể thấy chúng ta đã hoàn thành một layout hoàn toàn khác biệt cho những thiết bị cụ thể theo hướng landscape.

5. Dynamic Text

Điều cuối cùng cần thay đổi là kích thước font. Khi những khung hình thực sự của image view và label đang rất ổn, thì font đôi khi bị xén bớt. Adaptive design đã bổ sung thêm vài chọn lựa cho người phát triển để xử lý kiểu kịch bản này.

Bước 1: Điều chỉnh Font Scale

Chọn label và mở Attributes Inspector bên phải. Bên dưới Autoshrink, chọn Minimum Font Scale và đổi thành 0.4.

Bước 2: Thêm vào font dành riêng cho Size Class

Thay đổi font scale sẽ vừa đủ trong đa số trường hợp. Trong ứng dụng của chúng ta, nội dung của label có thể đọc được trong size class Compact Width | Compact Height, nhưng không lý tưởng. Nếu bạn mở preview assistant editor, bạn sẽ thấy chữ "p" trong từ "laptop" nằm ở trong dòng của chính nó.

Với label được chọn, click button + kế bên Font trong Attribute Inspector. Mở một menu để chọn size class để áp dụng font cụ thể. Chọn Compact Width | Compact Height.

Tương tự với constraint cho size class cụ thể, font được thêm vào size class chúng ta đã chọn. Đổi font size thành 50 point. Giờ hãy mở preview assistant editor lần nữa và xác định xem font đã hoàn hảo trên tất cả thiết bị.

Khả năng thêm adaptive font cực kỳ mãnh mẽ. Bản địa hoá không đáng kể khi bạn có thể điều khiển font size chính xác hơn với nội dung động.

6. Những công nghệ adaptive design khác

Mặc dù các size class dĩ nhiên là một tính năng hàng đầu, nhưng có nhiều API của adaptive design và các cải tiến mà tôi chưa đề cập trong hướng dẫn này. Ví dụ, view controller tuân theo UITraitEnvorinment protocol. Điều này có nghĩa là view controller có thuộc tính traitCollection để theo dõi size class nào hiện đang hiển thị.

Nếu bạn thích tạo ra giao diện người dung trong code, thuộc tính traitCollection cho bạn cùng khả năng như size class trong Interface Builder. Bạn có được thông báo khi size class thay đổi và thực hiện những cập nhật cần thiết cho constraint của giao diện người dùng.

Một API hữu ích khác là UIPopoverController. Nếu trước đó bạn xây dựng một ứng dụng phổ biến, tôi chắc rằng bạn thấy code như vậy:

iOS 8 không cần kiểm tra thiết bị nào mà ứng dụng đang chạy khi sử dụng class UIPopoverController. Class UIPopoverController giờ cũng hỗ trợ iPhone và iPod Touch.

Theo như các image assets, hãy lưu ý rằng hiện có kích thước @3x. Đây là giới hạn của hiển thị Retina HD ở trên iPhone 6 Plus. Nếu bạn mở file Images.xcassets trong dự án, bạn sẽ thấy nó bên dưới bất kỳ bộ image nào.

Tổng kết

Adaptive design dĩ nhiên là thay đổi quan trọng nhất khi phát triển iOS trong vài năm. Trước khi có adaptive design, các ứng dụng thông thường không dễ phát triển và việc mở rộng trong các dự án như vậy thực sự là vấn đề. Hy vọng bạn đã học được đầy đủ từ hướng dẫn này để tránh những vấn đề trên và tích hợp adaptive design vào ứng dụng của bạn.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.