再造轮子之网易彩票-第一季(IOS 篇 by sixleaves)

前言

在网上看了别人做的模仿网易彩票的项目, 于是也跟着用自己的想法做了一篇。 写这篇博客的目的, 在于UI综合的一次小练习, 同时总结和串联其各个控件之间的应用、封装思想等。考虑到有人上不了github, 代码会在最后一次性发到百度云盘, 敬请关注

工欲善其事, 必先利其器

一、画其形:

在做该项目前, 我们先把项目的大体框架搭好。再依次迭代开发, 逐渐完善所有的功能. 首先: 观察网易彩票项目的app, 先在手机上把整个app的功能都浏览一篇。可以大体上分析出框架的结构。 分析: 很明显在一进入的界面最下面是一个UITabBar, 而上面是UINavigationBar。并且当我们点击每个UITabBarButton的时候, 会切换到不同的UINavigation, 所以该app的构架是基于UITabBarController的多个UINavigation的切换。于是我们可以通过storyBoard快速搭建出下面的界面。

至于搭建的过程, 是十分基本的技能, 不在详细说明，需要注意的是记得在SB中指定初始化的控制器 以下是在模拟器中运行的效果图

二、画其神

我们把大体的软件轮廓给勾勒了出来, 接着我们应该思考应该从哪个方面入手继续迭代这个软件, 将其内容补充完整。也就是说我们有两种选择方法， 其一、我们可以选择从最有挑战难度的方面入手, 逐步完善。其二，我们可以选择从比较简单的方面切开个口子, 逐步完善。我还是比较推崇第二种 方法, 在我看来, 人们总是偏向于构建简单的事物, 而不是复杂的事物。简单的东西不容易出错，而复杂的东西具有太多需要考虑的方面，会因此有很 大的不稳定性。所以我选择从UITabBar入手, 由于该软件中, 我们只需要图片，而不需要底部的文字信息，所以我们自定义SWPTabBar，但我们不选择继承 自UITabBar, 因为其有些特性是我们不想要的, 继承自UIView。既然自定义了SWPTabBar那么这个控件必须也要具备一些UITabBar一样的控件。在这里一个SWPTabBar 必须有对应的数量的按钮(UITabBarController的子控制器个数)。而我们正是为了自己来确定这个按钮才自定义，所以还需要在自定义SWPButton，继承自 UIButton。在创建出三个对应的类之后, 必须记得到SB中更改各个控件关联的类。这里只需要更改, UITabBarController=====>SWPTabBarController。 想想为什么？

分析： 那么接下来我们如何应用自己定义的SWPTabBar, 和SWPButton呢? 首先我们要明确一点，SWPTabBar这个控件由SWPButton这个控件构成。所以我们思考的重点是 如何封装这个控件, 方便后续程序的扩展, 比如，某天，项目需求一改，项目经理规定把SWPTabBar的栏目切换为6个,或者删掉几个，换成三个。我们要做到的效果就是，当遇到 这种需求，只需要改几行的代码，插入几行新的代码，而不用去更改项目的整个构架就可以适应这种需求。当然这只是一个主要的标准。在达到这个标准之后，我们还需要注意 一点就是尽可能的规范代码，优化代码。

切开口子，跟我慢慢来: 1. 接着我们编写SWPTabBarController给其加入自定义的SWPTabBar。这样就能显示出自定义的TabBar了。想来看看这个纯洁的控件，还没添加按钮的时候。能不能 正常的显示到SWPTabBarController的View上。代码和实现效果如下, 比较简单其自己阅读代码

@implementation SWPTabBarControllerViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    
    //  添加自定义tabBar先测试下
    SWPTabBar * tabBar = [[SWPTabBar alloc] init];

    tabBar.frame = self.tabBar.frame;
    
    tabBar.backgroundColor = [UIColor greenColor];
    
    [self.view addSubview: tabBar];
}
@end