天天看點

《iOS應用開發》——1.4節修改模闆

本節書摘來自異步社群《ios應用開發》一書中的第1章,第1.4節修改模闆,作者【美】richard warren,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

1.4 修改模闆

ios應用開發

好了,言歸正傳。讓我們開始建立一些新的東西。我們将為主視圖添加一個标簽,用來顯示一個簡短的文本。再為背面視圖添加一個文本框,在文本框中使用者可以修改主視圖中的文本。那麼,讓我們開始吧!

1.4.1 修改主視圖

再次打開mainstoryboard.storyboard檔案,并且放大主視圖控制器場景。就我來說,背景有一點灰暗,對它做一點修改。選擇視圖對象,然後切換到attributes inspector。将background屬性改為light gray color(見圖1.17)。接着,選擇info按鈕并且将它的type設定改為info dark(見圖1.18)。

《iOS應用開發》——1.4節修改模闆

現在我們需要添加一個标簽。xcode使得添加使用者界面對象變得非常容易。隻要從library面闆(實用工具區的下半部分)中拖動想要的對象放置到場景上就行。確定object library是顯示的(控件庫選擇工具條右邊起第二個立方體圖示)(見圖1.19),并且滾動它使得标簽對象可見。點選标簽對象并且将它從library面闆中拖動到主視圖控制器場景的視圖中。

xcode會幫助你準确地放置控件。當你将标簽拖過編輯區域時,它高亮并标出目前的視圖。它還添加了藍色的引導線,助于我們準确地放置對象。拖動标簽,直到它垂直居中并且與視圖的左側邊緣對齊,如圖1.20所示。

《iOS應用開發》——1.4節修改模闆

當你松開标簽時,在它的周圍會顯示8個藍色的小圓點。你可以點選并且拖動這些錨點來改變标簽的大小。點選标簽右側并且拉伸它,直到碰到右側邊緣的引導線。接着,使它變為視圖的一半高。現在,仍然選中标簽,讓我們改變它的外觀。

打開attributes inspector,在alignment屬性中,點選文本居中的按鈕。接着點選font屬性文本域最右側的圖示。這将會打開一個彈出視窗。将字型設定成system bold,size設定成24(見圖1.21)。現在讓我們來改變文本的内容吧!你可以修改标簽的text屬性,或者也可以輕按兩下标簽然後直接修改。使用hello world來替代預設的内容“label”。

最後,點選并且拖動标簽直到它水準和垂直都居中(如果你不能移動标簽,嘗試一下點選view來取消選中,然後再次選中和拖動标簽)。如果你正确完成了以上的所有操作,左側和右側邊緣的引導線也會顯示(見圖1.22)。

運作應用。我們的修改将會在主視圖中顯示出來。

《iOS應用開發》——1.4節修改模闆

1.4.2 添加輸出口

如果我們想要在運作時改變标簽的文本内容,我們需要在代碼中有一個通路它的方法。最簡單的方法是在視圖控制器中添加一個輸出口。在xcode 4.0推出之前,如果手動修改代碼,則需要在xcode和interface builder之間來回切換。然而現在有更簡便的方式了。

首先,我們可能想要收起場景清單,點選編輯區左下角的圓形灰色的按鈕。接着,點選assistant editor按鈕(見圖1.23)。

《iOS應用開發》——1.4節修改模闆

按住control鍵點選标簽,然後将其拖動到頭檔案中去。你會看到一條藍色的線從标簽連接配接到光标。将光标放在@end指令之上的區域,如圖1.25所示,然後松開滑鼠。

《iOS應用開發》——1.4節修改模闆

注意:

雖然xcode在自動選擇正确的配套檔案方面的功能很強大,但是有時候也可能會出錯,或者你想要選擇另外一個檔案。你可以在跳轉工具條中完成這個操作。選中葉項目,你就能以大緻相同的挑選規則選擇一個替代檔案。選中根項目,你就可以選擇不同的挑選規則。xcode提供了一些不同的視具體環境而定的挑選規則。如果必要的話,你也可以手動選擇配套檔案。

xcode将會對hwmainviewcontroller.h檔案、hwmainview controller.m檔案和mainstoryboard.storyboard檔案做一些改變。在頭檔案中,它聲明了我們的标簽的屬性。

在storyboard檔案中,xcode連接配接了标簽和新建立的輸出口。你可以通過connection inspector來檢視這些連接配接。此外,按住control鍵點選主視圖控制器圖示,也可以打開連接配接對話框(見圖1.27)。

《iOS應用開發》——1.4節修改模闆

1.4.3 添加文本字段

這一節前面幾步操作基本上是重複我們上節在主視圖裡的,隻是這裡使用的是文本字段控件,而不是标簽。請確定打開了mainstoryboard<code>.</code> ``storyboard,并且放大背面視圖控制器。現在,從library面闆中拖動一個文本字段控件。調整大小使它充滿整個視圖。

這次我們不需要改變文本字段的高度或者屬性。隻要為文本字段建立一個輸出口,按住control鍵點選文本字段拖動到委托上面就可以了。将輸出口命名為labeltext。最後,将它放置到背面視圖的上半部分,否則,它會被鍵盤覆寫。

無論何時想要改變标簽的文本,我們隻需要從labeltext輸出口中獲得文本值并且複制到我們的标簽輸出口就行。最簡單的解決辦法就是隻在使用者關閉背面視圖的時候改變标簽。打開hwmainviewcontroller.m檔案并且找到flipsideviewcontrollerdidfinish:方法。

目前來說我們的檔案還不是特别長。隻要通過浏覽整個檔案就能找到想要的方法。不過,使用編輯器的跳轉工具條會簡便很多(見圖1.28)。

《iOS應用開發》——1.4節修改模闆

現在,讓我們來修改flipsideviewcontrollerdidfinish: 方法吧!

正如我們之前所讨論的,這一行隻是使用輸出口和屬性将文本值從背面視圖文本字段拷貝到主視圖的标簽中。

完成了,再次運作應用。啟動後應該會顯示預設的hello world消息。點選info按鈕,并且在文本字段中輸入新的文本。點選done按鈕,主視圖的标簽就會顯示你剛才輸入的新文本了。

1.4.4 改善界面

從功能上來說,一切正常,但是還沒有成為世界上最完美(或者,就這個示例來說,有用的)的應用程式。讓我們來讓它變得更好一點!當背面視圖顯示時,我們用标簽現有值來填充文本字段。此外,我們修改成當使用者點選Enter鍵時就關閉背面視圖。

首先,讓我們把主視圖的标簽文本傳遞給背面視圖。理想地來說,我們會在prepareforsegue:sender:方法中設定這個值。這應該是flipsideviewcontrollerdidfinish:方法的逆向代碼;我們從主視圖示簽中将文本值直接拷貝到背面視圖中的文本字段。不妙的是,由于視圖加載的方式,文本字段目前可能還不存在。要完成這個操作有幾個方法。讓我們給hwflipsideviewcontroller類添加一個屬性用來儲存我們的文本,直到我們确定這個視圖可以運作了。

打開hwflipsideviewcontroller.h檔案并且在其他屬性後添加下面這一行:

這個方法每次在背面視圖出現時就會被調用。這裡,我們隻是将儲存在startingtext屬性的值指派給文本字段。接着,再次打開hwmainviewcontroller.m檔案。按照下面所示修改preparefor<code></code>segue:sender``:方法。

由于我們要設定多個屬性,為了減少代碼量,我們擷取hwflipside<code></code>viewcontroller的一個引用。然後像之前所說的使用這個引用來設定委托。最終,把主視圖中标簽的文本字元串儲存在startingtext屬性裡。

安全地通路視圖控制器的輸出口

在這個例子中,直到系統完全加載了視圖後,我們才能修改文本字段的内容。我們将會在第3章和第4章中更深入地讨論這一點。不過,先簡單地解釋一下,uikit不會在建立視圖控制器時立即加載視圖,而是等到實際需要視圖的時候再加載(通常是在系統要在螢幕上顯示視圖時)。uikit是由于性能的原因才這麼做,如果你不注意的話将會導緻非常令人困惑的錯誤。

典型的情況是,這些錯誤會在你對視圖控制器的輸出口做一些程式設計修改時出現,尤其當輸出口是由interface builder建立時。當你運作應用程式時,代碼被觸發了,修改的内容看上去并沒生效。 無論什麼時候出現這個情況了,仔細檢查確定輸出口真正已經存在,這樣的話它應該會有一個非零的值。如果不是,你需要延遲輸出口的設定代碼,正如我們這裡所做。

完成了一點改進,現在開始下一點改進。再次打開assistant editor,左邊是storyboard,右邊是hwflipsideviewcontroller.h檔案。我們要将文本字段的did end on exit事件和控制器的done: 方法連接配接起來。有幾個方法可以完成這個連接配接。例如,我們可以按住control鍵并拖動文本字段到done: 方法上。不妙的是,這樣做不允許我們選擇事件,它會自動連接配接editing did end事件,而不是did end on exit事件。

正确的操作是,按住control鍵然後點選文本字段,就會打開connections對話框。點選并且拖動did end on exit事件的右側圓圈到done: 方法上,如圖1.30所示。

《iOS應用開發》——1.4節修改模闆

還有另外幾個等效的替代方法。你可以按住control鍵再點選場景底部工具條中的hwflipsideviewcontroller圖示,然後拖動done:操作到文本字段上。xcode會提示你選擇正确的事件。同樣你也可以使用實用工具區的connections inspector,而不使用彈出對話框。所有這些方法都是等效的。你可以多嘗試不同的方法,看看哪一種方法最适合自己。

每個事件隻能與一個操作相連,但是一個操作可以和多個事件連接配接。在這個示例中,文本字段和done按鈕都是和done:操作相連的。

既然說到這裡,就讓我們來改變鍵盤return鍵的外觀。選中文本字段并且打開attributes inspector。将return key屬性設定為done。雖然這不會改變鍵盤的功能,但是卻有助于傳達我們的意圖。

你可能還想要設定clear button屬性為“appears while editing”。畢竟,使用倒退鍵來删除大量的文本方式是令人讨厭的。

完成了。現在運作這個應用程式吧!顯示效果應該如圖1.31和圖1.32所示。

《iOS應用開發》——1.4節修改模闆

在實作檔案中,xcode生成我們的标簽屬性,并且在視圖解除安裝的時候把它設定為nil。這有助于釋放不再需要的記憶體。

《iOS應用開發》——1.4節修改模闆

繼續閱讀