HBuilderx uniapp应用IOS端启动页面配置：storyboard

爱被打了一巴掌 2022-12-16 06:55 1325阅读 0赞

# 启动图问题 #

HBuilderX上android端适配启动页面采用的是.9.png图片的方式，相关说明可以看我前面的博客《[用一张正方形图片搞定安卓启动页][Link 1]》。

那么在苹果端，启动页的自动适配使用了不同的方案：[iOS平台自定义storyboard启动界面][iOS_storyboard]。  
这种配置型的启动页着实要比以前让设计人员提供给上十张各分辨率的图片要科学一些。

今天就来说一说苹果端storyboard文件的制作方法。

# 一、比较 #

苹果的这个storyboard的制作相对于安卓的9png来说，制作复杂程度要稍大一些。

## 1. 9png ##

9png这样直接使用设计人员制作好的图片上指定拉伸区域即可，而storyboard需要使用设计人员的原图，将原图中的各个元素单独提出来，再根据设计对元素的布局进行逐一设置排版。

已下图为例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70]  
当使用安卓9png格式时，只需要在上图的基础上画线指定拉伸区域即可。

## 2. storyboard ##

但是在苹果storyboard中，我们需要把上图切分为以下六个部分：

1.  中间的大圆
2.  顶部的小圆
3.  底部的小圆
4.  左侧的小圆
5.  右侧的小圆
6.  背景图或背景色

然后在对以上元素依次进行布局调整，最后达到适配绝大多少屏幕的需求。

当然还有一种原始方式就是将以往的各个分辨率的启动图片转换为storyboard；这种方式虽然满足了应用上架的要求，但是有点掩耳盗铃的意思。

# 二、制作 #

## 1. Xcode ##

Mac 上的Xcode自带storyboard的编辑工具，在这里面我们可以对启动也进行各种ios设备的调试及效果预览。  
这种方式局限性比较大，只适合有Mac设备和有一定经验的开发者，我也不太熟悉，这里就不细讲了。

## 2. 编辑替换 ##

如果没有相关环境也不熟悉storyboard编辑，也可以下载[官方storyboard示例文件][storyboard]，使用HBuilderX 打开 .storyboard文件，作为xml文件编辑自定义修改部分样式。  
这种方式存肯定不如直接编辑storyboard来的自由，但是也能满足绝大多数应用的启动页样式了。

### 背景 ###

页面可以指定单一的背景色，需要将rbg的值分辨转换为0-1的值，可精确到小数点后17位。

*  如果应用主体风格突出，建议使用和主题颜色统一的背景色，如抖音、网易云音乐等就是这样。
 *  如果应用主体风格不突出，建议使用白色背景，市面上绝大多数应用采用的次方案。

### 布局 ###

把主要显示内容分为上中下三个部分。  
你可以把这个三个部分中的内容从ps保持为有透明通道的png图，然后套用下面的类型即可。  
这里根据主流应用的配置情况，主要把启动页的布局分为以下几种类型：

#### 内容居中上型 ####

![在这里插入图片描述][20210125111429355.png]

#### 内容居正中型 ####

![在这里插入图片描述][20210125110854599.png]

#### 内容居中下型 ####

![在这里插入图片描述][20210125111624687.png]

#### 内容中上+中下型 ####

![在这里插入图片描述][202101251126297.png]

#### 内容正中+中下型 ####

![在这里插入图片描述][20210125111725962.png]

#### 内容上+中+下型 ####

![在这里插入图片描述][20210125111525430.png]

如果你的应用不是什么花里胡哨的，以上布局可以满足你的。  
具体的套用模板还在制作中，敬请期待。

[Link 1]: https://blog.csdn.net/xiaohui_brook/article/details/106475564
[iOS_storyboard]: https://ask.dcloud.net.cn/article/37475
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70]: /images/20221123/b6fed0fd69fe4fb8995d681f1b0d70e3.png
[storyboard]: https://ask.dcloud.net.cn/file/download/file_name-Q3VzdG9tU3Rvcnlib2FyZC56aXA=__url-Ly9pbWctY2RuLXRjLmRjbG91ZC5uZXQuY24vdXBsb2Fkcy9hcnRpY2xlLzIwMjAwODAzLzc2NjIwMzk3NmZjM2JmNTA1OGU4YzJjMzEwYTM1ZTJl
[20210125111429355.png]: /images/20221123/109f51f923de48ceb430f5ed6c2d18c3.png
[20210125110854599.png]: /images/20221123/0481166b9527447b8073724409700d90.png
[20210125111624687.png]: /images/20221123/bf2ee5e2a029481e8dca9fcc8c5a4d28.png
[202101251126297.png]: /images/20221123/f0430b96bbb64962bffabf5b2b597ee1.png
[20210125111725962.png]: /images/20221123/fb89fc9ba3a1408a9ebae8da139b2e60.png
[20210125111525430.png]: /images/20221123/26e01796ec2c451baf2ad741a9d28ed1.png