iOS自定義控件教程（一）看看吧，總會獲得你想要的

簡介

本文將是一個關於Cocoa Touch中UIKit框架的自定義控件系列教程，咱們將從基礎開始，由淺入深，分析講解自定義控件的相關知識和技巧。

基礎概念，給新人看

基礎知識

1. UIKit是iOS系統使用的界面框架

2. UIKit中最基本的類是UIView，也就是界面的基礎操做類

3. iOS使用的渲染框架叫Core Graphics，因此纔回有CG開頭的一堆基礎類型，如CGFloat(浮點),CGPoint(點),CGSize(尺寸),CGRect(矩形)

4. UIView對象都包含至少一個CALayer對象，CALayer纔是最終渲染出效果的對象

5. UIView和CALayer的層級關係是相同的，他們都是多叉樹，同一個父View(superView)的子View們（subViews）是有層級覆蓋關係的，上層的View遮擋下層View

6. 這裏所說的層關係和設計軟件中的層關係是相似的，如Photoshop，Sketch等

7. UIView和CALayer的分工是，前者負責保存屬性和處理響應鏈，後者負責渲染

1、 UIView的基本屬性和方法

今天咱們一塊兒作一個多段選擇的自定義控件，順便學習UIView的基本屬性和方法。先來看一下實現的效果：Github下載源碼

先講一下思路 咱們繼承UIView寫一個XXXSegmentView，用UILabel做爲XXXSegmentView的子View，顯示上圖中的標籤。

咱們的多段選擇View，暫且命名爲XXXSegmentView，繼承自UIView。首先建立一個新文件，選擇xcode菜單，File －> New -> File

獲得文件XXXSegmentView.h和XXXSegmentView.m，咱們給XXXSegmentView寫一個初始化配置的方法，- (void)configForTitles:(NSArray<NSString*>*)titles;。

@interface XXXSegmentView : UIView
 
- (void)configForTitles:(NSArray<NSString*>*)titles;
@property (nonatomic, assign) NSInteger number; //記錄titles的個數
@end

這裏註明了要使用者傳入一個包含字符串類型的數組。這樣咱們的自定義控件之要兩步就能初始化完畢，以下在ViewController中加入初始化代碼:

- (void)configSegment
{
    XXXSegmentView* segment = [[XXXSegmentView alloc] initWithFrame:CGRect(0,0,300,80)];
    
    //加入三個標題，內容入數組中傳入
    [segment configForTitles:@[@"Main",@"More",@"Me"]];
    
    [self.view addSubview:segment];
}

解釋:CGRect(0,0,300,80)返回一個CGRect數據，是一個矩形，前兩個值是起始點，也就是左上角的座標，後兩個數是尺寸，300是寬，80是高

接下來咱們須要實現configForTitles這個方法了。來到XXXSegmentView中，咱們加入代碼:

- (void)cleanAll
{
    [self.subviews enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
        if ([obj isKindOfClass:[UILabel class]]) {
             [obj removeFromSuperview];
        }
    }];
}

解釋:cleanAll這個方法，經過self.subviews方法，返回的是包含了segmentView的所有子view的數組，而後用enumerateObjectsUsingBlock方法進行快速枚舉，篩選出其中是UILabel的View，調用它的removeFromSuperview方法將其移除

這個函數存在的意義，就是在使用者屢次調用configForTitles更改標籤的時候，清除掉舊的Label。

- (UILabel*)standLabel
{
    UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
    label.font = [UIFont systemFontOfSize:14];
    label.textColor = self.tintColor;
    return label;
}

解釋：UILabel類是UIView的子類，用於顯示文字，支持多行顯示，支持改變字體和顏色
[UIFont systemFontOfSize:14]方法返回一個系統字體對象UIFont
label.textColor = self.tintColor;這一步將咱們segment的tintColor傳給了Label做爲字體Color

所謂的TintColor能夠理解爲控件的高亮顏色，是UIView的默認屬性，因此繼承於UIView的XXXSegmentView也有這個屬性，而且有默認值。

- (void)configForTitles:(NSArray *)titles
{
    [self cleanAll];
     self.number = titles.count;
    [titles enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
        UILabel* la = [self standLabel];
        [la setText:obj];
        [la setBackgroundColor:[UIColor clearColor]];
        [self addSubview:la];
        la.tag = idx + 981;
    }];
}

解釋咱們首先記錄了標題的個數，而後調用cleanAll方法，清楚舊的Label，而後根據傳入的titles數組，給View加入新的Label，而且，咱們給label加了文字，和透明色([UIColor clearColor])的背景。

最後咱們給每個Label加了一個Tag編號，這個編號從981（這個數是我隨便選的，你也能夠選個更大的）開始，用來標記咱們的Label們先後順序。

佈局入門

代碼寫到這裏，咱們運行軟件，並不能獲得想要的並排展現效果，由於咱們全部的label，位置沒有作調整。

用什麼屬性控制UIView的位置呢？答案是Frame屬性。

咱們把屏幕比做一個畫板，左上角是(0,0)座標，frame則是一個矩形，如CGRect(0,0,100,50)表明一個從(0,0)點開始，寬100，高50的矩形。當咱們從新設置UIView的Frame屬性，他們的位置就改變了。

因此咱們給XXXSegmentView.m加入以下代碼:

- (CGRect)boundsWithLabel:(UILabel*)label
{
    return [label.text boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, label.frame.size.height) options:NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName:label.font} context:nil];
}

這個方法用來返回一個字符串渲染出來的邊界，boundingRectWithSize:CGSizeMake這個方法比較複雜，初學者看不懂直接粘過來用下就行，這裏不須要理解。
不過我仍是要解釋一下，這個方法傳入的第一個CGSize是，外包圍的限制，CGFLOAT_MAX返回的是最大的浮點數，也就是這裏在計算寬度時不作限制。NSStringDrawingUsesFontLeading屬性表示用自字體做爲計算行高的標準，attributes字典傳入的是文字的渲染樣式，NSFontAttributeName鍵傳入文字的字體和字號，返回的CGRect是文字根據以上要求，渲染出來的外包圍。

- (void)layoutSubviews
{
    [super layoutSubviews];

    [self.subviews enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
        if ([obj isKindOfClass:[UILabel class]]) {
            UILabel* label = obj;
            CGRect rect = [self boundsWithLabel:label];
            [label setFrame:CGRectMake(0, 0, rect.size.width, rect.size.height)];
            label.center = CGPointMake(self.frame.size.width/(self.number*2)*((label.tag-981)*2+1), self.frame.size.height/2);
        }
    }];
}

解釋layoutSubviews 方法是UIView的固有方法，這個方法在咱們View須要給子View佈局的時候會自動調用，咱們重寫了這個方法，因此要用super指針，先調用父類方法[super layoutSubviews];，雖然UIView的layoutSubviews方法頗有多是空的，但這是好習慣。

而後咱們又經過subviews數組快速遍歷子View，篩選出UILabel對象，由於咱們的子View中之後要加入其它不是UILabel的對象。遍歷過程當中咱們改變Label的外包圍，經過上面說的計算外包圍的接口，而後經過center(中心點)這個UIView的屬性來改變子Label的位置。label.tag-981是Label的序號，self.frame.size.width是咱們SegmentView的寬度，self.number是label的個數。

而後咱們再運行程序，是否是完成了Label的佈局啦，並不複雜，下一篇咱們將繼續講解。