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"/>

自定义背景图

图片要求

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

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

自定义中间显示的图片

请将目录中的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"

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

        显而易见，firstItem 为 第一个label 标签， secondItem为整个视图的标签id，所以这里的约束是约束的第一行文字与整个页面底部的位置，而控制位置的属性就是 constant

        所以这里我们只需要调整 constant 值的大小就可以达到移动第一行文本的y轴位置，负值越大越靠上，越小越靠下

调整第一个label的字体大小

        是由  <fontDescription> 标签内的 pointSize 属性去控制的

        就像 css 去设置字体大小一样

调整第二个label的位置和字体大小

    位置：

        把第一个约束表达式复制一份放到第一个约束表达式的后面，

        然后把 firstItem 换成第二个label的id，并且修改 constant 的值，

        这个值最好比第一个约束表达式值要大，例，第一个为 -70，第二个为 -50，之所以是有20的差值，是因为第一个label的字体大小为20，可以以此为参考

    字体大小：

         同理，调整 <fontDescription> 标签内的 pointSize 属性

        我这里第二行字要比第一行字的字数多，所以我把 pointSize 调成了 16

需要注意的

        修改文本颜色

        底部文本修改颜色的时候 red green blue 值是只能取值为 0-1 之间的

        所以我们可以写成   100/255   这样的形式

        通过 rgb 我们获取到字体的三个颜色值，假如为（40，208，149）（青绿色）

        那么我们的 red green blue 就不能写成，这样写就完全写反了

        red="40/255" green="208/255" blue="149/255"

        正确写法是：

        red="215/255" green="47/255" blue="106/255"     

        需要进行一个计算，例如红色的40，需要用255减去40，得到215，就是我们要写的值

到此为止，我的需求就达到了，就是一个两行文本并修改位置，字体颜色，字体大小的效果

剩余的我没有去试，如果未来需要用到，这里了可能还会持续更新本文

欢迎各位交流！