瘋狂ios講義之代碼控制UI界面

通過前面的介紹我們已經了解了iOS開發的基本方法和步驟實際上只要掌握了這些基本的方法和步驟我們就可以對iOS應用進行更多的控制。前面介紹的開發方式是使用xib或Storyboard文件設計iOS應用界面這也是iOS開發的最主要方式在某些極端的情況下我們也有可能不使用任何界面設計文件直接通過代碼來開發UI界面。

9.5.1  不使用界面布局文件開發UI界面

如果打算使用純代碼來開發UI界面則不需要設計任何界面布局文件沒有界面布局文件也就不再需要使用自定義的視圖控制器。這樣程序可以直接在應用程序委托對象的application: didFinishLaunchingWithOptions:方法中創建UIWindow和應用程序界面——所有這些對象的創建都使用objective-C代碼來完成。

實例×××面布局文件開發iOS應用

首先創建一個iOS的Empty Application應用。在創建iOS應用時選擇“Empty Application”項即可如圖9.35所示。

                        圖9.35 創建iOS的EmptyApplication應用

對于“Empty Application”類型的iOS應用Xcode只生成應用程序委托類不會生成任何界面設計文件也不會生成任何控制器類。

對于打算使用純代碼開發UI界面的開發方式來說我們的應用并不需要任何界面設計文件也不需要任何控制器。程序只要修改應用程序委托的application:didFinishLaunchingWithOptions:方法并在該方法中創建UI控件然后利用這些UI控件搭建應用程序界面即可。下面是修改過的application:didFinishLaunchingWithOptions:方法代碼。

程序清單codes/09/9.5/CodeUI/ CodeUI/FKAppDelegate.m

// 應用程序加載完成后將會自動回調該方法
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions: (NSDictionary *)launchOptions
{
    // 創建UIWindow對象并將該UIWindow初始化為與屏幕相同大小
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // 設置UIWindow的背景色
    self.window.backgroundColor = [UIColor whiteColor];
    // 創建一個UIViewController對象
    UIViewController* controller = [[UIViewController alloc] init];
    // 讓該程序的窗口加載并顯示viewController視圖控制器關聯的用戶界面
    self.window.rootViewController = controller;
    // 創建一個UIView對象
    UIView* rootView = [[UIView alloc] initWithFrame
        :[[UIScreen mainScreen] bounds]];
    // 設置controller顯示rootView控件
    controller.view = rootView;
    // 創建一個圓角按鈕
    UIButton* button = [UIButton buttonWithType: UIButtonTypeRoundedRect];
    // 設置按鈕的大小
    button.frame = CGRectMake(120, 100, 80, 40);
    // 為按鈕設置文本
    [button setTitle:@"確定" forState:UIControlStateNormal];
    // 將按鈕添加到rootView控件中
    [rootView addSubview:button];
    // 創建一個UILabel對象
    self.show = [[UILabel alloc] initWithFrame
        :CGRectMake(60 , 40 , 180 , 30)];
    // 將UILabel添加到rootView控件中
    [rootView addSubview:self.show];
    // 設置UILabel默認顯示的文本
    self.show.text = @"初始文本";
    self.show.backgroundColor = [UIColor grayColor];
    // 為圓角按鈕的觸碰事件綁定事件處理方法
    [button addTarget:self action:@selector(clickHandler:)
        forControlEvents:UIControlEventTouchUpInside];
    // 將該UIWindow對象設為主窗口并顯示出來
    [self.window makeKeyAndVisible];
    return YES;
}

上面的代碼中首先創建了一個UIWindow作為應用程序的窗口接下來創建一個UIView作為UIWindow顯示的根視圖需要借助一個UIViewController對象。

一旦程序中有了UIView作為容器接下來代碼歸納起來相當于只有三行此處的三行是一種歸納說法并非實際只有三行。

創建UI控件比如創建UILabel丶創建UIButton等。

調用addSubView:方法將UI控件添加到其他容器中。

多次調用UI控件的setter方法來設置UI控件的外觀丶行為。

上面代碼中為按鈕的觸碰事件綁定了clickHandler:事件處理方法因此程序還需要在應用程序委托類中定義該方法。方法代碼如下

程序清單codes/09/9.5/CodeUI/ CodeUI/FKAppDelegate.m

- (void) clickHandler:(id)sender
{
    self.show.text = @"開始學習iOS吧";
}

上面的代碼只是簡單地修改show控件的文本內容這樣即可實現當用戶觸碰按鈕時動態改變show控件的文本內容。

運行該程序單擊程序中的按鈕即可看到如圖9.36所示的效果。

通過上面的開發過程可以發現不管是通過純代碼來創建UI控件再將這些UI控件搭建成程序界面還是使用界面設計文件來搭建程序界面其本質是相同的。它們的本質都是把UI控件當成小的積木塊然后將這些“積木塊”按自己的意愿組合在一起就可以做成iOS應用的程序界面了。

需要指出的是使用純代碼方式來開發iOS應用并不是最好的開發方式這種方式不僅開發步驟異常煩瑣而且所有創建程序界面的代碼都由應用程序委托對象的方法負責完成這并不符合MVC設計原則因此不利于程序組件的解耦。通過學習這種開發方式我們可以更好地理解iOS應用中應用程序委托的作用同時也能更好地理解iOS程序界面的底層實現原理。

下面介紹一種更實用的代碼方式開發UI界面。

9.5.2  使用代碼創建UI界面

更實際的情況是在程序運行開始時程序已經具有一個初始的程序界面初始界面可能只包含一個UIView在程序運行過程中程序需要根據用戶交互來動態添加丶刪除UI控件。

在這種需求下我們可以通過Interface Builder來設計程序的初始界面接下來在程序運行過程中可以通過代碼創建UI控件再將UI控件添加到相應的父控件中即可。

實例動態添加丶刪除標簽

首先創建一個iOS的Single View Application應用創建完成后該應用將自帶一個Main.storyboard界面設計文件但我們并不打算修改該界面設計文件而是直接在程序代碼中創建整個UI界面程序只使用該界面文件中的UIView作為容器即可。

接下來修改控制器類在控制器類的實現部分創建整個程序界面綁定事件處理方法。下面是控制類的實現部分代碼。

程序清單codes/09/9.5/DynaLabel/DynaLabel/FKViewController.m

#import "FKViewController.h"
// 定義FKViewController的擴展
@interface FKViewController ()
// 定義一個屬性來記錄所有動態添加的UILabel控件
@property (nonatomic, strong) NSMutableArray* labels;
@end
@implementation FKViewController
// 定義一個變量來記錄下一個將要添加的UILabel的位置
int nextY = 80;
- (void)viewDidLoad
{
    [super viewDidLoad];
    // 設置該view的背景色
    self.view.backgroundColor = [UIColor grayColor];
    // 初始化labels數組
    self.labels = [NSMutableArray array];
    // 創建UIButtonTypeRoundedRect類型的UIButton對象
    UIButton* addBn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    // 設置addBn的大小和位置
    addBn.frame = CGRectMake(30, 30, 60, 40);
    // 為UIButton設置按鈕文本
    [addBn setTitle:@"添加"
        forState:UIControlStateNormal];
    // 為addBn的Touch Up Inside事件綁定事件處理方法
    [addBn addTarget:self action:@selector(add:)
        forControlEvents:UIControlEventTouchUpInside];
    // 創建UIButtonTypeRoundedRect類型的UIButton對象
    UIButton* removeBn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    // 設置removeBn的大小和位置
    removeBn.frame = CGRectMake(230, 30, 60, 40);
    // 為UIButton設置按鈕文本 
    [removeBn setTitle:@"刪除"
        forState:UIControlStateNormal];
    // 為removeBn的Touch Up Inside事件綁定事件處理方法 
    [removeBn addTarget:self action:@selector(remove:)
        forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:addBn];
    [self.view addSubview:removeBn];
}
- (void)add:(id)sender {
    // 創建一個UILabel控件
    UILabel* label = [[UILabel alloc] initWithFrame:
        CGRectMake(80, nextY, 160, 30)];
    label.text = @"瘋狂iOS講義";  // 設置該UILabel顯示的文本
    [self.labels addObject: label];  // 將該UILabel添加到labels數組中
    [self.view addSubview:label];  // 將UILabel控件添加到view父控件內
    nextY += 50;  // 控制nextY的值加50
}
- (void)remove:(id)sender {
    // 如果labels數組中元素個數大于0表明有UILabel可刪除
    if([self.labels count] > 0)
    {
        // 將最后一個UILabel從界面上刪除
        [[self.labels lastObject] removeFromSuperview];
        [self.labels removeLastObject];  // 從labels數組中刪除最后一個元素
        nextY -= 50;  // 控制nextY的值減50
    }
}
@end

上面的代碼中第一段粗體字代碼創建了應用的初始界面該初始界面只包含兩個按鈕并且程序還為這兩個按鈕綁定了事件處理方法。

該應用的關鍵就是實現add:和remove:兩個方法其中add:方法中粗體字代碼負責創建一個UILabel控件每次創建的UILabel的Y坐標并不相同并將這個UILabel控件添加到該控制器關聯的UIView內。這樣即可實現每次用戶觸碰該按鈕程序界面就會添加一個UILabel控件而remove:方法中粗體字代碼則負責把labels數組的最后一個元素UILabel控件從父控件中刪除并從該數組中刪除該元素。

通過上面的程序即可實現通過用戶交互來動態添加丶刪除程序界面控件。編譯丶運行該程序并多次觸碰添加丶刪除按鈕后可能看到如圖9.37所示的動態界面。

9.5.3  自定義UI控件

UIView控件只是一個矩形的空白區域并沒有任何內容。iOS應用的其他UI控件都繼承了UIView這些UI控件都是在UIView提供的空白區域上繪制外觀。

基于UI控件的實現原理開發者完全可以開發出項目定制的控件——當iOS系統提供的UI控件不足以滿足項目需要時開發者可以通過繼承UIView來派生自定義控件。

當開發者打算派生自己的UI控件時首先定義一個繼承View基類的子類然后重寫View類的一個或多個方法通常可以被用戶重寫的方法如下。

initWithFrame:前面已經見到程序創建UI控件時常常會調用該方法執行初始化因此如果你需要對UI控件執行一些額外的初始化即可通過重寫該方法來實現。

initWithCoder:程序通過在nib文件中加載完該控件后會自動調用該方法。因此如果程序需要在nib文件中加載該控件后執行自定義初始化則可通過重寫該方法來實現。

drawRect:如果程序需要自行繪制該控件的內容則可通過重寫該方法來實現。

layoutSubviews如果程序需要對該控件所包含的子控件布局進行更精確的控制可通過重寫該方法來實現。

didAddSubview:當該控件添加子控件完成時將會激發該方法。

willRemoveSubview:當該控件將要刪除子控件時將會激發該方法。

willMoveToSuperview:當該控件將要添加到其父控件中時將會激發該方法。

didMoveToSuperview當把該控件添加到父控件完成時將會激發該方法。

willMoveToWindow: 當該控件將要添加到窗口中時將會激發該方法。

didMoveToWindow當把該控件添加到窗口完成時將會激發該方法。

touchesBegan:withEvent:當用戶手指開始觸碰該控件時將會激發該方法。

touchesMoved:withEvent:當用戶手指在該控件上移動時將會激發該方法。

touchesEnded:withEvent:當用戶手指結束觸碰該控件時將會激發該方法。

touchesCancelled:withEvent:用戶取消觸碰該控件時將會激發該方法。

當需要開發自定義View時開發者并不需要重寫上面列出的所有方法而是根據業務需要重寫上面的部分方法。例如下面的跟隨手指運動的小球示例程序就只重寫drawRect:方法。

實例跟隨手指運動的小球

為了實現一個跟隨手指運動的小球示例我們考慮開發自定義的UI控件這個UI控件將會在指定位置繪制一個小球這個位置可以動態改變。當用戶通過手指在屏幕上拖動時程序監聽到這個手指動作并把手指動作的位置傳入自定義UI控件然后通知該控件重繪即可。

首先創建一個Single View Application然后通過該應用的項目導航面板打開Main.storyboard文件選中Dock區內唯一場景內的View Controller節點或選中界面布局文件中的根UI控件UIView也就是界面中大塊的丶右上角有個電池圖標的白色矩形區域然后按下鍵盤上的command+option+3快捷鍵打開Xcode的身份檢查器通過身份檢查器可以看到該界面布局文件的根UI控件的實現類是UIView如圖9.38所示。

該應用并不打算使用默認的UIView作為根控件因此將圖9.38所示對話框中Class文本框內的實現類改為FKCustomView這表明程序將使用FKCustomView作為界面設計的根控件。

接下來程序需要開發自定義的FKCustomView類其步驟如下。

①用鼠標右鍵單擊項目文件夾然后單擊“New File”菜單項Xcode彈出如圖9.39所示的對話框。

圖9.38 通過身份檢查器面板管理UI控件的實現類

 圖9.39 創建objective-C類

②在圖9.39所示對話框的左邊選中iOS分類下的Cocoa Touch然后在對話框右邊選中“objective-Cclass”列表項后單擊“Next”按鈕系統顯示如圖9.40所示的對話框。

圖9.40  確定類名和父類

③在圖9.40所示的對話框中輸入類名選擇父類之后單擊“Next”按鈕Xcode將會顯示一個保存文件夾用于確定新創建文件的存儲路徑。選擇合適的路徑后單擊“Create”按鈕即可創建一個新的objective-C類。

下面是自定義控件類實現部分的代碼接口部分僅僅只是繼承UIView即可。

程序清單codes/09/9.5/CustomView/CustomView/FKCustomView.m

#import "FKCustomView.h"
@implementation FKCustomView
// 定義兩個變量記錄當前觸碰點的坐標
int curX;
int curY;
- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 獲取觸碰事件的UITouch事件
    UITouch *touch = [touches anyObject];
    // 得到觸碰事件在當前組件上的觸碰點
    CGPoint lastTouch = [touch locationInView:self];
    // 獲取觸碰點的坐標
    curX = lastTouch.x;
    curY = lastTouch.y;
    // 通知該組件重繪
    [self setNeedsDisplay];
}
// 重寫該方法來繪制該UI控件
- (void)drawRect:(CGRect)rect
{
    // 獲取繪圖上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 設置填充顏色
    CGContextSetFillColorWithColor(ctx, [[UIColor redColor] CGColor]);
    // 以觸碰點為圓心繪制一個圓形
    CGContextFillEllipseInRect(ctx, CGRectMake(curX - 10, curY - 10, 20, 20));
}
@end

上面的程序自定義了UIView的子類FKCustomView該子類重寫了drawRect:方法該方法的邏輯很簡單它僅僅只是以觸碰點為圓心繪制一個圓形。除此之外該自定義UIView子類還重寫了touchesMoved方法每當用戶觸碰該組件時程序就會將觸碰點的坐標賦給curX丶curY兩個變量并通知該控件調用drawRect:方法來重繪自身。這樣即可保證每當用戶觸碰該控件時該控件總會在觸碰點繪制一個紅色圓形。

編譯丶運行該程序即可看到如圖9.41所示的效果。

——本文節選自《瘋狂ios講義上》