Một số lưu ý với iOS 11 và iPhone X trong Corona SDK

Thảo luận trong 'Tin Corona' bắt đầu bởi Khúc Vương, 23/9/17.

  1. Administrator
    Khúc Vương
    Nhân viên CoronaViet
    Tham gia ngày:
    17/1/14
    Bài viết:
    498
    Đã được thích:
    130
    Hiện tại thì iOS 11 đã được chính thức phát hành, nhưng có một vài điều bạn phải làm để chuẩn bị cho ứng dụng iOS của bạn trước khi submit nó cho Apple. Ngoài ra, iPhone X sắp ra mắt đã đem đến ra một số thách thức khá đặc biệt khi bạn tạo giao diện người dùng (UI), vì vậy CoronaLabs đã bổ sung thêm một số API mới khá hữu ích để giúp bạn điều chỉnh giao diện người dùng của bạn.

    [​IMG]

    Icon
    Bắt đầu từ iOS 11, Apple yêu cầu bạn phải đưa file Icon-1024.png vào gói ứng dụng của bạn. Tuy nhiên, các ứng dụng Corona hiện tại không thể tìm thấy file đó một cách chính xác bằng cách sử dụng bảng CFbundleIconFiles. Do đó, để thực hiện công việc này cho ngày hôm nay và sau này, bạn phải chuyển từ sử dụng các icon tĩnh sang sử dụng gói Images.xcassets.

    Bắt đầu từ bản daily build 2017.3144, bạn có thể dễ dàng thực hiện phương pháp Images.xcassets theo hướng dẫn sau đây:

    Đối với các ứng dụng iOS được build target cho iOS 11 trở lên, bạn phải đưa vào và tham chiếu đến một thư mục mới có tên là Images.xcassets, nếu không ứng dụng của bạn sẽ bị từ chối khi submit lên App Store.

    Để thuận tiện cho bạn, một thư mục Images.xcassets mặc định sẽ được tự động tạo ra cho tất cả các dự án Corona mới. Trong trường hợp bạn cần phải sao chép nó cho các dự án hiện có của bạn thì các thư mục tương tự cũng được tạo kèm. Nó có thể được tìm thấy trong thư mục ứng dụng Corona, ở đây:
    Mã (Lua):
    /Applications/Corona/Resources/Resource Library/iOS/Images.xcassets
    Để đưa vào và tham chiếu đến thư mục Images.xcassets trong dự án Corona của bạn, hãy thực hiện như sau:

    • Trong Finder, xác định vị trí (hoặc sao chép vào) thư mục Images.xcassets.
    • Mở thư mục và xác định vị trí thư mục AppIcon.appiconset. Nó sẽ chứa toàn bộ icon của ứng dụng iOS như sau:
    Mã (Lua):
    File         Size (w×h)
    Icon-40.png      40 × 40
    Icon-58.png      58 × 58
    Icon-76.png      76 × 76
    Icon-80.png      80 × 80
    Icon-87.png      87 × 87
    Icon-120.png    120 × 120
    Icon-152.png    152 × 152
    Icon-167.png    167 × 167
    Icon-180.png    180 × 180
    Icon-1024.png  1024 × 1024

    • Sử dụng các tên này một cách chính xác và đúng kích thước, tạo những file icon tùy chỉnh của riêng bạn và chép đè chúng vào các file mặc định này trong thư mục AppIcon.appiconset.
    Nếu bạn đang cập nhật thư mục Images.xcassets cho một project Corona cũ, bạn chỉ cần di chuyển các file icon được đặt tên tương ứng từ thư mục gốc của project (cùng với main.lua) vào thư mục Images.xcassets/AppIcon.appiconset . Tuy nhiên, lưu ý rằng bạn cũng phải thêm tệp 1024 × 1024 Icon-1024.png để sử dụng cho banner icon trên App Store.

    Lưu ý
    Thay vì thay thế các file icon bằng tay, bạn có thể thay thế bằng cách chỉnh sửa trực tiếp trong Asset Catalog thông qua Xcode bằng cách kéo và thả nó vào biểu tượng Xcode Dock. Thao tác này sẽ mở ra giao diện người dùng để bạn add các icon, xem cảnh báo về các icon có kích thước hoặc định dạng không chính xác, vv…
    • Nếu không có kế hoạch phát hành cho tvOS, bạn có thể xóa cả hai thư mục AppIconTV.brandassetsLaunchImageTV.launchimage trong thư mục Images.xcassets. Điều này sẽ không ảnh hưởng đến cách các icon được tạo ra cho iOS.
    Tiếp theo, bạn phải tham chiếu và liên kết thư mục Images.xcassets với project Corona của bạn:

    • Mở tập tin build.settings của project.
    • Nếu bạn đang cập nhật một project Corona cũ hoặc một mẫ để sử dụng các icon trong Images.xcassets/AppIcon.appiconset, hãy xóa toàn bộ bảng CFBundleIconFiles (settings → iphone → plist → CFBundleIconFiles).
    Mã (Lua):
    settings =
    {
        iphone =
        {
            plist =
            {
                UILaunchStoryboardName = "LaunchScreen",
    -----xóa bỏ------[[CFBundleIconFiles = {
                    "Icon-40.png",
                    "Icon-58.png",
                    "Icon-76.png",
                    "Icon-80.png",
                    "Icon-87.png",
                    "Icon-120.png",
                    "Icon-152.png",
                    "Icon-167.png",
                    "Icon-180.png",
                },]]-----------------
            },
        },
    }

    • Trong settings → iphone, thêm cặp khóa-giá trị xcassets = "Images.xcassets". Lưu ý rằng mục này nằm trong bảng iphone cấp cao nhất, không nằm trong bảng con plist của nó.
    Mã (Lua):
    settings =
    {
        iphone =
        {
            xcassets = "Images.xcassets",   ----------- đặt ở đây
            plist =
            {
                UILaunchStoryboardName = "LaunchScreen",
            },
        },
    }

    • Save build.settings của bạn. Xong.
    Vùng an toàn
    IPhone X mang một thách thức rất đặc biệt đến cho các nhà phát triển ứng dụng. Ở giữa 2 góc tròn bên trên là phần chứa các cảm biến lõm vào màn hình. Khi phát triển, các nhà phát triển cần một cách để biết nơi nào họ có thể đặt các phần tử UI quan trọng một cách an toàn, để người dùng có thể nhìn thấy và sử dụng. Hướng tới mục tiêu này, Apple đã cung cấp hướng dẫn hữu ích này để chỉ ra những gì bạn cần làm.

    [​IMG]

    [​IMG]
    [​IMG]

    Nói ngắn gọn, thì bạn cần phải lấp đầy toàn bộ màn hình, bao gồm cả khu vực bên ngoài "vùng an toàn" (màu đỏ). Cũng lưu ý rằng iPhone X có tỷ lệ khung hình cực cao 2.165:1 - vượt xa tỉ lệ 2:1 của Samsung S8 - vì vậy nếu kích thước nội dung Corona là 320 × 480, bạn sẽ cần phải lấp đầy tổng số diện tích là 360 × 693 của màn hình iPhone X và màn hình iPad.

    Quan trọng hơn nữa, bạn không nên đặt các yếu tố giao diện quan trọng như các button, scores, điều hướng, v.v ... ra bên ngoài " vùng an toàn".

    Để giải quyết vấn đề này, bắt đầu từ daily build 2017.3135, CoronaLabs đã thêm một số thuộc tính mới và một hàm mới mà bạn có thể sử dụng để xác định “vùng an toàn” trên màn hình. Các bổ sung cho thư viện hiển thị bao gồm:

    Vui lòng nhấp vào tài liệu hướng dẫn để biết các ví dụ về cách sử dụng các hàm này.

    Ngoài các tính năng trên, CoronaLabs cho biết họ cũng đang chuẩn bị cho ra mắt skin mới của iPhone X trong Corona Simulator. Trong thời gian chờ đợi, bạn có thể bắt đầu chuẩn bị ứng dụng cho iPhone X, test chúng trong Xcode Simulator và submit chúng tới Apple bằng iOS 11 SDK.
    Last edited: 23/9/17

Chia sẻ trang này