swift 开发欢迎界面的小实例

开发环境为 Xcode9 语言为 swift 4.2 开发一个可以滑动切换的欢迎界面,底部为页面切换导航,左右为前一页和后一页的按钮,中间为页面指示器。通常我们会用 storyboard 添加组件来画界面,然后在 ViewController 中来获取或者说绑定组件来添加动作或重置一些属性。这个和 android 的布局 xml 和 Activity 的关系如出一辙,不知道随借鉴谁的了,今天我们不这样做,我们直接在 controller 来画界面

swift 开发欢迎界面的小实例_第1张图片

先定义左边的按钮,上一页,这里使用 swift 的闭包来定义一个 UIButton 组件,这样可以让代码从主方法中分离出来看起来更清晰。如果定义一个 Button 想必大家看代码就清楚了。

swift 开发欢迎界面的小实例_第2张图片

然后定义左边的按钮,下一页

swift 开发欢迎界面的小实例_第3张图片

创建页面指示器,这里不得不说开发 iphone 应用要比开发android 省力得多,我们首先无需考虑各种五花八门的机型和不同 android 版本兼容,而且 ios 一些组件,本来就很美,使用这些组件很容易说服客户。

swift 开发欢迎界面的小实例_第4张图片

最后我们在创建好的组件,添加到一个 UIStackView 中。

在定义组件中我们可以自定义使用 UIColor 一些颜色,为了提高复用性。我们可以通过extension 来将我们定义好颜色添加到 UIColor 中。

这样我们就可以轻松地使用定义好的 .mainPink 来进行替换了。

这些都创建好了我们,接下来我需要添加一些动作,通过swipe 动作来切换页面,首先我们创建一个 swift 类—SwipingController

首先我们看一下,我们应用是如何指定一个UIViewController 来渲染我们的第一个界面,在 android 我们通过配置 manifest 可以指定起始界面,当然也可以通过代码来指定,在 ios 中我们在 AppDelegate.swift 中来指定一个启动界面看一看代码吧

swift 开发欢迎界面的小实例_第5张图片

然后运行程序看一看我们结果

swift 开发欢迎界面的小实例_第6张图片

  测试成功,我们现在将程序启动controller 指定为我们刚刚创建好的 swipingController

swift 开发欢迎界面的小实例_第7张图片

我们看一看是如何实现,我们通过 section 将界面划分为几个单元,然后将每个单元大小占满全屏,最后将上下滑动的模式改为左右滑动模式,这就是我们的基本思路了。

我们视图划分为几个小单元区域

swift 开发欢迎界面的小实例_第8张图片
swift 开发欢迎界面的小实例_第9张图片
swift 开发欢迎界面的小实例_第10张图片

我们通过代码可以控制单元大小,这里设置为 100 x 100 大小的小块

swift 开发欢迎界面的小实例_第11张图片
swift 开发欢迎界面的小实例_第12张图片

我们将单元大小设置为全屏,也就是高和宽都是屏幕的大小

swift 开发欢迎界面的小实例_第13张图片

设置滑动模式为水平滑动,然后就出现上图效果,离我们预期越来越近了

你可能感兴趣的:(swift 开发欢迎界面的小实例)