2018-06-07 開始我的控件之旅

一.UIImageView

1.導入圖片

將文件夾內想要添加的圖片拖動到圖示位置,1x医男,2x砸狞,3x分別是原圖和兩張像素倍數為2、3倍的Retina高清版昨登。


2.加入控件

3.屬性介紹

在右側工具欄我們可以看到UIImageView的一些屬性趾代。


  • Content Mode:用于選擇內容在視圖內部的顯示方式贯底,即圖像在視圖內的對齊方式丰辣,以及是否縮放圖像以適應視圖大小,在這里禽捆,Scale To Fill即使視圖和它的圖像尺寸一致笙什。
  • Tag:UIView的所有子類,包括所有的視圖和控件胚想,都有一個tag屬性琐凭。用于標識界面對象的一種與語言無關的方法。
    例如浊服,假如有5個不同的按鈕统屈,每個按鈕都有一個不同的標題胚吁,但我們希望用一個操作方法來處理這5個按鈕的點擊事件〕钽荆可以通過tag來區(qū)分這5個按鈕腕扶。
  • Interaction:與用戶交互有關。
    User Interaction Enabled指定用戶能否與當前對象進行交互吨掌,如果不勾選半抱,則控件永遠不能觸發(fā)操作方法。但是膜宋,圖像視圖默認不選中該復選框窿侈,因為它們通常用于靜態(tài)信息的顯示。
    Multiple Touch則決定了當前控件能否接收多點觸摸事件秋茫,可以支持各種復雜的手勢史简。
  • Alpha:圖像的透明度,0.0是完全透明肛著,1.0是完全不透明乘瓤。如果值<1.0,即使圖像背后沒有任何內容策泣,應用程序也會在運行時占用處理器周期來疊加半透明視圖后面的空白區(qū)域衙傀。
  • Background:用于確定視圖的背景顏色,只有當圖像沒有填滿整個視圖萨咕,或者顯示在縱橫比4:3的iPad上统抬,或者圖像某些部分透明的情況下,這個屬性才起作用危队。
  • Tint:指定所選視圖的高光顏色聪建。
  • Drawing:
  1. Opaque:告訴iOS當前視圖的背后沒有需要繪制的內容,同時允許iOS的繪圖方法通過一些優(yōu)化當前視圖的繪制茫陆。
  2. Hidden:選中之后金麸,用戶就看不到該對象了。
  3. Clears Graphics Context:選中后簿盅,iOS會在實際繪制對象之前使用透明的黑色繪制被對象覆蓋的所有區(qū)域挥下。因為性能問題,這個選項基本不需要選中桨醋。
  4. Clip to Bounds:如果視圖中包含子視圖棚瘟,并且這些子視圖沒有完全包含在其父視圖的邊界內,那么這個復選框的值可以決定子視圖的繪制方式喜最。如果選中了該選項偎蘸,那么只有位于父視圖邊界內的子視圖部分會繪制出來;如果不選中,那么子視圖會被完全繪制出來迷雪,不管子視圖是否超出了父視圖的邊界限书。但是因為計算裁剪區(qū)域是比較消耗資源的操作,所以一般默認為關閉章咧,當然蔗包,需要的時候可以啟用一下。
  • Stretching: 可以忽略慧邮,因為只有在屏幕上調整矩形視圖大小導致重繪視圖的時候才需要拉伸调限。該選項用于保持視圖的外邊緣(例如按鈕的邊框)不變,僅拉伸中間部分误澳,而不是均勻拉伸視圖的全部內容耻矮。
    這里需要設置4個浮點值,用于指定一個矩形可拉伸區(qū)域的左上角的坐標以及大小忆谓,取值范圍0~1裆装,代表整個視圖大小的部分。
    例如:如果希望每個邊緣最外邊的10%是不可拉伸的倡缠,那么就將X和Y都設為0.1哨免,同時將width和height都設為0.8。

二.Text Field

1.相應的屬性

在右側工具欄我們可以看到Text Field的一些屬性昙沦。


  • Text: 分為Plain Text(純文本)和Attributed Text(屬性文本琢唾,包含各種字體和不同的屬性)。
    之后是一系列用于設置字體和字體顏色的控件盾饮,Color的默認值是黑色采桃。
  • Font:右邊的控件可以用來增大或縮小文本大小,左邊的部分可以用來手動編輯字體名稱和字體大小丘损。
    下面的五個按鈕是對齊方式普办。
  • Placeholder(占位符):可以在這里輸入一些文本,當文本框內容為空時徘钥,Placeholder的內容就相當于一個Hint衔蹲,以灰色字體顯示其中。
  • Background和Disabled呈础,僅在需要定制文本框的外觀時使用舆驶。
  • Border Style:用于更改文本框邊框的繪制方式,默認值(最右邊的按鈕)創(chuàng)建的文本框樣式是最慣用的猪落。
  • Clear Button: 可以設置何時出現清除按鈕贞远,它會出現在文本框最右邊的X形小按鈕畴博。
  • Clear when editing begins:指定用戶觸摸此字段時是否清除已有的文本笨忌,如果選中該復選框,則之前該字段的任何內容都將被清除俱病,用戶需要重新輸入官疲。
  • Min Font Size:用來設置文本框在顯示文本的時候可以選中的最小字號袱结。
  • Adjust to Fit:指定顯示文本是否應隨文本框尺寸的變化而變化,如果選中途凫,則整個文本在視圖中都是可見的垢夹,即使文本大于所分配的空間。
  • Capitalization:如果期望用戶輸入一個名字维费,則可以將其設置為Words果元,可以保證每個輸入的單詞都會自動轉換為首字母大寫。
  • Return Key:Return鍵即虛擬鍵盤右下方的一個鍵犀盟,如果在Safari的搜索框輸入文本而晒,則會變成Search。
  • Auto-enable Return Key:在文本框內容為空時Return鍵將會被禁用阅畴,直到至少在文本框輸入一個字符倡怎。
  • Secure Text Entry:指定是否在文本框顯示已輸入的字符,如果此文本要用作密碼字段贱枣,則應該選中次復選框监署。
    接下來的部分就是和UIImageView顯示的一樣了,注意選中Opaque纽哥,不要選Clears Graphics Context和Clip to Bounds就好了钠乏。

2.按下Done按鈕之后的隱藏鍵盤


第一響應者即當前正在與用戶進行交互的控件,因此春塌,我們通知該控件放棄作為第一響應者的控制權缓熟,將其返還給用戶之前的操作。

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

3.觸摸背景關閉鍵盤

UIControl是UIView的子類摔笤,因此够滑,如果從UIView創(chuàng)建實例,更改為從UIControl類創(chuàng)建實例吕世,則獲得了觸發(fā)操作方法的能力彰触。首先我們創(chuàng)建一個點擊背景需要調用的操作方法(隱藏TextField)

- (IBAction) backgroundTap:(id)sender
{
    [self.nameField resignFirstResponder];
    [self.numberField resignFirstResponder];
}

然后選中容器視圖(注意是整個容器視圖),將class類型改成UIControl命辖。



最后况毅,把TouchDown事件拖動到View Controller圖標上面,選擇我們的方法:backgroundTap尔艇,則可以達成我們的效果了尔许。


三.滑動條

創(chuàng)建方法并將滑動條和該方法相關聯:

- (IBAction)sliderChanged:(UISlider *)sender {
    //獲得滑動條進度
    int progress = (int) lroundf(sender.value);
    //設置label顯示的滑動條進度
    self.sliderLabel.text = [NSString stringWithFormat: @"%d", progress];
}

需要初始化我們的Label顯示的進度:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.sliderLabel.text = @"100";
}

四.Segment、Switch和Button

創(chuàng)建Segment并設置toogleControls方法终娃,用于控制哪些控件應該顯示味廊。

- (IBAction)toggleControls:(UISegmentedControl *)sender {
    if (sender.selectedSegmentIndex == 0) {
        self.leftSwitch.hidden = NO;
        self.rightSwitch.hidden = NO;
        self.doSomethingButton.hidden = YES;
    }
    else {
        self.leftSwitch.hidden = YES;
        self.rightSwitch.hidden = YES;
        self.doSomethingButton.hidden = NO;
    }
}

設置兩個Switch的開關方法,使它們的狀態(tài)保存同步:

- (IBAction)switchChanged:(UISwitch *)sender {
    //設置一個開關的值會同時改變另一個開關的值
    BOOL setting = sender.isOn;
    [self.leftSwitch setOn: setting animated: YES];
    [self.rightSwitch setOn: setting animated: YES];
}

設置Button的背景為WhiteButton:



并設置相應的屬性如下:



在這里科普一下iOS的控件狀態(tài):
  • Normal:默認的普通狀態(tài)。
  • Highlighted:控件正被使用時的狀態(tài)余佛,對于按鈕來說柠新,表示用戶手指正在按鈕上。
  • Disabled:控件被關閉的狀態(tài)辉巡,可以在Interface Builder中取消Enabled復選框恨憎,或將控件的enabled屬性設置為NO。
  • Selected:只有小部分控件支持狀態(tài)郊楣。通常用于指示該控件已啟用或被選中憔恳。與Highlighted類似,但是失去了焦點之后依舊可以保持使用狀態(tài)净蚤。

五.操作表單和警告視圖

  • 操作表單(ActionSheet)的作用是要求用戶在兩個以上選項之間做出選擇喇嘱。在iPhone上,操作表單從屏幕底部出現塞栅,顯示一系列按鈕供用戶選擇者铜。
  • 警告視圖(Alert)以圓角矩形的形式出現在屏幕中央,要求用戶必須做出一個回應才能繼續(xù)使用應用程序放椰。通常用于通知用戶發(fā)生了一些重要的或者不尋常的事情作烟。

它們均由UIAlertController創(chuàng)建,需要在preferredStyle設置UIAlertControllerStyleActionSheet(操作表單)/UIAlertControllerStyleAlert(警告視圖)砾医。

1.創(chuàng)建一個操作表單

UIAlertController *controller =
[UIAlertController alertControllerWithTitle: @"Are you sure?"
                                    message: nil
                            preferredStyle: UIAlertControllerStyleActionSheet];

設置兩個UIAlertAction:yesAction和noAction拿撩。

UIAlertAction *yesAction =
[UIAlertAction actionWithTitle: @"Yes, I'm sure!"
                        style: UIAlertActionStyleDestructive
                       handler: ^(UIAlertAction *action) {
  //后續(xù)操作
}
UIAlertAction *noAction = [UIAlertAction actionWithTitle: @"No way!"
                                                   style: UIAlertActionStyleCancel
                                                 handler: nil];

其中,對于每個按鈕來說如蚜,都有三種style:

  • UIAlertActionStyleDestructive:以紅色粗體顯示压恒。
  • UIAlertActionStyleDefault:以藍色一般字體顯示。
  • UIAlertActionStyleCancel:以藍色粗體顯示错邦。

往UIAlertController中添加這兩種Action:

[controller addAction: yesAction];
[controller addAction: noAction];

為了讓警告視圖或操作表單顯示出來探赫,需要讓當前視圖控制器來展示警告控制器。

UIPopoverPresentationController *ppc = controller.popoverPresentationController;
if (ppc != nil) {
    ppc.sourceView = sender;
    ppc.sourceRect = sender.bounds;
}
[self presentViewController: controller
                   animated:YES
                 completion:nil];

通過獲取到警告控制器的懸浮展示控制器撬呢,并設置它的sourceView和sourceRect屬性來設定操作表單會出現的位置伦吠。

最后調用presentViewController的方法,將警告控制器作為展示的控制器以顯示操作表單魂拦。在展示視圖控制器時毛仪,被展示的視圖會暫時取代展示它的視圖控制器的視圖。

對于警告控制器芯勘,操作表單或警告視圖會部分覆蓋展示它們的視圖控制器的視圖箱靴,而視圖的剩余部分會被陰影覆蓋。

設置完之后荷愕,可以看到效果如下:


2.創(chuàng)建一個警告視圖

在上面的操作中衡怀,我們留了一個坑:在點擊了確認按鈕之后有個TODO棍矛,在這里,我們的TODO就是顯示一個警告視圖狈癞。

NSString *msg;
if ([self.nameField.text length] > 0) {
    msg = [NSString stringWithFormat: @"%@, Everything is OK.", self.nameField.text];
}
else {
    msg = [NSString stringWithFormat: @"Everything is OK."];
}
UIAlertController *controller2 = [UIAlertController
                                  alertControllerWithTitle: @"Something was done!"
                                  message: msg
                                  preferredStyle: UIAlertControllerStyleAlert];
UIAlertAction *cancelAction = [UIAlertAction actionWithTitle: @"Phew!"
                                                       style: UIAlertActionStyleCancel
                                                     handler: nil];
[controller2 addAction: cancelAction];
[self presentViewController: controller2
                   animated:YES
                 completion:nil];

很類似地茄靠,我們首先聲明一個UIAlertController并設置preferredStyle為UIAlertControllerStyleAlert茂契,說明這是一個警告視圖類型的控制器蝶桶。

然后,我們設置一個UIAlertAction掉冶,在這里只需設一個cancelAction即可真竖,聲明title和style后,將Action添加到Controller里面去厌小。

最后調用presentViewController方法恢共,使得AlertController能夠在主視圖中顯示出來。


踩過的坑

  1. 當調整進度條的時候璧亚,由于數值位數的改變讨韭,按鈕也會隨著移動。



    這是因為數值Label的寬度沒有固定好癣蟋,而Label和Switch之間有個約束透硝,因此他們會產生相對移動。
    解決方法:勾選Label的Width和Height選項疯搅,代表這個控件大小已經固定濒生。


  2. 模擬器的鍵盤調不出來


?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市幔欧,隨后出現的幾起案子罪治,更是在濱河造成了極大的恐慌,老刑警劉巖礁蔗,帶你破解...
    沈念sama閱讀 222,104評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件觉义,死亡現場離奇詭異,居然都是意外死亡浴井,警方通過查閱死者的電腦和手機谁撼,發(fā)現死者居然都...
    沈念sama閱讀 94,816評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來滋饲,“玉大人厉碟,你說我怎么就攤上這事⊥犁裕” “怎么了箍鼓?”我有些...
    開封第一講書人閱讀 168,697評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長呵曹。 經常有香客問我款咖,道長何暮,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,836評論 1 298
  • 正文 為了忘掉前任铐殃,我火速辦了婚禮海洼,結果婚禮上,老公的妹妹穿的比我還像新娘富腊。我一直安慰自己坏逢,他們只是感情好,可當我...
    茶點故事閱讀 68,851評論 6 397
  • 文/花漫 我一把揭開白布赘被。 她就那樣靜靜地躺著是整,像睡著了一般。 火紅的嫁衣襯著肌膚如雪民假。 梳的紋絲不亂的頭發(fā)上浮入,一...
    開封第一講書人閱讀 52,441評論 1 310
  • 那天,我揣著相機與錄音羊异,去河邊找鬼事秀。 笑死,一個胖子當著我的面吹牛野舶,可吹牛的內容都是我干的易迹。 我是一名探鬼主播,決...
    沈念sama閱讀 40,992評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼筒愚,長吁一口氣:“原來是場噩夢啊……” “哼赴蝇!你這毒婦竟也來了?” 一聲冷哼從身側響起巢掺,我...
    開封第一講書人閱讀 39,899評論 0 276
  • 序言:老撾萬榮一對情侶失蹤句伶,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后陆淀,有當地人在樹林里發(fā)現了一具尸體考余,經...
    沈念sama閱讀 46,457評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,529評論 3 341
  • 正文 我和宋清朗相戀三年轧苫,在試婚紗的時候發(fā)現自己被綠了楚堤。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,664評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡含懊,死狀恐怖身冬,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情岔乔,我是刑警寧澤酥筝,帶...
    沈念sama閱讀 36,346評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站雏门,受9級特大地震影響嘿歌,放射性物質發(fā)生泄漏掸掏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,025評論 3 334
  • 文/蒙蒙 一宙帝、第九天 我趴在偏房一處隱蔽的房頂上張望丧凤。 院中可真熱鬧,春花似錦步脓、人聲如沸愿待。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽呼盆。三九已至年扩,卻和暖如春蚁廓,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背厨幻。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評論 1 272
  • 我被黑心中介騙來泰國打工相嵌, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人况脆。 一個月前我還...
    沈念sama閱讀 49,081評論 3 377
  • 正文 我出身青樓饭宾,卻偏偏與公主長得像,于是被迫代替她去往敵國和親格了。 傳聞我的和親對象是個殘疾皇子看铆,可洞房花燭夜當晚...
    茶點故事閱讀 45,675評論 2 359

推薦閱讀更多精彩內容