天天看点

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

最终的效果:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

<1>第一个场景:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

1.本地化 界面简体中文化

supporting files - info.plist

localization native development region 本地的编程的地区

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

选择china,这样的话,用到系统的ui组件,就会变成中文的样式。

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

2.文本框占位符

属性:placeholder

另外需要积累的是:clear button

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

appears while editing :当你输入的时候会出现这个(清除)按钮

3.自动布局

添加文本框顶部,左侧和右侧间距约束

距离左边的:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

距离顶部的:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

距离右边的:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

距离底部的:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

<2>第二个场景:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

1.从控件库中添加table view controller之后,因为要打开app第一个界面就是度假清单的列表,所以要:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

选择这个is initial view controller(初始场景控制器),然后就会出现剪头的位置在table view controller之前:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

这样调换场景秩序完成。

<其实也可以直接拖拽那个剪头到你想要作为开头场景的视图控制器之前,可以试试看>

2.静态数据

设置表格视图属性内容-静态单元格样式-基本(带标签)

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

dynamic prototypes(动态)就是在程序代码中 设置表格有哪些内容。static cells静态。

然后选中table view cell然后在属性中找到stye改成basic基本样式:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

然后双击界面显示的title,可以输入文字,比如“北京”,然后如果要复制列表,就按着option,然后选择一个列表框,拖拽复制一个列表。

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

<3>场景间的转场-过渡(segue)

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

然后双击导航条,可以输入文字:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

找到这个bar button item组件,略看英文就知道,这个组件可以添加到导航条上使用:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

然后拖拽到导航条上:

然后选择style,选中add,item就会显示 + 的符号:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

先来运行一下看看:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

同样的为第一次做的界面视图(通过设置场景秩序已经不是第一个开启的界面了:)增加一个导航条:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

然后是为按钮添加事件:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

(deprecated是废弃的意思,这里两个废弃的是之前ios7的功能)

在这里我们选择show,因为show是堆栈,可以返回的,为了显示出返回按钮,要把,第二个显示的新增度假地视图的上面的两个按钮删除,然后选中这个第一个度假地列表的视图上的导航条,然后在右边属性的back button后面添加:退出 (或者返回两字),也就是说这里的back button的作用对象是选中的导航条,而不是在选中的导航条上添加back button作用的按钮组件。

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

然后运行,点击+之后就会出现(这里我后面改成"返回"了):

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

然后,我们把第二个视图按钮添加回到导航条上,编辑和添加作用的两个按钮,然后重新为第一个导航条上的添加按钮重新设置事件:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

选中:persent modally,然后注意剪头上的图标变化成简单的正方体了:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

然后运行操作的时候,就会发现第二个视图是从下往上出现的。好了,视图转场我们先到这里。

<4>定制视图控制器

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

添加一个类来自定义定制视图控制器:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

将第二个视图(新增度假地)绑定到这个自定义的类:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

然后同样的为第一个表格控制器绑定一个类:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

<5>反向过渡

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

在vacationlisttableviewcontroller.swift添加一个反向事件:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

注意:上面注释的地方就有一样的部分,如果不记得具体怎么写,可以参考或者拷贝。

然后回到viewcontroller:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

然后就可以绑定到前面写的方法了。

同样的,为右边add按钮也添加绑定到那个方法:

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

这样做的目的就是实现:当我们按取消就退出这个页面到前面一个页面,或者按add按钮也能退出到前面一个页面。从而实现了取消当前新增业务或者完成当前新增业务的同时都能回到前面一个页面的逻辑。

这样就完成了一个反向过渡。

<6>完整界面

将第一个列表界面的table view选中,然后将之间静态模式改为动态模式,这样就可以通过代码来操作列表。

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记

<7>实现(implement)使用设计模式

目标-操作(windows里叫 事件-驱动)

接下来我们设计mvc中的c,也就是数据存储结构的设计。

小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记