前端零基础学IOS 开发| 青训营笔记

175 阅读2分钟

项目代码 MyCalculator


1、 前端零基础学IOS 开发| 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第2天

在上一篇文中,我们学习了swift的一点基础的皮毛,在这一篇文中,我奖使用Xcode做一个简单的计算器

2、计算器界面的设计

2.1、新建一个工程

这里我们Interface选择Storyboard,语言选择Swift

image.png

2.2、页面布局

进来以后我们先选择Main,进入页面设计,首先给整个view一个黄色的背景,然后在创建一个Vertical的Stack View,并在这个view里面创建4个vertical的Stack View,并在每个view里面放上4个按钮,如图所示,然后我们给这个最大的Stack View添加水平处置居中,并且左右变的距离都是0,然后微调布局,最后在这个大的Stack View 上添加一个Lable,让这个Lable水平居中,然后,距离这个大的Stack View的距离为0,距离左右的距离为0,就会出出现上面的样子

image.png

3、计算器的程序设计

3.1、注册所有的按钮

可以让界面和程序分栏,然后选中对应的元素,然后按住control拖过来就可以啦

image.png

3.2、设置变量

初始化我们要计算的第一个数和第二个数字,并且初始化两个变量作为类似于指针的东西,最后再初始化一个符号,然后再重写的Load函数里面吧lable的值初始化

image.png

3.3、数字按钮注册

编写一个改变lable显示的函数起名为updateUi,并且注册一下所有的按钮,每一个按钮都进行判断,如果它第一个值为空的话,我点击后这个值就是第一个,如果不是就是第二个,并且实时更新页面

image.png

3.4、符号按钮注册

点击+-X/后,让符号变量变成我们现在的,点击=后,根据当前符号的值,计算出结果,然后在Lable中显示,最后再清楚符号,“指针“还有两个数字,最后是惦记C(clear)清除按钮后,清空所有的变量赋号之类的。

image.png

image.png

# 4、编译

image.png

5、总结

这一节呢是主要是练习了一下布局,这个IOS的布局主要是依靠相对位置来做的,先确定一个水平垂直的元素,后面的元素都相对这个元素布局就可以啦,前端的布局方式就很多了,Flex,Grid,绝对定位,相对定位,等等,由于这一节是主要做一个练习,所以,和前端的对比,就忽略了,有疑问我们可以一起讨论。