最近把iOS里的UI組件重新整理了一遍豺谈，簡單來看一下常用的組件以及它們的實現(xiàn)儒洛。其實現(xiàn)在這些組件都可以通過Storyboard很快的生成刮萌，只是要向這些組件能夠變得生動起來并且賦予它們更具生命力的事件券坞，還是需要一番功夫的占贫。

UIButton

這兒有一篇教程桃熄，挺全的，可以參考下：http://www.cnblogs.com/chen1987lei/archive/2011/09/09/2172757.html

這個就不多說了，對照官方的文檔也可以更多的去學(xué)習(xí)瞳收。插一句題外話碉京，在學(xué)這些組件的時候，最令人頭疼的不是你搞不定一個組件的某個屬性或者方法螟深，而是你壓根兒不知道有這個東西谐宙。所以在學(xué)習(xí)這些組件的時候最好的方式還是通過官方文檔，雖然已開始可能有些困難界弧，但是硬著頭皮去啃凡蜻，就一定會有悟道的那一天。建議有問題先去看文檔垢箕，如果實在不行再去Google啊划栓，Stack Overflow啊神馬的。

UIAlertController

彈出式的提示框√趸瘢現(xiàn)在市面上的書籍包括網(wǎng)上的一些資料都還停留在iOS8之前的時代忠荞，那個時候的彈出框是一個叫做UIAlertView的東西，但是現(xiàn)在帅掘，在XCode7和iOS9的時代委煤，你會發(fā)現(xiàn)這個東西被棄用了。蘋果自iOS8開始修档，廢除了UIAlertView而改用UIAlertController來控制提示框碧绞。

來看看UIAlertController的實現(xiàn)吧，下面這個程序是我在練習(xí)UITableView時的代碼萍悴，實現(xiàn)了一個類似與通訊錄的東西头遭，我們抓住主要矛盾，來看點擊某一行cell后癣诱，彈出的消息提示框是怎么實現(xiàn)的计维。以下代碼在ViewController.m中實現(xiàn)。

//創(chuàng)建提示框窗口

UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"System Info" message:[contact getName] preferredStyle:UIAlertControllerStyleAlert];
//實例化取消按鈕  
UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"Cancel" style:UIAlertActionStyleCancel handler:^(UIAlertAction *action) {
    //點擊取消按鈕后控制臺打印語句撕予。
    NSLog(@"The \"Okay/Cancel\" alert's cancel action occured.");
}];
//實例化確定按鈕    
UIAlertAction *otherAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) {
    NSLog(@"The \"Okay/Cancel\" alert's other action occured.");
    //下面這段代碼不用管它鲫惶，簡單點講就是獲取當(dāng)前行的一個字符串。
    UITextField *textfield = alertController.textFields[0];
    KCContactGroup *group = _contacts[_selectedIndexPath.section];
    KCContact *contact = group.contacts[_selectedIndexPath.row];
    contact.phoneNumber = textfield.text;
    NSArray *indexPaths = @[_selectedIndexPath];
    [_tableview reloadRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationLeft];
}];
    
//向彈出框中添加按鈕和文本框
[alertController addAction:cancelAction];
[alertController addAction:otherAction];
[alertController addTextFieldWithConfigurationHandler:^(UITextField *textField) {
    // 可以在這里對textfield進(jìn)行定制实抡，例如改變背景色等
    textField.text = contact.phoneNumber;
}];
//將提示框彈出
[self presentViewController:alertController animated:YES completion:nil];

實現(xiàn)了大概就是這個樣子欠母，文本框里的東西是從cell里面提取的。

這里還有一句題外話要講吆寨。網(wǎng)上是沒有任何關(guān)于最新的UIAlertController的使用教程的赏淌，我自己用了整整一個下午看官方文檔一步一步調(diào)試才實現(xiàn)了這個惱人的提示框。官方的文檔真的是個好東西啄清，越用越強(qiáng)大Ａ！

UISegmentedControl

分段控件，就是一欄按鈕集成在一排里掷贾。很簡單睛榄，就像Button一樣。這個樣子的：

UISwtich

按鈕控件想帅，手機(jī)里開飛行模式的那個東西场靴。通過Storyboard可以很快很方便的建立，不要忘了關(guān)聯(lián)起來就好港准。

這里簡單講一下它的純代碼實現(xiàn)旨剥，其實包括上面的UISegmentedControl，還有下面的一些簡單控件它們手寫實現(xiàn)的方法都是一樣的叉趣。截張圖給大家說明一下就好了泞边，都是一樣的该押，后面的類似的控件也不多啰嗦了疗杉。

UISlider

進(jìn)度條型的選擇控件，對應(yīng)數(shù)值蚕礼，可以進(jìn)行設(shè)置音量等操作烟具，根據(jù)官方文檔可以看到很多關(guān)于它的設(shè)置，基本實現(xiàn)同上奠蹬。

UIPageControl

這是個好東西朝聋。

這是個好東西。

這是個好東西囤躁。

重要的事情說三遍冀痕。個人認(rèn)為，它雖然很小狸演，但絕對逼格夠高言蛇，搭配UIScrollView，絕對讓你的界面高端起來宵距。

關(guān)于這個的代碼不小心被我刪掉了腊尚，沒法給大家展示，不過過幾天我會用這個做一個APP的歡迎界面满哪，到時候再展示咯婿斥。

UITextField

簡單控件，可以參考先前的傳值操作（傳送門：iOS開發(fā)——從一道題看Delegate）哨鸭，基本上把這個的用法實現(xiàn)的差不多了民宿，要想更多地設(shè)置它————官方文檔見。

UIDatePicker

顧名思義像鸡，日期選擇控件活鹰。實現(xiàn)同上。

UIScrollView

有的時候呢，我們的照片华望，或者圖片會很大蕊蝗，而允許我們輸出的窗口卻不夠大，那么我們就需要這個家伙來幫忙了赖舟，它可以讓一張圖片在一個視圖里滾動展示蓬戚，效果類似于。宾抓。子漩。做B超？（天石洗，怎么會有這種腦洞大開的比喻）

大概就是這樣整的：

UITextView

還是一個可編輯文本框幢泼，與先前的UITextField不同的是，這個可以顯示更多行的內(nèi)容讲衫，還可以對他進(jìn)行編輯的監(jiān)控缕棵，通過代理方法，我們可以獲取該文本框中的內(nèi)容涉兽，在實際的應(yīng)用中招驴，發(fā)布什么長微博啊，文本啊枷畏，都能用到它别厘。

這里實現(xiàn)沒什么好說的，主要來看看它的幾個代理方法：

UIToolbar

開發(fā)中經(jīng)常會用到的控件之一拥诡，實現(xiàn)起來也很簡單触趴，與此同時我們還要知道 UIBarButtonItem 和 Fixed Space Bar Button Item，這兩個小東西是在Bar上的按鈕和間距渴肉，都被對象化了冗懦。

來看代碼：

#import "ViewController.h"

@interface ViewController ()
//聲明
@property (nonatomic, strong) UIToolbar *mytoolbar;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //實例化
    self.mytoolbar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 30)];
    //添加到視圖
    [self.view addSubview:self.mytoolbar];
    //選擇風(fēng)格，這里我們選擇黑色風(fēng)格
    self.mytoolbar.barStyle = UIBarStyleBlack;
    //添加按鈕和按鈕之間的間距宾娜，這些都被對象化了批狐，按鈕是可以實現(xiàn)方法的
    UIBarButtonItem *item1 = [[UIBarButtonItem alloc]initWithTitle:@"hello" style:UIBarButtonItemStylePlain target:self action:@selector(sayhello)];
    UIBarButtonItem *fixed = [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
    
    UIBarButtonItem *item2 = [[UIBarButtonItem alloc]initWithTitle:@"bye" style:UIBarButtonItemStylePlain target:self action:@selector(saybye)];
    //實例化的UIToolbar里面有items屬性，是一個數(shù)組前塔，用來存放我們要加上去的按鈕
    self.mytoolbar.items = @[item1, fixed, item2];
    
}
//點擊item要實現(xiàn)的方法嚣艇，輸出hello或者bye
- (IBAction)sayhello{
    NSLog(@"hello");
}

- (IBAction)saybye{
    NSLog(@"bye");
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

UIPickerView

與前面的時間選擇類似，只不過這個你可以自己設(shè)置內(nèi)容华弓。

UITableView

BOOM!

強(qiáng)大食零，異常強(qiáng)大。不多說寂屏，我推薦看iOS開發(fā)系列--UITableView全面解析這篇文章贰谣，寫得很棒娜搂。

我自己也把大部分的學(xué)習(xí)時間用在了它的學(xué)習(xí)上，至今為止我覺得我還沒能真正做到熟練地使用它吱抚，等以后成熟了百宇，再寫吧。

UICollectionView

又是一個龐大的家伙秘豹，在很多壁紙類APP中我們可以看到它的影子携御。

關(guān)于它的實現(xiàn)，我總結(jié)為以下幾步：

• .h文件聲明代理和數(shù)據(jù)源
• .m文件具體實現(xiàn)
  • 聲明UICollectionView
  • 實例化既绕，包括設(shè)置大小啄刹，位置，顏色等等
  • 加載代理和數(shù)據(jù)源到實例化的view
  • 注冊cell（這里需要）
  • 將實例化的UICollectionView加入到View中
  • 實現(xiàn)數(shù)據(jù)源方法（包括必須實現(xiàn)的和選擇實現(xiàn)的）
  • 實現(xiàn)代理方法（包括必須實現(xiàn)的和選擇實現(xiàn)的）

關(guān)于數(shù)據(jù)源方法和代理方法凄贩，在這里需要特別說明一下誓军，我們還是會出現(xiàn)不知道這個數(shù)據(jù)源或者代理中到底有什么的困惑，我們要command進(jìn)去這些代理或者數(shù)據(jù)源去發(fā)現(xiàn)和尋找疲扎，文檔還是我們學(xué)習(xí)的最終歸宿昵时。

按照上面的步驟，實現(xiàn)代碼：

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic, strong) UICollectionView *collectionView;
@end
static NSString *cid = @"cid";
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    
    
    UICollectionViewFlowLayout *flowlayout = [[UICollectionViewFlowLayout alloc]init];
    
    CGRect flame = CGRectMake(20, 40, self.view.frame.size.width-40, self.view.frame.size.height-60);
    self.collectionView = [[UICollectionView alloc]initWithFrame:flame collectionViewLayout:flowlayout];
    
    self.collectionView.dataSource = self;
    self.collectionView.delegate = self;
    [self.view addSubview:self.collectionView];
    
    //注冊cell
    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:cid];
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 50;
}

// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cid forIndexPath:indexPath];
    
    cell.backgroundColor = [UIColor blueColor];
    
    return cell;
}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(10, 10, 10, 10);
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    return CGSizeMake(120, 100);
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    
    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
    cell.backgroundColor = [UIColor yellowColor];
    
    NSLog(@"%ld",indexPath.row);
}


- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath{
    
    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
    cell.backgroundColor = [UIColor blueColor];
    
    
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

UIViewController

接下來我們來聊聊ViewController评肆。視圖控制器在我們開發(fā)中最重要的 MVC模式 中扮演著重要的角色债查，作為顯示和數(shù)據(jù)的調(diào)度者，它的存在決定了我們的程序到底以怎樣的形式呈現(xiàn)在用戶面前瓜挽。

這個最基礎(chǔ)的Controller就不多說了，在目前的XCode中征绸，一般來說新建的第一個Single View就是用的這個久橙。

UINavigationController

很重要的一個東西。導(dǎo)航視圖控制器管怠。說簡單點它就是一個來存放視圖的棧淆衷，原則上先進(jìn)后出，一層一層的來管理在它里面的視圖渤弛。在學(xué)習(xí)它的過程中還要掌握UINavigationBar祝拯、UINavigationitem等控件，還要熟悉幾個pop她肯、push方法佳头。

既然是導(dǎo)航視圖控制器，導(dǎo)航自然不是導(dǎo)的一個視圖晴氨，而是管理多個視圖康嘉，實現(xiàn)的時候有很多需要注意的地方，我們一步一步的來看籽前。

首先新建一個工程亭珍，我們要純手寫代碼來搞定之敷钾。

第一步，建立我們需要管理的多個視圖肄梨。

“command+N”新建Cocoa Touch Class阻荒，命名為myViewController，Subclass of選擇為UIViewController众羡，重復(fù)四次财松，我們獲得了四個試圖控制器，也就是四個視圖纱控，接下來我們將用導(dǎo)航視圖控制器來管理它們辆毡。

第二步，初始界面設(shè)置

在這里甜害，我們需要來到AppDelegate.m文件舶掖，來配置初始界面，自定義- (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 方法尔店。

代碼如下：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    
    //獲取屏幕大小
    UIScreen *screen = [UIScreen mainScreen];
    //初始化窗口
    self.window = [[UIWindow alloc]initWithFrame:screen.bounds];
    //將視圖1設(shè)置為初始視圖
    myViewController1 *vc1 = [[myViewController1 alloc]init];
    //來個背景顏色區(qū)分一下
    vc1.view.backgroundColor = [UIColor blueColor];
    //實例化導(dǎo)航視圖控制器并添加視圖1進(jìn)來
    UINavigationController *nc = [[UINavigationController alloc]initWithRootViewController:vc1];
    //將導(dǎo)航視圖控制器設(shè)置為窗口根視圖
    self.window.rootViewController = nc;
    //設(shè)置窗口可見
    [self.window makeKeyAndVisible];
    
    return YES;
}

第三步眨攘，配置各個視圖

我們要在第一個視圖中實例化第二個視圖，并通過某種方式嚣州，使用UINavigationController跳轉(zhuǎn)到第二個視圖鲫售；在第二個視圖中實例化第三個視圖，以此類推直到最后一個視圖该肴。當(dāng)然情竹，我們也可以選擇直接跳到某個你想要去的視圖，比如從第四個視圖跳到第一個或者第二個匀哄。

我們現(xiàn)在視圖一中添加一個按鈕秦效，添加一個點擊按鈕的事件，注意涎嚼，我們就是通過這個事件方法來實現(xiàn)頁面的跳轉(zhuǎn)的阱州，myViewController1.m代碼：

#import "myViewController1.h"
#import "myViewController2.h"
@interface myViewController1 ()

@end

@implementation myViewController1

- (void)viewDidLoad {
    [super viewDidLoad];
    //設(shè)置視圖二樣式，添加一個按鈕法梯，點擊觸發(fā)事件苔货，跳轉(zhuǎn)到下一頁面
    
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
    [btn setTitle:@"GO" forState:UIControlStateNormal];
    btn.frame = CGRectMake(160, 100, 30, 36);
    [btn addTarget:self action:@selector(go:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
    
    UILabel *lable = [[UILabel alloc]initWithFrame:CGRectMake(160, 160, 100, 36)];
    lable.text = @"第一頁";
    [self.view addSubview:lable];
}

//這里才是實現(xiàn)頁面跳轉(zhuǎn)的重點！Ａ⒀啤Ｒ共选！
-(IBAction)go:(id)sender{
    
    
    myViewController2 *vc2 = [[myViewController2 alloc]init];
    vc2.view.backgroundColor = [UIColor greenColor];
    
    //看這里５蟊铩＠淖臁！Ｖ脸堋若皱！push方法將視圖一推向視圖二
    
    [self.navigationController pushViewController:vc2 animated:YES];
    
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

類似的镊叁，我們編寫myViewController2.m，myViewController3.m走触，myViewController4.m的代碼晦譬。我們稍微修改一下myViewController4.m中的go方法，讓視圖四直接跳到視圖二：

-(IBAction)go:(id)sender{
    
    //[self.navigationController popViewControllerAnimated:YES];    pop方法跳回前一視圖
    //[self.navigationController popToRootViewControllerAnimated:YES];  popToRoot方法直接跳回第一視圖 
    NSArray *controllers = self.navigationController.viewControllers; 
    //popToViewController方法互广，我們可以選擇要跳到的視圖
    [self.navigationController popToViewController:[controllers objectAtIndex:1] animated:YES];
    
}

UITabbarController

區(qū)別于UINavigationController的頂部導(dǎo)航敛腌，UITabbarController是底部導(dǎo)航，功能上差不多惫皱，可以直接切換多個視圖像樊，典型的應(yīng)用非常多，微信旅敷，QQ都是姻蚓，實現(xiàn)起來也是類似于上面的UINavigationController竿屹。

可以參考這篇資料：iOS開發(fā)UI篇—UITabBarController簡單介紹

簡單地總結(jié)到這里，只是很簡單的實現(xiàn)悦屏，日后通過文檔再慢慢地學(xué)習(xí)更深層次的內(nèi)容展融。