Kích thước màn hình Splash cho Android
đồng thời cho Cordova (hay còn gọi là Phonegap), React-Native và tất cả các nền tảng phát triển khác
Format : 9-Patch PNG (recommended)
Dimensions
- LDPI:
- Portrait: 200x320px
- Landscape: 320x200px
- MDPI:
- Portrait: 320x480px
- Landscape: 480x320px
- HDPI:
- Portrait: 480x800px
- Landscape: 800x480px
- XHDPI:
- Portrait: 720px1280px
- Landscape: 1280x720px
- XXHDPI
- Portrait: 960x1600px
- Landscape: 1600x960px
- XXXHDPI
- Portrait: 1280x1920px
- Landscape: 1920x1280px
Lưu ý: Không cần chuẩn bị XXXHDPI và cũng có thể kích thước XXHDPI vì các vùng lặp lại của hình ảnh 9 bản vá. Mặt khác, nếu chỉ sử dụng kích thước Chân dung thì kích thước Ứng dụng có thể nhỏ hơn. Nhiều hình ảnh hơn có nghĩa là cần nhiều không gian hơn.
Chú ý
Tôi nghĩ không có kích thước chính xác cho tất cả các thiết bị. Tôi sử dụng Xperia Z 5" . Nếu bạn phát triển một ứng dụng crossplatform-webview bạn nên cân nhắc rất nhiều thứ (cho dù màn hình có nút điều hướng softkey hay không, vv). Vì vậy, tôi nghĩ rằng chỉ có một giải pháp phù hợp. Giải pháp là để chuẩn bị một màn hình giật gân 9 miếng (tìm How to design a new splash screentiêu đề bên dưới).
- Tạo màn hình giật gân cho các kích thước màn hình trên dưới dạng 9-patch . Đặt tên tệp của bạn bằng hậu tố .9.png
- Thêm các dòng bên dưới vào tệp config.xml của bạn
- Thêm plugin màn hình giật gân nếu cần.
- Chạy dự án của bạn.
Đó là nó!
Mã cụ thể của Cordova
Để được thêm các dòng vào config.xml cho màn hình giật gân 9 bản vá lỗi
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="6000" />
<platform name="android">
<splash src="res/screen/android/ldpi.9.png" density="ldpi"/>
<splash src="res/screen/android/mdpi.9.png" density="mdpi"/>
<splash src="res/screen/android/hdpi.9.png" density="hdpi"/>
<splash src="res/screen/android/xhdpi.9.png" density="xhdpi"/>
</platform>
Để được thêm các dòng vào config.xml khi sử dụng màn hình giật gân không phải 9 bản vá
<platform name="android">
<splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
<splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
<splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
<splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
<splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
<splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
<splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
<splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>
Cách thiết kế màn hình giật gân mới
Tôi sẽ mô tả một cách đơn giản để tạo màn hình giật gân thích hợp bằng cách này. Giả sử chúng tôi đang thiết kế màn hình 1280dp x 720dp - xhdpi (x-large). Tôi đã viết vì lợi ích của ví dụ dưới đây;
Trong Photoshop: File -> New trong cửa sổ hộp thoại mới thiết lập màn hình của bạn
Chiều rộng: 720 pixel Chiều cao: 1280 pixel
Tôi đoán các kích thước trên có nghĩa là Độ phân giải là 320 Pixels / Inch. Nhưng để đảm bảo bạn có thể thay đổi giá trị độ phân giải thành 320 trong cửa sổ hộp thoại của mình. Trong trường hợp này Pixels / Inch = DPI
Xin chúc mừng ... Bạn có mẫu màn hình giật gân 720dp x 1280dp.
Cách tạo màn hình giật gân 9 miếng
Sau khi bạn thiết kế màn hình hiển thị của mình, nếu bạn muốn thiết kế màn hình hiển thị 9-Patch, bạn nên chèn khoảng cách 1 pixel cho mỗi bên. Vì lý do này, bạn nên tăng +2 pixel chiều rộng và chiều cao của kích thước canvas (bây giờ kích thước hình ảnh của bạn là 722 x 1282).
Tôi đã để trống khoảng cách 1 pixel ở mọi bên như hướng dẫn bên dưới.
Thay đổi kích thước canvas bằng cách sử dụng Photoshop:
- Mở tệp png màn hình giật gân trong Photoshop
- Nhấp vào biểu tượng ổ khóa bên cạnh tên 'Nền' trong trường Lớp (để trống thay vì một màu khác như màu trắng) nếu có bên dưới: - Thay đổi kích thước canvas từ menu Hình ảnh (Chiều rộng: 720 pixel thành 722 pixel và Chiều cao: 1280 pixel thành 1282 pixel). Bây giờ, sẽ thấy khoảng cách 1 pixel ở mọi phía của hình ảnh màn hình giật gân.
Sau đó, bạn có thể sử dụng C: \ Program Files (x86) \ Android \ android-studio \ sdk \ tools \ draw9patch.bat để chuyển đổi tệp 9 bản vá. Để mở màn hình giật gân của bạn trên ứng dụng draw9patch. Bạn nên xác định logo của mình và các khu vực có thể mở rộng. Lưu ý đường màu đen trên màn hình giật gân ví dụ sau. Độ dày của đường màu đen chỉ là 1 px;) Các đường màu đen bên trái và trên cùng xác định vùng hiển thị phải hiển thị của màn hình giật gân của bạn. Chính xác như thiết kế của bạn. Dòng bên phải và dòng dưới cùng xác định vùng có thể thêm và vùng có thể di chuyển (các vùng tự động lặp lại).
Chỉ cần làm điều đó:
Thu phóng cạnh trên của hình ảnh của bạn trên ứng dụng draw9patch. Nhấp và kéo chuột của bạn để vẽ đường. Và nhấn shift + nhấp và kéo chuột của bạn để xóa dòng.
Nếu bạn phát triển một ứng dụng đa nền tảng (như Cordova / PhoneGap), bạn có thể tìm thấy địa chỉ sau hầu như tất cả các kích thước màn hình giật gân của hệ điều hành mabile. Nhấp để biết kích thước màn hình giật gân Windows Phone , WebOS , BlackBerry , Bada-WAC và Bada .
https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes
Và nếu bạn cần kích thước biểu tượng ứng dụng IOS, Android, v.v., bạn có thể truy cập tại đây .
IOS
Format : PNG (recommended)
Dimensions
- Tablet (iPad)
- Non-Retina (1x)
- Portrait: 768x1024px
- Landscape: 1024x768px
- Retina (2x)
- Portrait: 1536x2048px
- Landscape: 2048x1536px
- Handheld (iPhone, iPod)
- Non-Retina (1x)
- Portrait: 320x480px
- Landscape: 480x320px
- Retina (2x)
- Portrait: 640x960px
- Landscape: 960x640px
- iPhone 5 Retina (2x)
- Portrait: 640x1136px
- Landscape: 1136x640px
- iPhone 6 (2x)
- Portrait: 750x1334px
- Landscape: 1334x750px
- iPhone 6 Plus (3x)
- Portrait: 1242x2208px
- Landscape: 2208x1242px