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"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/white" />
<item>
<bitmap android:scaleType="centerCrop" android:src="@drawable/splash"/>
<bitmap android:gravity="fill" android:src="@drawable/background"/>
</item>
</layer-list>

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

@ -1,7 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/white" />
<item>
<bitmap android:scaleType="centerCrop" android:src="@drawable/splash"/>
<bitmap android:gravity="fill" android:src="@drawable/background"/>
</item>
</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
the Flutter engine draws its first frame -->
<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>
<!-- Theme applied to the Android Window as soon as the process has started.
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
the Flutter engine draws its first frame -->
<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>
<!-- Theme applied to the Android Window as soon as the process has started.
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" : [
{
"idiom" : "universal",
"filename" : "LaunchImage.png",
"idiom" : "universal",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "LaunchImage@2x.png",
"idiom" : "universal",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "LaunchImage@3x.png",
"idiom" : "universal",
"scale" : "3x"
}
],
"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">
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<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>
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<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>
</view>
</viewController>
@ -33,5 +39,6 @@
</scenes>
<resources>
<image name="LaunchImage" width="168" height="185"/>
<image name="LaunchBackground" width="1" height="1"/>
</resources>
</document>

2
lib/generated/assets.dart

@ -70,6 +70,7 @@ class Assets {
static const String imagesAd = 'assets/images/ad.png';
static const String imagesAdd = 'assets/images/add.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 imagesArrowForwardRight = 'assets/images/arrow_forward_right.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 imagesSettingIcon = 'assets/images/setting_icon.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 imagesTabChangeIcon = 'assets/images/tab_change_icon.png';
static const String imagesTalkIcon = 'assets/images/talk_icon.png';

Loading…
Cancel
Save