接到老板的一个紧急任务要把一个Web端的销售平台移植到iPad上,但暂时没有其他人手腾出手来参与这个项目。由于是功能照搬,就想到何不尝试利用Storyboard来做iOS原型,好给设计出设计图。
注:此方法创建的原型不支持交互效果,主要是利用Xcode自带的控件库,也不作为项目界面的实际创建
声明:此教程仅供个人参考阅读,不得以任何形式用于商业用途。
第1步:在Xcode中建空项目。以下演示采用了Xcode10.1。




第2步:为Storyboard添加原型元素。
点击左边项目资源管理器中的Main.storyboard,然后在Storyboard下面的工具栏更改你期望的设备视图。




按上面的方法再拖动一个NavigationBar到现有控制器上,设置坐标与宽高使其与之前的导航栏水平对齐宽度撑满剩下的空间: 如,X 238 Y 24 Width 956。双击导航栏上的标签可以在右侧边栏的外观设置面板(上述尺寸设置面板左边一栏)设置导航栏标题(Title)。
绘制级联控制器视图之间的分割线
按照上面的方法打开标准控件库,然后搜索框键入UIView筛选标准控件,拖动View到现有控制器,并保持View标准控件选中,在外观设置面板中设置背景图为自定义色如下图所示。


保持View标准控件选中,切换到尺寸设置面板,设置坐标和宽高使其高度撑满如下图所示,这样级联控制器视图之间的分割线就完成了。

绘制左边列表控制器的功能列表
标准控件库中搜索框键入UITableView筛选标准控件,拖动TableView到现有控制器,并保持TableView标准控件选中,在尺寸设置面板设置坐标与宽高:如,X 0 Y 74.5 Width 238 height 760。
切换到外观设置面板,设置内容为静态单元格按如下图标示。

制作功能列表模版
在左边StoryBoard的图层面板中选择TableViewSection,如下图标示。




完成功能列表
再根据上面更改静态单元格数量的方法把单元格数量更改为你期望的单元格数,如5。双击单元格中的标签可以在右侧边栏的外观设置面板中更改功能名称(Text)。
最终效果图

绘制右侧详情控制器
右侧详情控制器的绘制也是类似的,在标准控件库中搜索需要的标准控件,拖到现有控制器上,然后设置坐标与宽高,以达到原型布局的要求,具体步骤不再赘述。
要新建页面(控制器),只要在标准控件库中搜索ViewController即可。
Just enjoy it!
如果你觉得此篇文章非常有用,请给我点喜欢或打赏哦!
网友评论