Browse Source

feat(splash): 添加启动页背景图片和相关配置

- 在 assets.dart 中新增 app_logo.jpg 和 splash.png 图片资源
- 配置 iOS LaunchBackground.imageset 支持启动背景图
- 更新 iOS LaunchImage.imageset 文件结构和属性顺序
- 添加 flutter_native_splash.yaml 配置文件指定启动页背景
- 修改 Info.plist 添加 UIStatusBarHidden 键值
- 更新 Android 启动背景 drawable 文件引用新的 background 图片
- 调整 iOS LaunchScreen.storyboard 增加背景图约束和支持
- 在 Android styles.xml 和 styles-night.xml 中添加启动页样式配置

# Conflicts:
#	ios/Runner/Info.plist
ios
Jolie 3 months ago
parent
commit
163b153ac1
14 changed files with 51 additions and 13 deletions
  1. 3
      android/app/src/main/res/drawable-v21/launch_background.xml
  2. 3
      android/app/src/main/res/drawable/launch_background.xml
  3. 4
      android/app/src/main/res/values-night/styles.xml
  4. 4
      android/app/src/main/res/values/styles.xml
  5. BIN
      assets/images/splash.png
  6. 2
      flutter_native_splash.yaml
  7. 21
      ios/Runner/Assets.xcassets/LaunchBackground.imageset/Contents.json
  8. BIN
      ios/Runner/Assets.xcassets/LaunchBackground.imageset/background.png
  9. 10
      ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json
  10. BIN
      ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png
  11. BIN
      ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png
  12. BIN
      ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png
  13. 15
      ios/Runner/Base.lproj/LaunchScreen.storyboard
  14. 2
      lib/generated/assets.dart

3
android/app/src/main/res/drawable-v21/launch_background.xml

@ -1,7 +1,6 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/white" />
<item> <item>
<bitmap android:scaleType="centerCrop" android:src="@drawable/splash"/>
<bitmap android:gravity="fill" android:src="@drawable/background"/>
</item> </item>
</layer-list> </layer-list>

3
android/app/src/main/res/drawable/launch_background.xml

@ -1,7 +1,6 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/white" />
<item> <item>
<bitmap android:scaleType="centerCrop" android:src="@drawable/splash"/>
<bitmap android:gravity="fill" android:src="@drawable/background"/>
</item> </item>
</layer-list> </layer-list>

4
android/app/src/main/res/values-night/styles.xml

@ -5,6 +5,10 @@
<!-- Show a splash screen on the activity. Automatically removed when <!-- Show a splash screen on the activity. Automatically removed when
the Flutter engine draws its first frame --> the Flutter engine draws its first frame -->
<item name="android:windowBackground">@drawable/launch_background</item> <item name="android:windowBackground">@drawable/launch_background</item>
<item name="android:forceDarkAllowed">false</item>
<item name="android:windowFullscreen">false</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style> </style>
<!-- Theme applied to the Android Window as soon as the process has started. <!-- Theme applied to the Android Window as soon as the process has started.
This theme determines the color of the Android Window while your This theme determines the color of the Android Window while your

4
android/app/src/main/res/values/styles.xml

@ -5,6 +5,10 @@
<!-- Show a splash screen on the activity. Automatically removed when <!-- Show a splash screen on the activity. Automatically removed when
the Flutter engine draws its first frame --> the Flutter engine draws its first frame -->
<item name="android:windowBackground">@drawable/launch_background</item> <item name="android:windowBackground">@drawable/launch_background</item>
<item name="android:forceDarkAllowed">false</item>
<item name="android:windowFullscreen">false</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style> </style>
<!-- Theme applied to the Android Window as soon as the process has started. <!-- Theme applied to the Android Window as soon as the process has started.
This theme determines the color of the Android Window while your This theme determines the color of the Android Window while your

BIN
assets/images/splash.png

Before After
Width: 2250  |  Height: 4872  |  Size: 700 KiB

2
flutter_native_splash.yaml

@ -0,0 +1,2 @@
flutter_native_splash:
background_image: assets/images/splash.png

21
ios/Runner/Assets.xcassets/LaunchBackground.imageset/Contents.json

@ -0,0 +1,21 @@
{
"images" : [
{
"filename" : "background.png",
"idiom" : "universal",
"scale" : "1x"
},
{
"idiom" : "universal",
"scale" : "2x"
},
{
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

BIN
ios/Runner/Assets.xcassets/LaunchBackground.imageset/background.png

Before After
Width: 2250  |  Height: 4872  |  Size: 700 KiB

10
ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json

@ -1,23 +1,23 @@
{ {
"images" : [ "images" : [
{ {
"idiom" : "universal",
"filename" : "LaunchImage.png", "filename" : "LaunchImage.png",
"idiom" : "universal",
"scale" : "1x" "scale" : "1x"
}, },
{ {
"idiom" : "universal",
"filename" : "LaunchImage@2x.png", "filename" : "LaunchImage@2x.png",
"idiom" : "universal",
"scale" : "2x" "scale" : "2x"
}, },
{ {
"idiom" : "universal",
"filename" : "LaunchImage@3x.png", "filename" : "LaunchImage@3x.png",
"idiom" : "universal",
"scale" : "3x" "scale" : "3x"
} }
], ],
"info" : { "info" : {
"version" : 1,
"author" : "xcode"
"author" : "xcode",
"version" : 1
} }
} }

BIN
ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png

Before After
Width: 1  |  Height: 1  |  Size: 68 B Width: 1  |  Height: 1  |  Size: 69 B

BIN
ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png

Before After
Width: 1  |  Height: 1  |  Size: 68 B Width: 1  |  Height: 1  |  Size: 69 B

BIN
ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png

Before After
Width: 1  |  Height: 1  |  Size: 68 B Width: 1  |  Height: 1  |  Size: 69 B

15
ios/Runner/Base.lproj/LaunchScreen.storyboard

@ -16,13 +16,19 @@
<view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3"> <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/> <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews> <subviews>
<imageView opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" image="LaunchImage" translatesAutoresizingMaskIntoConstraints="NO" id="YRO-k0-Ey4">
</imageView>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleToFill" image="LaunchBackground" translatesAutoresizingMaskIntoConstraints="NO" id="tWc-Dq-wcI"/>
<imageView opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" image="LaunchImage" translatesAutoresizingMaskIntoConstraints="NO" id="YRO-k0-Ey4"></imageView>
</subviews> </subviews>
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/> <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints> <constraints>
<constraint firstItem="YRO-k0-Ey4" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="1a2-6s-vTC"/>
<constraint firstItem="YRO-k0-Ey4" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="4X2-HB-R7a"/>
<constraint firstItem="YRO-k0-Ey4" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="3T2-ad-Qdv"/>
<constraint firstItem="tWc-Dq-wcI" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" id="RPx-PI-7Xg"/>
<constraint firstItem="tWc-Dq-wcI" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="SdS-ul-q2q"/>
<constraint firstAttribute="trailing" secondItem="tWc-Dq-wcI" secondAttribute="trailing" id="Swv-Gf-Rwn"/>
<constraint firstAttribute="trailing" secondItem="YRO-k0-Ey4" secondAttribute="trailing" id="TQA-XW-tRk"/>
<constraint firstItem="YRO-k0-Ey4" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" id="duK-uY-Gun"/>
<constraint firstItem="tWc-Dq-wcI" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="kV7-tw-vXt"/>
<constraint firstItem="YRO-k0-Ey4" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="xPn-NY-SIU"/>
</constraints> </constraints>
</view> </view>
</viewController> </viewController>
@ -33,5 +39,6 @@
</scenes> </scenes>
<resources> <resources>
<image name="LaunchImage" width="168" height="185"/> <image name="LaunchImage" width="168" height="185"/>
<image name="LaunchBackground" width="1" height="1"/>
</resources> </resources>
</document> </document>

2
lib/generated/assets.dart

@ -70,6 +70,7 @@ class Assets {
static const String imagesAd = 'assets/images/ad.png'; static const String imagesAd = 'assets/images/ad.png';
static const String imagesAdd = 'assets/images/add.png'; static const String imagesAdd = 'assets/images/add.png';
static const String imagesAliPay = 'assets/images/ali_pay.png'; static const String imagesAliPay = 'assets/images/ali_pay.png';
static const String imagesAppLogo = 'assets/images/app_logo.jpg';
static const String imagesArrow = 'assets/images/arrow.png'; static const String imagesArrow = 'assets/images/arrow.png';
static const String imagesArrowForwardRight = 'assets/images/arrow_forward_right.png'; static const String imagesArrowForwardRight = 'assets/images/arrow_forward_right.png';
static const String imagesArrowR = 'assets/images/arrow_r.png'; static const String imagesArrowR = 'assets/images/arrow_r.png';
@ -179,6 +180,7 @@ class Assets {
static const String imagesSetting = 'assets/images/setting.png'; static const String imagesSetting = 'assets/images/setting.png';
static const String imagesSettingIcon = 'assets/images/setting_icon.png'; static const String imagesSettingIcon = 'assets/images/setting_icon.png';
static const String imagesShop = 'assets/images/shop.png'; static const String imagesShop = 'assets/images/shop.png';
static const String imagesSplash = 'assets/images/splash.png';
static const String imagesSubscript = 'assets/images/subscript.png'; static const String imagesSubscript = 'assets/images/subscript.png';
static const String imagesTabChangeIcon = 'assets/images/tab_change_icon.png'; static const String imagesTabChangeIcon = 'assets/images/tab_change_icon.png';
static const String imagesTalkIcon = 'assets/images/talk_icon.png'; static const String imagesTalkIcon = 'assets/images/talk_icon.png';

Loading…
Cancel
Save