前言

在網上看了別人做的模仿網易彩票的項目, 于是也跟著用自己的想法做了一篇。寫這篇博客的目的, 在于UI綜合的一次小練習, 同時總結和串聯其各個控件之間的應用、封裝思想等。考慮到有人上不了github, 代碼會在最后一次性發到百度云盤, 敬請關注

工欲善其事, 必先利其器

一、畫其形:

在做該項目前, 我們先把項目的大體框架搭好。再依次迭代開發, 逐漸完善所有的功能.首先: 觀察網易彩票項目的app, 先在手機上把整個app的功能都瀏覽一篇?？梢源篌w上分析出框架的結構。分析: 很明顯在一進入的界面最下面是一個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