uniapp-IOS自定义启动页面模版的修改

启动界面设置

在打包IOS包时，需要我们选择app的启动页面配置

在HBuilderX内，有三个样式的选择

第一个，是通用界面，就是一个启动页是一个圆形的应用图标加上应用名称

第二个，自定义的启动图，目前无法通过AppStore的审核了

第三个，自定义storyBoard启动页面，今天我们主要讲这个的设置方法

自定义storyBoard启动页面

HBuilderX官方给的制作方法有两个

一是使用提供的模版，在此基础上进行自定义（这个不需要用到Mac和XCode）

二是使用XCode自行制作

官网地址：uni-app官网 (dcloud.net.cn)

模版下载

因为本人电脑是WIndows11，没有Mac电脑和XCode，所以就用模版达到自己想要的效果

在官网地址内，点击下载

下载好的文件是个压缩包，解压

上面即为文件内的结构

readme文件内有自定义的方法，下面我也讲一下

readme文件

此 storyboard 文件适用于各种 iPhone 及 iPad 设备的横竖屏，支持自定义界面元素包括

页面背景图片或背景颜色
中间显示图片
底部显示文字及颜色

注：每一项都是可选的（比如只显示背景图片，按照下面的方法只提供背景图片即可）

默认效果如下：

自定义方法：使用 HBuilderX 打开 LaunchScreen.storyboard 文件，作为xml文件编辑自定义修改部分样式。

自定义界面背景

页面背景支持设置背景色或设置背景图片，默认为使用背景色，值为systemBackgroundColor，会跟随系统设置的模式自动修改颜色，正常模式为白色暗黑模式为黑色，

自定义背景色

替换第42行 color 节点为下面的代码，并将 red、green、blue 属性值修改为自己需要的颜色，取值范围为0到1

<color key="backgroundColor" red="0.83516160100000003" green="0.88008347600000003" blue="0.88008347600000003" alpha="1" colorSpace="calibratedRGB"/>

自定义背景图

图片要求

设备	尺寸要求	命名规范	说明
iPhone 竖屏	以iPhoneX的尺寸设计	`dc_launchscreen_portrait_background@2x.png`、 `dc_launchscreen_portrait_background@3x.png`	以 iPhoneX 竖屏为模板设计图片，并输出@2x、@3x图片，注意命名规范
iPhone 横屏	以iPhoneX的尺寸设计	`dc_launchscreen_landscape_background@2x.png`、 `dc_launchscreen_landscape_background@3x.png`	以 iPhoneX 横屏为模板设计图片，并输出@2x、@3x图片，注意命名规范
iPad（不区分横竖屏）	以 iPad 9.7 的尺寸设计	`dc_launchscreen_pad_background@2x.png`、 `dc_launchscreen_pad_background@3x.png`	以 iPad 9.7 设备为模板设计图片，并输出@2x、@3x图片，注意命名规范

将设计好的图片放到根目录即可；

注：如果您不需要背景图片，不存放相应的图片即可；

自定义中间显示的图片

请将目录中的dc_launchscreen_icon@2x.png、dc_launchscreen_icon@3x.png图片替换为您自己的图片

注：如果您不需要中间的图片，不存放相应的图片即可；

自定义底部文字

修改文字修改第35行 label节点的 text 属性值即可，设置为空字符串则不显示文字

<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="xxx提供计算服务" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="QBH-Ne-rcx">

修改文字颜色替换第38行 color节点为下面的代码，并将 red、green、blue属性值修改为自己需要的颜色，取值范围为0到1

<color key="textColor" red="0.83516160100000003" green="0.88008347600000003" blue="0.88008347600000003" alpha="1" colorSpace="calibratedRGB"/>

readme未提到的

因为本人的需求会更复杂一些，研究了源代码实现了下面的效果

底部文字两行排列

因为源代码中，只有一个label标签，并且文字的位置太靠下了，我的需求就是两行文本居中对齐，并位置靠上的去展示

这里我用上面的示例图举例：

在 LaunchScreen.storyboard 文件的第35行，是label标签

<label opaque="NO" userInteractionEnabled="NO" contentMode="center" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="这是第一行" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="QBH-Ne-rcx">
    <rect key="frame" x="153" y="750" width="108" height="34"/>
	<fontDescription key="fontDescription" type="system" pointSize="20"/>
	<color key="textColor" red="215/255" green="47/255" blue="106/255" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
	<nil key="highlightedColor"/>
</label>

先分析一下标签内的一些属性

第一行 label 标签：

label:

        代表用于显示文本的用户界面控件

opaque="NO":

        表示标签透明，不会阻挡背景

userInteractionEnabled="NO":

        标签不响应用户点击，主要用于纯文本显示

contentMode="center":

        文本居中显示

horizontalHuggingPriority="251" 和 verticalHuggingPriority="251":

        是 Auto Layout 的优先级，用于调整内容在父视图内的对齐

text="这是第一行":

        标签要显示的中文文本内容

textAlignment="center":

        文本水平居中。

lineBreakMode="tailTruncation":

        如果文字内容超出标签范围，尾部会被截断显示

baselineAdjustment="alignBaselines":

        基线对齐，确保行间距正确

adjustsFontSizeToFit="NO":

        不自动调整字体大小以适应标签内容

translatesAutoresizingMaskIntoConstraints="NO":

        标签的布局不依赖自动布局，需要手动设置或管理

id="QBH-Ne-rcx":

        是标签的唯一标识符，用于编程中引用。

第二行

<rect key="frame" x="153" y="750" width="108" height="34">: 这代表一个矩形区域

key：是用于识别或命名这个矩形的标识符
x 和 y：矩形左上角的坐标，分别是153个像素和750个像素
width 和 height：矩形的宽度为108像素，高度为34像素

第三行

<fontDescription key="fontDescription" type="system" pointSize="20"/>: 这描述了一个字体属性

fontDescription：描述字体类型的键。
type="system"：提示该字体是系统预设的。
pointSize="20"：字体大小，为20像素。

<color ..../> 这定义了文本的颜色

textColor：是指定给标签文本的颜色。
red green blue 颜色值：红、绿、蓝通道,设置颜色
alpha="1" 颜色透明度设为1（完全不透明）
customColorSpace="sRGB" 使用自定义颜色空间sRGB。

创建第二个label文本

把第一个label标签复制一份放在下面，先改动 id 值，改成唯一的Id

调整第一个label的位置

在第53行，有一行代码为

<constraint firstItem="QBH-Ne-rcx" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" constant="-70" id="5MD-Bb-oGe"/>

这行代码目的是为了实现约束，是约束表达式

下面分析一下这行代码的含义

"QBH-Ne-rcx" 和 "Ze5-6b-2t3":

        两个元素，firstItem 和  secondItem

firstItem:

        这表示代码影响的第一部分（是一个父视图或布局容器）

firstAttribute:

        表示影响这个元素的第一个布局属性。这里是bottom，即元素的底部

secondItem:

        是第二个元素（可能是另一个子视图或相关布局元素）

secondAttribute:

        是第二个元素的属性，也是bottom

constant: -70

        是一个常数，说明两个指定布局属性之间的距离需要减去70个点（Swift中的单位通常是Pixel）。

id: "5MD-Bb-oGe"

        这是一个约束的唯一标识，方便管理布局约束配置