Objective-c

Launch screen cho iOS

Theo như hướng dẫn của Apple (https://developer.apple.com/ios/human-interface-guidelines/graphics/launch-screen/) thì việc tạo Launch screen cho ứng dụng là điều bạn nên làm. Thực tế thì launch screen của iOS có mục đích “trang trí” và “nhá hàng sản phẩm” hơn Splash screen cho Android, nhưng dẫu sao, nó cũng làm ứng dụng của bạn nhìn sinh động và chuyên nghiệp hơn nếu không có. Giống như Android, bên iOS này cũng có nhiều cách, nhưng không phải chúng được “phát minh” bởi các devs có trình độ cao thấp, mà hai cách đó phụ thuộc vào ý tưởng của người code hơn.

YouTube_iOS_launchscreen

1. The static way:

Cách này là bạn làm luôn cái ảnh PNG tràn kín màn hình. Không như Android có độ phân giải màn hình mang tính “muôn hình vạn trạng” và hay phải scale (1px -> 1dp) thì bên phía iPhone và iPad, số mẫu máy là khá “khiêm tốn” và hơn nữa là Apple ít có thay đổi độ phân giải màn hình thiết bị khi không có thay đổi về kích thước. Do đó, bạn dễ dàng đặt các ảnh có chiều ngang * chiều dọc phù hợp với số điểm ảnh của các iDevices mà không phải “xoắn”, chẳng hạn như iPhone 6S không “lết” thì kích thước sẽ là 750*1334 px, còn iPad Air 2 9.7″ là 2048*1536 px. Như vậy, bạn phải làm nhiều ảnh PNG cho các màn hình khác nhau, nhưng cho dù có “mệt” mấy thì vẫn đỡ hơn bên Android nhiều. Cuối cùng, câu hỏi được đặt ra là “Tôi bỏ chúng vào đâu?”.

Sau khi tạo Xcode iOS project, thì ở phần General, bạn tìm tới App Icons and Launch Images/Launch Images Source, chọn Use Assets Catalog và Migrate theo hướng dẫn trên hộp thoại nhắc nhở và đợi một lát. Ở bên dưới là Launch Screen File, bạn đổi nó thành lựa chọn trống. Tốt nhất bạn nên delete cái LaunchScreen.xib. Sau đó, bạn sang Images.xcassets quen thuộc thì nó xuất hiện thêm phần LaunchImage. Công việc của bạn giờ chỉ là drag and drop mấy cái ảnh bạn đã làm mà thôi.

“Vậy tôi có cần làm ViewController nào không?” – Ở đây, nếu bạn dùng cách này thì hệ thống sẽ làm cho bạn mà bạn không cần làm gì khác. Bạn chỉ cho chạy thử để xem thành quả mà thôi.

Nhược điểm của cách này là việc đặt các images có kích thước cố định có thể làm cái launch screen không vừa với các thiết bị mới nếu có, chẳng hạn như iPad Pro 10.2″ mới và sắp tới là iPhone 8, vốn có sự thay đổi về độ phân giải màn hình. Tới đó, bạn lại phải thêm làm các ảnh mới, nhưng thực sự cũng không quá phí công vì như tôi đã nói, Apple rất ít khi thay đổi độ phân giải màn hình so với bên phe Android.

2. The better way:

Cách này hay hơn, vì nó có pha trộn giữa storyboard và cách bên trên. Lần này là bạn tận dụng cái LaunchScreen.xib mà Xcode cho sẵn. Thực chất nó giống như cái storyboard mà thôi, nên bạn không thấy khó khăn gì khi thao tác với nó. Nếu bạn muốn làm theo hướng đơn giản thì chỉ cần drag một ImageView chứa logo của ứng dụng và một Label chứa tên ứng dụng, tên tổ chức hay tên cái gì khác cũng được nếu bạn thấy cần thiết.

Có lẽ bây giờ bạn đang hỏi là vì sao tôi lại giới thiệu cách bên trên? Đơn giản thôi, cách này chỉ phù hợp như cái “hướng đơn giản” mà tôi vừa nói, tức là chỉ chứa logo ứng dụng trên nền trắng, đen hay một màu cố định nào đó bạn đặt. Đối với các nền background phức tạp, chứa “bông hoa lá cành gốc rễ”, chẳng hạn như tự dưng bạn muốn đưa luôn ảnh bạn và người yêu hôn nhau chùn chụt làm launch screen cho người dùng, nhất là mấy thanh niên FA, tức chơi, thì việc phải scale images sẽ làm giảm chất lượng, để duy trì chất lượng thì bạn lại phải làm ảnh phù hợp cho các màn hình khác nhau, và như vậy thôi dùng cách trên đi cho nó nhẹ nhàng.

3. The storyboard way:

Theo hướng này, bạn sẽ làm launch screen là hẳn một màn hình trong ứng dụng của bạn. Với cách này thì bạn không chỉ thoải mái hơn trong việc thiết kế phông nền, mà còn có thể phát một đoạn video nhỏ (như kiểu Uber), thêm các animation cho các đối tượng nữa. Và nếu bạn có làm Android thì cái này giống SplashActivity của Android lắm.

Phần code các anim hay chèn view như thế nào thì tôi để các bạn làm vì đó là ý của bạn. Còn về phần cách triển khai thì cũng không có gì phức tạp. Đầu tiên bạn thêm một storyboard (nên để tên là LaunchScreen.storyboard). Nhưng khoan thiết kế cái đã. Bạn qua trở lại phần General của project, tìm tới Launch Images/Launch Screen File và đổi nó thành cái LaunchScreen.storyboard. Tất nhiên, bạn cũng có thể dùng luôn Main.storyboard để làm để ứng dụng trở nên xuyên suốt hơn (và cái đó thì tùy bạn làm). Xong xuôi thì bạn delete cái LaunchScreen.xib cho sẵn và bắt đầu thiết kế cái LaunchScreen.storyboard là được rồi.

Hi vọng là các bạn đã có thể làm Launch screen cho ứng dụng iOS của mình. Chúc các bạn thành công.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.