天天看點

iOS開發學習(一)着手建立自己的第一個App

        了解了iOS開發的基礎知識,就要着手寫一個小小的App了。這也是本文的目的。

        1.1建立新項目

        打開xcode,選擇new 一個project,選擇single view Application,建立一個project.

iOS開發學習(一)着手建立自己的第一個App

        1.2 添加使用者界面元素.

        1)選擇項目導航器中的 MainStoryboard.storyboard,将對象庫中的使用者界面 (UI) 元素拖移到畫布上的視圖中,來添加使用者界面元素。UI 元素添加到視圖後,可以适度移動它們的位置和調整大小。

        對象庫出現在實用工具區域的底部。如果看不到對象庫,您可以點按其按鈕,即庫選擇欄中從左邊起的第三個按鈕。

iOS開發學習(一)着手建立自己的第一個App

        如果想添加什麼界面元素可以用下面的搜尋欄目直接搜尋.我們下面添加幾個界面元素到畫布上.

        2)添加一個Image View,

        1.在object library中找到image view,并拖到視圖中,image view會拉伸充滿整個界面。

iOS開發學習(一)着手建立自己的第一個App
iOS開發學習(一)着手建立自己的第一個App

        image view上有8個點供開發者調整image view的大小,滑鼠放在某個點就可以拖動其大小。如下:

iOS開發學習(一)着手建立自己的第一個App

        2.上傳圖檔,讓imageview 顯示圖檔。選中一張圖檔,拖動到項目導航器中的supporting files中,如下圖:

iOS開發學習(一)着手建立自己的第一個App

        按照圖上中點選,選中Destination的checkbox,把圖檔複制到項目中,其他保留預設值即可。然後選擇finish,這樣一個圖檔就導入到項目中來了。

       3.讓imageview 顯示導入的圖檔.

iOS開發學習(一)着手建立自己的第一個App

        這樣圖檔就可以顯示在imageview中了,

iOS開發學習(一)着手建立自己的第一個App

        預設情況下,圖檔會拉伸到和imageview一緻的大小,圖檔的顯示方式是由imageview的mode屬性設定的,mode屬性位于Attributes inspector中的View欄。

iOS開發學習(一)着手建立自己的第一個App

        mode中值為scale to fill就是充滿整個image view的意思。對于圖檔大小和顯示方式的處理,iphone建議的是提供适當大小的圖檔(即圖檔的大小和最終要顯示在iphone上的大小是一緻的,不需要iphone的cpu進行更多的處理,這樣有助于程式的快速運作和節約cpu的消耗),如果同一張圖檔有2種大小需要顯示,那麼你就傳2張圖檔到程式了就可以了。

       選中圖檔,然後選中菜單欄中的Editor>Size to Fit Content,這樣ImageView會自動調整到和圖檔原始尺寸一緻.

iOS開發學習(一)着手建立自己的第一個App

       調整imageview 的位置,讓它顯示在最中央。

       3)添加2個Label和2個textfield

        1.添加過程很簡單,和上文添加imageview類似,添加後的效果如下:

iOS開發學習(一)着手建立自己的第一個App

        Label和testfield的排列主要還是依靠藍色的輔助線,挪動label和textfield的時候會有藍色的輔助線輔助你實作對齊的功能。非常的簡單。重命名label,并且調整textfield的大小。

iOS開發學習(一)着手建立自己的第一個App

        2個label的文字分别換成name和number,并向右對其(同時選中2個Label,選擇菜單欄Editor>Align>Right Edges),2個textfield拉長到了合适的寬度。

        2.為textfield添加Placeholder文字

        Placeholder text是一種提示性的文字,預設顯示在空的textfield中,當textfield獲得焦點并輸入内容後,Placeholder text會自動消失,當删除所有的内容,Placeholder text會再次出現。

        選中textfiled,在Attribute inspector中找到Placeholder,并輸入“Type a Name”

iOS開發學習(一)着手建立自己的第一個App

        為兩個textfile 添加之後,效果圖如下:

iOS開發學習(一)着手建立自己的第一個App

       1.3添加代碼 實作功能.

        如果這個時候我們直接運作程式,會發現當textfield獲得焦點之後,會有一個虛拟鍵盤出現,我們可以選擇要輸入的字母。

iOS開發學習(一)着手建立自己的第一個App

        但是第二個textfield期望的是隻能輸入數字,是以我們需要更改下鍵盤的類型。選中第二個textfield在Attribute inspector中找到Keyboard,将其類型改成“Number Pad”        

iOS開發學習(一)着手建立自己的第一個App

       再次運作程式,點選第二個textfield就可以發現出現的數字鍵盤。

iOS開發學習(一)着手建立自己的第一個App

       如果運作起來可以發現我們輸入結束後,如何隐藏鍵盤,當點選虛拟鍵盤的“return”按鍵時,它會調用一個Event,叫“Did End On Exit event”,我們可以關聯一個Action到這個event,當觸發這個event時,調用Action使鍵盤隐藏。

        1.4 先了解下Outlet  與action  :   outlet(插座,出口),action(行為)

        剛開始接觸iOS開發,這兩個關鍵字讓我有點犯迷糊了。在網上查了下資料,大緻是這麼個意思:

        我們在main.storyboard中以圖形化的方式建立使用者界面。然後通過建立Outlet和Action,将main.storyboard中放置的控件與代碼之間建立連接配接。使用Outlet,以定義變量的方式将控件連結到代碼,該變量代表控件。使用Action,以定義方法的方式将控件連結到代碼,該方法在使用者與控件進行互動時運作。

        outlet和action是連接配接使用者界面和程式代碼的關鍵。outlet就像c語言中的指針,指向一個對象。或者說是一個對象的引用,例如一個Label,一個textfield,在C# Winform中,我們會為每一個控件設定一個name,那麼在程式設計時,直接使用這個name就可以對該控件進行操作,但是在ios裡面,情況變得有些複雜,控件沒有name,就是說你拖一個控件過來,這個控件是沒有自己的name的,那麼要在code中操作這個控件該怎麼辦呢?定義一個Outlet,然後把這個Outlet指向該控件,在code中就用這個Outlet來操作這個控件。

         Action:Action就是定義一個事件,然後将控件和action事件聯系起來。C#可以單獨定義事件,然後将控件和事件使用“+=”操作符聯系起來就可以,雖然ios裡面沒有這個文法,但是也是需要聯系的,聯系建立起來以後,控件就可以觸發這個事件了。如何建立action。例子如下:

         1.添加事件首先需要建立一個action,然後建立聯系,xcode會幫我們來完成這兩步。

         1)選中project navigator的main.storyboard顯示iPhone的界面。

         2)選中Xcode右上角的7個按鈕從左到右的第二個Show Assistant editor(快捷鍵:option+command+enter,菜單欄View>Assistant Editor>Show Assistant editor)

iOS開發學習(一)着手建立自己的第一個App

         3)選中後的界面如下,會在ipone界面的右面出現 UIExample1ViewController.h,我們等會就需要将textfield拖動到這個檔案裡面,然後進行一些相應的設定,xcode會自動的幫我們建立控件和action的聯系。

iOS開發學習(一)着手建立自己的第一個App

        接下來就是建立action了,滑鼠按住第一個textfield不放開,然後按住鍵盤上的control鍵,然後拖動到右邊的UIExample1ViewController.h在@interface和@end中間放開滑鼠

iOS開發學習(一)着手建立自己的第一個App

(像素略喳。。。)

        松開滑鼠之後,會彈出下列對話框:

iOS開發學習(一)着手建立自己的第一個App

        connection選擇action,然後name定義為nameFieldAction,類型為UITextField,說明是UITextField事件,然後點選connect,建立完成後的代碼如下圖所示:

iOS開發學習(一)着手建立自己的第一個App

        在UIExample1ViewController.m中會自動添加如下代碼:

iOS開發學習(一)着手建立自己的第一個App

        到這裡,一個action就建立并且關聯起來了,你可以在代碼中實作一些功能。

        這裡是由xcode 自動幫我們建立action,我們也可以手動建立action。删除掉UIExample1ViewController.m和UIExample1ViewController.h的代碼,我們下面來手動添加下action。

        在UIExample1ViewController.h中添加

- (IBAction)nameFieldDoneEditing:(id)sender;
           

              在UIExample1ViewController.m中添加

- (IBAction)nameFieldDoneEditing:(id)sender
{
    [sender resignFirstResponder];
}
           

           FirstResponder的意思是正在和使用者互動的那個控件,textfield正在和使用者互動,這時的它就是FirstResponder。 resignFirstResponder的意思是放棄第一響應者,即textfield不再和使用者進行互動,那麼此時的textfield也不會獲得焦點,這樣鍵盤就自然而然的消失了。   

        我們這裡隻是建立了一個action,如何與控件建立關聯。

        選中第一個text field,打開connections inspector,下圖中的第6個圖示(最右邊的一個圖示),找到connections inspector中的“Did End On Exit”方法,滑鼠移到它右邊的小圓圈,此時小圓圈中出現一個加号。

iOS開發學習(一)着手建立自己的第一個App

        按住滑鼠左鍵不放,拖動到File's Owner上放開滑鼠,此時一個小視窗會彈出,會顯示File's Owner所擁有的Action

iOS開發學習(一)着手建立自己的第一個App
iOS開發學習(一)着手建立自己的第一個App

這裡會顯示出來File's Owner所擁有的Action,選中nameFieldDoneEditing,這樣“Did End On Exit”就和nameFieldDoneEditing方法關聯起來了。  這是建立action的第二種方法。

        2.添加outlet。與上面第一種方法類似。拖動過去,選擇outlet

iOS開發學習(一)着手建立自己的第一個App

        outlet建立完畢後的UIExample1ViewController.h如下所示:

iOS開發學習(一)着手建立自己的第一個App

        寫到這裡我們可以執行一下,來看看效果了。command+R運作,操作的時候可以看到點選鍵盤上的return,則虛拟鍵盤則會隐藏起來。是以我們達成了我們的第一個任務。

        那麼第2個數字虛拟鍵盤如何讓它隐藏起來了。這個虛拟鍵盤沒有return鍵。

iOS開發學習(一)着手建立自己的第一個App

        我們采用的一種方法是:當我們點選螢幕上任何空白的地方時(包括ImageView和Label這些非活動控件,即靜态控件),使鍵盤消失,這個操作相對簡單,且可行性較高。    

        實作原理:

        先看下圖的objects

iOS開發學習(一)着手建立自己的第一個App

        這裡可以看到整個控件布局的一個樹形圖,我們添加的所有控件都會放到一個根view上面的。這個View是不可見的,但是它充滿了整個iphone螢幕,我們要做的就是寫一個Action,希望能夠使這個View所攜帶的一個event調用這個Action進而達到隐藏鍵盤的目的。但是這個根View的類型是UIView

iOS開發學習(一)着手建立自己的第一個App

        uiview中是沒有event的,這樣無法和action相關聯起來。是以我們需要把根View的類型UIView改成UIControl,UIControl是UIView的子類,它包含所有UIView的特性,且裡面有我們所需要的event,是以這樣的改變是非常合理且可行的。

iOS開發學習(一)着手建立自己的第一個App

        objects中的類型也随之發生了變化,變成了control。

iOS開發學習(一)着手建立自己的第一個App

        2)建立一個Action:backgroundTap

        UIExample1ViewController.h:

- (IBAction)backgroundTap:(id)sender;
           

        UIExample1ViewController.m:

- (IBAction)backgroundTap:(id)sender{
    [NameField resignFirstResponder];//和上文中提到的作用類似
    [AgeField resignFirstResponder];
}
           

        3)關聯action

        選中根Control,切換到connections inspector,因為我們希望的是點選任何地方,鍵盤都會隐藏,是以我們選中Touch Down event。按住滑鼠左鍵拖到File's Owner,選擇backgroundTap action,關聯完畢。

iOS開發學習(一)着手建立自己的第一個App

        再次編譯和運作,看數字鍵盤能否消失。ok,經測試,沒有任何問題。

        今天就到此為止,一個最簡單的app就建立出來了。明天繼續研究iOS學習。