閱讀113 返回首頁    go 阿裏雲 go 技術社區[雲棲]


ios入門之界麵基礎

學習移動app開發,我們常常從講解基本的控件開始,如UILabel、UISearchBar、UIButton、UITextField等等。在實現一個簡單的ios 應用之前,我們首先來看ios開發中一些基本的概念。

視圖控製器(View Controllers)

視圖控製器是MVC(Modl-View-Controller)模式的邏輯部分。按照字麵意思,這個控製器能夠控製某個視圖。

UIViewController

蘋果極力推崇MVC這種開發模式,並且幫我們實現了一個叫做UIViewController的控製器,它是UIKit的一部分。UIKit是眾多能夠製作交互界麵元素的類,如果你在某個類的開頭是UI,那麼這個類屬於UIkit。UIViewController視圖屬性被連接到一個視圖文件,大多數情況下,是一個storyboard文件。

UIViewController提供一些需要的方法和屬性,通常我們在使用的時候隻需要將UIViewController子類化即可。如:

class mySubController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()     // Do any addition setup after loading the view
    }
}

在這個例子中,父類就是UIViewController。viewDidLoad()是UIViewcontroller默認的方法。

UINavigationController

我們在編寫一個ios軟件的時候,往往不隻一個界麵,界麵之前跳轉我們常常會用到navigation controller這麼一個東西。一個UINavigationController可以在數組中支持多個UIViewController,導航控製器(navigation controller)按照先進後出的堆棧管理原則對我們創建的UIViewController進行管理。通過self.title屬性來設置導航欄的標題。如:

self.title =@"登錄";

Table View

Table views是用來顯示滾動視圖的控件,滾動視圖是iOS Apps中最常見的用戶界麵。滾動視圖中的每一行叫做cell,cell是用了展示table view中每行的內容。table view可以有很多個cell,多個cell組成section(組)。
在iPhone的設置界麵,就是用不同的section把界麵分開,像通知中心,控製中心,個人隱私,每個table view都有header和footer,header是在cell上麵,footer在cell下麵。

Delegation

在很多的OA軟件中,往往都有定時提醒這麼一個功能。在App內部發生某個事件時,就會發出提醒,為某個事件訂閱或者接收提醒的過程叫做delegation(委托)。
例如,我們使用delegate創建table view,並告知要繪製10行。

override func tableView ( tableView: UITableView, numberOfRowsInSection section: Int ) -> Int {
 //Return the number of rows in the section
return 10
}

UITableViewController

UITableViewController會自動創建一個table view,然後設置tableView屬性,同時也需要委托自己獲取所有需要的delegate方法。

UITableViewDataSource

UITableView的delegate協議有三個必須要寫的方法,叫做UITableViewDataSource。這個協議包括組的數量,美組中行的數量,以及cell如何展現。

第一個方法是numberOfSectionsInTableView(_:),如:

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    //#warning Potentially incomplete method implementation.
    //return the number of sections.
    return 0
}

注:注意到return那行目前是零,這意味著這個table view中沒有組。蘋果公司增加了一個警告注釋,說如果組的個數是零,那麼就不會顯示行,組包含行cell,沒有了組section,行cell也就不會被顯示出來。

第二個方法是tableView(_:numberOfRowsInSection:),這個方法決定了某個組裏具體有多少行,當然這裏也不能為0:

override func tableView(tableView: UITableView,numberOfRowsInSection section: Int) -> Int {
     //#warning Incomplete method implementation 
    // Return the number of rows in the section
    return 5
}

第三個方法是tableView(:cellForRowAtIndexPath:),這個方法裏有個參數值叫indexPath,是一個NSIndexPath。
section組屬性的索引是當前組,cell行屬性的索引是當前行:

  • 第一組第一行的索引NSIndexPath是0,0。
  • 第一組第四行的索引NSIndexPath是0,3。
  • 第三組第一行的索引NSIndexPath是2,0。 可以用點語法調用section和row屬性:
var currentRow = indexPath.row
var currentSection = indexPath.section

tableView代碼:

override func tableView(tableView: UITableView,cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell =tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as UITableViewCell

    return cell
}

ios跳轉實例

為了方便大家的理解,我們先來一個簡單的跳轉的實例。
1)打開Xcode,點擊頂部菜單欄的File -> New -> Project,從模板中選擇Single View Application,點擊Next。如圖:
這裏寫圖片描述

2)輸入項目名稱等屬性,點擊Next。

3)打開Main.storyboard,點擊Inspector上工具欄中第一個圖標File Inspector,鼠標移動到到中間部分,不勾選Use Auto Layout選項。這時會出現一個對話框,選擇iPhone。
這裏寫圖片描述

4)選中這個界麵,然後點擊頂部菜單欄的Editor -> Embed In -> Navigation Controller。一個新的scene會增加到Storyboard中,一個scene表示App一屏或者一個界麵。Navigation Controller Scene和之前的View Controller Scene是連接在一起的,這連接說明View Controller Scene是Navigation Controller Scene裏第一個出現視圖,點擊Storyboard Editor左下角的盒子按鈕打開Document Outline,Document Outline顯示了storyboard文件中所有的控件以及控件所處的層次等級。

這裏寫圖片描述

5)接下來我們在ViewController.m中新建一個按鈕,用來跳轉到第二個界麵。
先創建一個按鈕,代碼如下:

UIButton * button=[UIButton buttonWithType:UIButtonTypeSystem];
    button.frame=CGRectMake(130, 220, 100, 30);
    [button addTarget:self action:@selector(toNext) forControlEvents:UIControlEventTouchUpInside];
    [button setTitle:@"跳轉登錄" forState:UIControlStateNormal];
    [self.view addSubview:button];

然後通過action添加跳轉方法:

//跳轉到登錄界麵
-(void)toNext{
    UIBarButtonItem * back=[[UIBarButtonItem alloc]init];
    back.title = @"返回";
    self.navigationItem.backBarButtonItem = back;

    SecondViewController * second = [[SecondViewController alloc]init];
    [self.navigationController pushViewController:second animated:YES];
}

整體的代碼結構如下:
這裏寫圖片描述

最後更新:2017-04-14 21:02:30

  上一篇:go 雙11數據⼤大屏技術演進
  下一篇:go 從零到一:IOS平台TensorFlow入門及應用詳解(附源碼)(一)