iOS计算器的搭建-UI界面部分

本周学习任务是编写iOS下自带的计算器app,本篇博客主要用于讲解遇到的数据UI界面的搭建
本次实现采用的MVC模式
M - 即主要是数据的处理
V - 就是视图的搭建
C -控制上面两个进行交互
首先这个界面如下所示
在这里插入图片描述
##V
实现这个页面在V层
首先应为页面主要是Button,主要是三种在这里我自定义了三种BUtton,其实在姜总之前给我可以写一种然后传不同的属性进去
感觉这两种都可以,不过当时已经创建了就采用了自定义的写法;就在-init方法里书写颜色字体就好了

这个页面还是比较简单的,不过和以往不同的是用的是Masonry布局,也就是相对布局,一开始还有点无从下手,后来想清楚其实也很简单,我的做法就是从左到右第一排,然后从上到下第一排,然后整体从左到右,这个其实很基础。
实现如下
大概就是这个样子最后会上传最终代码
在这里插入图片描述
页面布局就完成了
然后就在C层创建就好了这个也很简单
在这里插入图片描述
然后就是给每一个按钮添加点击事件
一开始我是想用枚举的方法添加代码如下
在这里插入图片描述
这样看上去好像没有问题
但是
运行一下
在这里插入图片描述
这啥啊?
百度了一下貌似也没有搞懂,先保留一下

后来在学长的帮助下,解决了这个问题
就是在枚举整个屏幕的时候,它会遇到显示的label,但是由于是button,所以在里面在进行一次判断就是是否属于你调用的类,就好
如下

				for (OPERButton * button in [self.rootView subviews] ) {
				        //NSLog(@"%@",button);
				        if ([button isKindOfClass:[OPERButton class]]) {
				            [button addTarget:self action:@selector(AddClick:) forControlEvents:UIControlEventTouchUpInside];
				    }
这个方法添加点击事件,也便捷了之后点击button后的点击效果

简单的不行,一个一个加总没有问题了吧,嗯没有,其实发现一个一个加有一个好处就是不用设置tag
在这里插入图片描述
在这里插入图片描述
大概就这样,然后运用 appendString 函数进行拼接。
我们的目的就是将输入的拼接成一个 NSString 然后可以转换成字符串就和之前的数据结构上面对接上了,可是遇到了问题
除号计算器上除号长这样 ÷可在运算里他是 /
同理 乘号 × 运算中 *,然后我的解决方法就是用两个NSString ,一个用于计算,一个用于拼接
在这里插入图片描述
接下来就是那个符号输出以后不能在输入符号,输入数字以后才可以,在这里我用了一个NSInteger,用于判定输入数字则令数字为0,输入符号则为1,然后是1的话就不能继续点击即可
类似这样
在这里插入图片描述

最后就是增加button点击的特效,也就是点击一下button会变色,然后再次点击会恢复原来的颜色如下在这里插入图片描述

这个样式的设置一开始也觉得比较简单但其实还费了一些功夫,具体思路
首先自定义button的时候设置它的被选中时的颜色

 [self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        [self setTitleColor:[UIColor colorWithRed:0.96f green:0.53f blue:0.00f alpha:1.00f] forState:UIControlStateSelected];
        
       然后在点击相应符号的点击符号是设置它的背景颜色
       
     self.rootView.mulButton.backgroundColor = [UIColor whiteColor];
	本来以为就这样就没有了问题,但是发现点击只会设置背景颜色,而button的标题没有发生变化,于是就打印了button的selected属性,发现它是不变的,需要手动设置
	
	 Button.selected = !Button.selected;

那我每一次点击都要设置我们就可以把它总体写成一个点击事件就每点击一次他的属性就会发生变化,然后用刚解决的问题进行枚举添加。就可以实现,整个计算器app的UI界面搭建基本就完成了,其实在这个过程中,还是会有一些细小的问题进行发现和更正,就一个app后期还需要满满打磨,博客就先写到这里,最后感谢姜凯文学长对问题的解答。

发布了34 篇原创文章 · 获赞 4 · 访问量 735

猜你喜欢

转载自blog.csdn.net/weixin_44824650/article/details/102266225