UIView基礎(chǔ)控件

Framework:
Framework是一種打包方式硬耍,將編譯后的二進制文件以及頭文件和相關(guān)的資源打包放在一個頭目錄下匿值,方便分發(fā)給其他開發(fā)者進行使用

ios主要框架介紹:
Cocoa Touch 框架:
是一個框架的集合赠制,包含了很多子框架。蘋果根據(jù)功能將子框架分為四層:

Cocoa Touch Layer
Media Layer
Core Services Layer
Core Os Layer

UIKit Framework:
隸屬于Cocoa Touch Layer層中挟憔。

UILabel/UIImage介紹:
UIImage用來顯示圖片钟些,UILabel用來顯示文本。都繼承于UIView绊谭。

UIButton:
包含UILabel和UIImageView兩個屬性厘唾,繼承于UIControl,然而UIControl繼承于UIView龙誊「Ю可以對點擊事件進行處理。

UIViewController:
繼承自UIResponder趟大。

UIView布局(一):

布局就是告訴系統(tǒng)每個元素的位置以及元素高與寬的信息鹤树。

iPhone設(shè)備屏幕信息:


Point:
iPhone 3GS:1point=1pixels
iPhone4(s)/5(s)/6(s)/7(s)/SE:1point=2pixels
iPhone6(s)/7(s)plus:1point=3pixels

想更深入了解屏幕物理尺寸及屏幕分辨率對顯示效果的影響,可以了解下以下幾個概念:

  1. 屏幕的物理長度:使用英寸作為單位, 是指手機屏幕對角線的物理長度(diagonal)

  2. 屏幕像素:這里的像素可以想象成屏幕上真正用來顯示顏色的發(fā)光小點逊朽。

  3. PPI(Pixel Per Inch by diagonal):表示沿著對角線罕伯,每英寸所擁有的像素(Pixel)數(shù)目。

PPI 計算方式:

屏幕像素: width -- 320px, height -- 480px

屏幕物理長度:length -- 3.5英寸

Apple對 iPhone 6 Plus叽讳、iPhone 6s Plus追他、iPhone 7s Plus 的屏幕分辨率做了特殊處理坟募,物理尺寸與屏幕像素比例實際上只有2.46倍,并沒有達到3倍邑狸,但是仍然使用了3x模式進行屏幕適配懈糯。這是因為 Apple 并沒有像當年說服康寧那樣說服LCD生產(chǎn)商生產(chǎn)@3x的2208x1242分辨率的屏幕。

UIView坐標系:
原點在屏幕左上角单雾。

與UIView布局相關(guān)的幾個屬性 frame/bounds/center:


修改父View的frame.origin的值赚哗,移動了父view的位置,子view在父view中的位置沒有修改硅堆,只能影響當前view的位置屿储。
view.center表示當前view在父view中的位置。
修改父view的bounds.origin的值渐逃,父view的位置沒有修改够掠,影響了子view在父view中的位置窝稿,但是相應(yīng)的位置信息沒有修改赴捞。修改子view的bounds.origin裕循,沒有影響父view的位置贿条。
修改父view的frame.size值泵三,只影響當前view相對于左上角的高寬大小磅崭。
修改父view的bounds.size值垫竞,父view的位置進行了移動缓屠。中心位置不變畜普,向四周擴大或縮小期丰。影響了子view在父view的位置,但是相應(yīng)的位置信息沒有修改吃挑。修改子view的bounds.size沒有影響父view的位置信息钝荡,但是影響了子view的位置信息。

frame 和 bounds
在學(xué)習iOS界面基礎(chǔ)的時候舶衬,bounds把我整的云里霧里的埠通,但是查了相關(guān)資料后,總算弄懂了逛犹。

frame:該view在父view坐標系統(tǒng)中的位置和大小端辱。(參照點是父坐標系統(tǒng))
bounds:該view在本地坐標系統(tǒng)中的位置和大小。(參照點是自身的坐標系統(tǒng))
frame(CGRect)origin 在父視圖中距離原點的位置size 距離當前視圖左上角的大小
center(CGPoint)當前視圖的中心點在父視圖中的位置
bounds(CGRect)origin 當前視圖的左上角距離自身坐標系的原點的位置虽画。移動時舞蔽,移動的是自身的坐標系統(tǒng),視圖本身不移動size 當前視圖在自身坐標系的高和寬码撰。改變大小時渗柿,center相對于父坐標系統(tǒng)的位置不變,而圖像跟自身坐標系一起改變脖岛。此時朵栖,由于自身坐標系統(tǒng)的改變颊亮,會導(dǎo)致子視圖位置發(fā)生移動。

frame的絕對定位布局:


frame + autoresizing相對布局:
取消file inspector中use auto layout勾選


autoresizing只能設(shè)置兩個父子視圖之間的相對位置關(guān)系陨溅。

AutoLayout布局:
通過添加約束對象终惑,可以設(shè)置任何控件之間的關(guān)系。約束對象指的是同一層級控件之間的關(guān)系声登。

UIView布局方式總結(jié):
frame絕對定位布局
frame+autoresizing相對布局
autolayout布局

基礎(chǔ)控件實戰(zhàn):

視覺稿及需求分析:
點擊登錄,顯示loading揣苏,驗證登錄信息
驗證成功悯嗓,進入我的主頁
輸入文字,點擊發(fā)布卸察,在當前頁面顯示脯厨。

界面的實現(xiàn)方式:
純代碼
Interface Builder

Interface Builder介紹:
nib(NeXT Interface Builder) //采用二進制格式,不方便進行版本控制坑质。
xib(XML Interface Builder) //工程編譯的時候?qū)ib文件轉(zhuǎn)換為nib合武。[UINib class];
storyboard //ios5之后推出的。[UIStoryboard class];

界面跳轉(zhuǎn):
storyboard中vc跳轉(zhuǎn)優(yōu)先級高于代碼中的跳轉(zhuǎn)vc涡扼。
Button Action

  • (void)presentViewController:(UIViewController *)viewControllerToPresent animated: (BOOL)flag completion:(void (^ __nullable)(void))completion

Storyboard

  • (void)performSegueWithIdentifier:(NSString *)identifier sender:(nullable id)sender

  • (BOOL)shouldPerformSegueWithIdentifier:(NSString *)identifier sender:(nullable id)sender NS_AVAILABLE_IOS(6_0);

xib文件與Class關(guān)聯(lián):
File’s Owner->Custom Class
xib—————————————>類文件
UIView->Custom Class

File’s Owner:關(guān)聯(lián)View與ViewController root view的關(guān)系
CustomView *newView = [ [ [NSBundle mainBundle] loadNibNamed:[nibName] owner:[newView instance] options:nil] firstObject];

UIView Class:自定義UIView對象
CustomView *newView = [ [ [NSBundle mainBundle] loadNibNamed:[nibName] owner:nil options:nil] firstObject];

用代碼加載指定的xib文件:
[ [ NSBundle mainBundle ] loadNibNamed:[ nibName ]
owner:nil options:nil ];

加載 xib 文件有兩種方式:
[[NSBundle mainBundle] loadNibNamed: owner: options:];
[UINib nibWithNibName: bundle:];

xib 文件在iOS中做為資源文件存在稼跳,因此可以使用NSBundle的方式進行加載。

在iOS4.0以后新增了[UINib class] 用于加載nib資源文件吃沪。

UILable高度計算:
方法一:
[ UIView Class ]

  • (CGSize)sizeThatFits: (CGSize) size
    當寬度固定汤善,高度不限時自動換行。代碼如下:
    CGSize labelSize = CGSizeMake(labelA.width, CGFLOAT_MAX);
    [ labelA sizeThatFits:labelSize ];
    方法二:
    [ NSString Class ]
  • (CGRect)boundingRectWithSize:(CGSize)size
    options:(NSStringDrawingOptions)options
    attributes:(nullable NSDictionary<NSString * , id>*)attributes
    context:(nullable NSStringDrawingContext * )context
    代碼如下:
    CGSize labelSize = CGSizeMake(labelA.width, CGFLOAT_MAX);
    [ labelA.text boundingRectWithSize:labelSize
    options:NSStringDrawingUsesLineFragmentOrigin
    attributes:@{NSFontAttributeName:labelA.font}
    context:nil ]
    方法三:

在給視圖添加邊界約束時票彪,可以選擇是否勾選Constrain to margins红淡。

在圖1中,當勾選Constrain to margins時降铸,添加右側(cè)邊界約束時在旱,實際約束對象建立的是NSLayoutAttributeTrailingMargin 邊界約束(如圖2);

當不勾選Constrain to margins時推掸,添加右側(cè)邊界約束桶蝎,實際約束對象建立的是NSLayoutAttributeTrailing 邊界約束 (如圖3)。

在NSLayoutAttribute 枚舉中谅畅,各條邊都有對應(yīng)的Margin邊界枚舉值

NSLayoutAttributeLeft / NSLayoutAttributeLeftMargin

NSLayoutAttributeRight / NSLayoutAttributeRightMargin

NSLayoutAttributeTop / NSLayoutAttributeTopMargin

NSLayoutAttributeBottom / NSLayoutAttributeBottomMargin俊嗽。

......

在iOS8中,約束對象的內(nèi)容區(qū)域其實是一個盒模型铃彰,包含了內(nèi)邊緣與外邊緣绍豁。如下圖。

通常情況下我們都是使用內(nèi)容區(qū)域的內(nèi)邊緣設(shè)置內(nèi)容的大小牙捉。

在可視化界面中 建立約束竹揍,取消勾選Constrain to margins時敬飒,表示創(chuàng)建的約束對象邊界為內(nèi)邊緣(即內(nèi)容邊界),對應(yīng)的約束邊界屬性為NSLayoutAttributeLeft/Right/Top/Bottom芬位。

但是勾選Constrain to margins時无拗,創(chuàng)建的約束對象邊界為外邊緣(即內(nèi)容邊界+系統(tǒng)定義的內(nèi)容邊緣間距),會默認增加內(nèi)外邊緣的間距昧碉,對應(yīng)的約束邊界屬性為NSLayoutAttributeLeftMargin/RightMargin/TopMargin/BottomMargin英染。

可以用 layoutMargins 或者 layoutMarginsGuide 屬性 獲取視圖的內(nèi)外邊緣間的 margin 值。

每一個視圖UIView的默認 margin 值是8被饿,可以根據(jù)需要進行修改四康。

但是系統(tǒng)給 ViewController的rootView 根視圖設(shè)置的margin,上下margin為0狭握,左右margin為20(Xcode8中為 16)闪金,根視圖的 margin值不能修改。

繪制我的主頁界面

UIView動畫

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0, completion = NULL
NSLayoutAttributeLeft :內(nèi)容左側(cè)
NSLayoutAttributeRight:內(nèi)容右側(cè)
NSLayoutAttributeLeading:內(nèi)容頭部
NSLayoutAttributeTrailing:內(nèi)容尾部

通常情況下论颅,在大部分語言體系中都是從左往右進行閱讀:
    NSLayoutAttributeLeft 與 NSLayoutAttributeLeading 都表示內(nèi)容左側(cè)
    NSLayoutAttributeRight 與 NSLayoutAttributeTrailing 都表示內(nèi)容右側(cè)

但是在部分特殊語系中 (比如阿拉伯語)哎垦,從右往左進行閱讀,這時內(nèi)容的的頭部在右側(cè)恃疯,尾部在左側(cè)
     NSLayoutAttributeLeft 與 NSLayoutAttributeTrailing 都表示內(nèi)容左側(cè)
    NSLayoutAttributeRight 與 NSLayoutAttributeLeading 都表示內(nèi)容右側(cè)

如果涉及到App國際化漏设,要根據(jù)實際的交互稿考慮使用 NSLayoutAttributeLeft/Right 及 NSLayoutAttributeLeading/Trailing。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末今妄,一起剝皮案震驚了整個濱河市愿题,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蛙奖,老刑警劉巖潘酗,帶你破解...
    沈念sama閱讀 211,376評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異雁仲,居然都是意外死亡仔夺,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評論 2 385
  • 文/潘曉璐 我一進店門攒砖,熙熙樓的掌柜王于貴愁眉苦臉地迎上來缸兔,“玉大人,你說我怎么就攤上這事吹艇《杳郏” “怎么了?”我有些...
    開封第一講書人閱讀 156,966評論 0 347
  • 文/不壞的土叔 我叫張陵受神,是天一觀的道長抛猖。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么财著? 我笑而不...
    開封第一講書人閱讀 56,432評論 1 283
  • 正文 為了忘掉前任联四,我火速辦了婚禮,結(jié)果婚禮上撑教,老公的妹妹穿的比我還像新娘朝墩。我一直安慰自己,他們只是感情好伟姐,可當我...
    茶點故事閱讀 65,519評論 6 385
  • 文/花漫 我一把揭開白布收苏。 她就那樣靜靜地躺著,像睡著了一般愤兵。 火紅的嫁衣襯著肌膚如雪鹿霸。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,792評論 1 290
  • 那天恐似,我揣著相機與錄音杜跷,去河邊找鬼傍念。 笑死矫夷,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的憋槐。 我是一名探鬼主播双藕,決...
    沈念sama閱讀 38,933評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼阳仔!你這毒婦竟也來了忧陪?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,701評論 0 266
  • 序言:老撾萬榮一對情侶失蹤近范,失蹤者是張志新(化名)和其女友劉穎嘶摊,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體评矩,經(jīng)...
    沈念sama閱讀 44,143評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡叶堆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,488評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了斥杜。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片虱颗。...
    茶點故事閱讀 38,626評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蔗喂,靈堂內(nèi)的尸體忽然破棺而出忘渔,到底是詐尸還是另有隱情,我是刑警寧澤缰儿,帶...
    沈念sama閱讀 34,292評論 4 329
  • 正文 年R本政府宣布畦粮,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏锈玉。R本人自食惡果不足惜爪飘,卻給世界環(huán)境...
    茶點故事閱讀 39,896評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望拉背。 院中可真熱鬧师崎,春花似錦、人聲如沸椅棺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽两疚。三九已至床估,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間诱渤,已是汗流浹背丐巫。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留勺美,地道東北人递胧。 一個月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像赡茸,于是被迫代替她去往敵國和親缎脾。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,494評論 2 348

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