iOS UI基礎(chǔ)

1.控件

屏幕上的所有UI元素都叫做控件(也有叫做視圖驯鳖、組件)
比如按鈕(UIButton)岭参、文本(UILabel)都是控件

1.1控件的共同屬性

尺寸
位置
背景色
......
蘋果將控件的共同屬性都抽取到父類UIView中
所有的控件最終都繼承自UIView
UIButton夕土、UILabel都繼承自UIView(查看頭文件驗證)

2.UIView

1-UIView.png
@property(nonatomic,readonly) UIView *superview;
 獲得自己的父控件對象

@property(nonatomic,readonly,copy) NSArray *subviews;
 獲得自己的所有子控件對象

@property(nonatomic) NSInteger tag;
 控件的ID(標(biāo)識)饱亿,父控件可以通過tag來找到對應(yīng)的子控件

@property(nonatomic) CGAffineTransform transform; // 仿射變換
 控件的形變屬性(可以設(shè)置旋轉(zhuǎn)角度、比例縮放恢总、平移等屬性)

- (void)addSubview:(UIView *)view;
 添加一個子控件view

- (void)removeFromSuperview;
 從父控件中移除

- (UIView *)viewWithTag:(NSInteger)tag;
 根據(jù)一個tag標(biāo)識找出對應(yīng)的控件(一般都是子控件)

@property(nonatomic) CGRect frame;
 控件矩形框在父控件中的位置和尺寸(以父控件的左上角為坐標(biāo)原點)

@property(nonatomic) CGRect bounds;
 控件矩形框的位置和尺寸(以自己左上角為坐標(biāo)原點,所以bounds的x睬愤、y為0)

@property(nonatomic) CGPoint center;
 控件中點的位置(以父控件的左上角為坐標(biāo)原點)

3.父控件 子控件

每個控件都是個容器片仿,能容納其他控件
內(nèi)部小控件是大控件的子控件
大控件是內(nèi)部小控件的父控件
每一個控制器(UIViewController)內(nèi)部都有個默認(rèn)的UIView屬性

@property(nonatomic,retain) UIView *view;

控制器中管理的其他所有控件都是這個view的子控件(直接或者間接)

4.UIKit坐標(biāo)系

在UIKit中,坐標(biāo)系的原點(0尤辱,0)在左上角砂豌,x值向右正向延伸厢岂,y值向下正向延伸

2-UIKit坐標(biāo)系.png

5.UIImageView

UIKit框架提供了非常多的UI控件,但并不是每一個都很常用阳距,有些控件可能1年內(nèi)都用不上塔粒,有些控件天天用,比如UIButton筐摘、UILabel卒茬、UIImageView、UITableView等等
UIImageView極其常用蓄拣,功能比較專一:顯示圖片

6.UILabel

UILabel極其常用扬虚,功能比較專一:顯示文字

7.UIButton

一般情況下,點擊某個控件后球恤,會做出相應(yīng)反應(yīng)的都是按鈕
按鈕的功能比較多辜昵,既能顯示文字,又能顯示圖片咽斧,還能隨時調(diào)整內(nèi)部圖片和文字的位置

7.1按鈕的狀態(tài)

normal(普通狀態(tài))
默認(rèn)情況(Default)
對應(yīng)的枚舉常量:UIControlStateNormal

highlighted(高亮狀態(tài))
按鈕被按下去的時候(手指還未松開)
對應(yīng)的枚舉常量:UIControlStateHighlighted

disabled(失效狀態(tài)堪置,不可用狀態(tài))
如果enabled屬性為NO,就是處于disable狀態(tài)张惹,代表按鈕不可以被點擊
對應(yīng)的枚舉常量:UIControlStateDisabled

7.2設(shè)置按鈕的背景圖片

設(shè)置按鈕在不同狀態(tài)下的背景圖片
為了保證高亮狀態(tài)下的圖片正常顯示舀锨,必須設(shè)置按鈕的type為custom

3-設(shè)置按鈕的背景圖片.png

7.3按鈕的樣式

UIButton自帶了很多種不同的樣式

4-按鈕不同樣式.png

在用代碼創(chuàng)建按鈕的同時指定按鈕樣式

UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; 
UIButtonTypeCustom:無類型,按鈕的內(nèi)容需要自定義
UIButtonTypeDetailDisclosure: 
UIButtonTypeInfoLight: 
UIButtonTypeInfoDark: 
UIButtonTypeContactAdd: 

7.4UIButton的常見設(shè)置

- (void)setTitle:(NSString *)title forState:(UIControlState)state;
設(shè)置按鈕的文字

- (void)setTitleColor:(UIColor *)color forState:(UIControlState)state;
設(shè)置按鈕的文字顏色

- (void)setImage:(UIImage *)image forState:(UIControlState)state; 
設(shè)置按鈕內(nèi)部的小圖片

- (void)setBackgroundImage:(UIImage *)image forState:(UIControlState)state;
設(shè)置按鈕的背景圖片

btn.titleLabel.font = [UIFont systemFontOfSize:13];
設(shè)置按鈕的文字字體(需要拿到按鈕內(nèi)部的label來設(shè)置)

- (NSString *)titleForState:(UIControlState)state; 
獲得按鈕的文字

- (UIColor *)titleColorForState:(UIControlState)state;
獲得按鈕的文字顏色

- (UIImage *)imageForState:(UIControlState)state;
獲得按鈕內(nèi)部的小圖片

- (UIImage *)backgroundImageForState:(UIControlState)state;
獲得按鈕的背景圖片

8.View的封裝

如果一個view內(nèi)部的子控件比較多宛逗,一般會考慮自定義一個view坎匿,把它內(nèi)部子控件的創(chuàng)建屏蔽起來,不讓外界關(guān)心

外界可以傳入對應(yīng)的模型數(shù)據(jù)給view雷激,view拿到模型數(shù)據(jù)后給內(nèi)部的子控件設(shè)置對應(yīng)的數(shù)據(jù)

封裝控件的基本步驟

1>在initWithFrame:方法中添加子控件替蔬,提供便利構(gòu)造方法
2>在layoutSubviews方法中設(shè)置子控件的frame(一定要調(diào)用super的layoutSubviews)
3>增加模型屬性,在模型屬性set方法中設(shè)置數(shù)據(jù)到子控件上

9.Xib & Storyboard

共同點
1.都用來描述軟件界面
2.都用Interface Builder工具來編輯
3.本質(zhì)都是轉(zhuǎn)換成代碼去創(chuàng)建控件

不同點
1.Xib是輕量級的屎暇,用來描述局部的UI界面
2.Storyboard是重量級的承桥,用來描述整個軟件的多個界面,并且能展示多個界面之間的跳轉(zhuǎn)關(guān)系

9.1Xib的加載

方法1

NSArray *views = [[NSBundle mainBundle] loadNibNamed:@"xib文件名" 
                                               owner:nil 
                                             options:nil];

方法2

UINib *nib = [UINib nibWithNibName:@"xib文件名" bundle:nil];
NSArray *views = [nib instantiateWithOwner:nil options:nil];
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末根悼,一起剝皮案震驚了整個濱河市凶异,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌挤巡,老刑警劉巖剩彬,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異矿卑,居然都是意外死亡襟衰,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來瀑晒,“玉大人绍坝,你說我怎么就攤上這事√υ茫” “怎么了轩褐?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長玖详。 經(jīng)常有香客問我把介,道長,這世上最難降的妖魔是什么蟋座? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任拗踢,我火速辦了婚禮,結(jié)果婚禮上向臀,老公的妹妹穿的比我還像新娘巢墅。我一直安慰自己,他們只是感情好券膀,可當(dāng)我...
    茶點故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布君纫。 她就那樣靜靜地躺著,像睡著了一般芹彬。 火紅的嫁衣襯著肌膚如雪蓄髓。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天舒帮,我揣著相機(jī)與錄音会喝,去河邊找鬼。 笑死玩郊,一個胖子當(dāng)著我的面吹牛肢执,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播瓦宜,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼岭妖!你這毒婦竟也來了临庇?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤昵慌,失蹤者是張志新(化名)和其女友劉穎假夺,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體斋攀,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡已卷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了淳蔼。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片侧蘸。...
    茶點故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡裁眯,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出讳癌,到底是詐尸還是另有隱情穿稳,我是刑警寧澤,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布晌坤,位于F島的核電站逢艘,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏骤菠。R本人自食惡果不足惜它改,卻給世界環(huán)境...
    茶點故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望商乎。 院中可真熱鬧央拖,春花似錦、人聲如沸截亦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽崩瓤。三九已至袍啡,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間却桶,已是汗流浹背境输。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留颖系,地道東北人嗅剖。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像嘁扼,于是被迫代替她去往敵國和親信粮。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內(nèi)容