秒懂frame和bounds, 從此以后不迷惑

我們在寫bounds的時(shí)候通常是self.xxxView.bounds = CGRectMake(0,0,100,100);似乎(x, y)寫成(0, 0)是一種習(xí)慣, 也是一種比較安全的行為, 因?yàn)? 如果改變了(x, y)通常會(huì)有無法預(yù)知的事情發(fā)生, 今天就來探索下, 到底會(huì)發(fā)生些什么!

1 frame基本用法

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = UIColor.redColor;
    redView.frame = CGRectMake(0, 0, 200, 200);
    [self.view addSubview:redView];
圖1

沒有什么好說的, 大家都知道結(jié)果會(huì)是這樣

2初級(jí)用法

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = UIColor.redColor;
    redView.bounds = CGRectMake(0, 0, 200, 200);
    [self.view addSubview:redView];
圖2

看到了嗎? 在不設(shè)置frame的情況下, 只設(shè)置bounds, 會(huì)讓redView的中心點(diǎn)和self.view的起始點(diǎn)重合, 這里不得不說一下錨點(diǎn):

一個(gè)view的layer是有anchorPoint的, 默認(rèn)情況下, anchorPoint是(0.5, 0.5), 也就是在這個(gè)view的中點(diǎn). 當(dāng)addSubview(如果僅僅設(shè)置了bounds)的時(shí)候, 會(huì)讓錨點(diǎn)和父view的起始點(diǎn)重合, 這也就解釋了為什么會(huì)出現(xiàn)圖2的情況. 我想對(duì)于單獨(dú)使用bounds出現(xiàn)的結(jié)果, 我已經(jīng)解釋清楚了.

3中級(jí)用法

    [super viewDidLoad];
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = UIColor.redColor;
    redView.frame = CGRectMake(0, 0, 200, 200);
    redView.bounds = CGRectMake(-100, -100, 200, 200);
    [self.view addSubview:redView];
    
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = UIColor.blueColor;
    blueView.frame = CGRectMake(0, 0, 100, 100);
    [redView addSubview:blueView];

這里已經(jīng)把redView 的frame設(shè)置在了(0,0,200,200) 然后又設(shè)置了bounds, 但是不改變width和height

圖3

這種情況, (-100, -100) 相當(dāng)于把redView的坐標(biāo)系, 也就是redView的子view(這里就是blueView了)的起始點(diǎn)向右下移動(dòng)(100, 100), 這里的減號(hào)表示方向, point的第一個(gè)參數(shù)是左右移動(dòng), 第二個(gè)是上下移動(dòng), so, 此時(shí)藍(lán)色view認(rèn)為父view(紅色view)的起始點(diǎn)在整個(gè)坐標(biāo)系的(100, 100)位置. 所以此時(shí)設(shè)置藍(lán)色view的frame會(huì)出現(xiàn)在圖3的位置.

4高級(jí)用法

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = UIColor.redColor;
    redView.frame = CGRectMake(0, 0, 200, 200);
    redView.bounds = CGRectMake(-100, -100, 300, 300);
    [self.view addSubview:redView];

此時(shí)通過給redView設(shè)置bounds, 不僅改變(x, y)還改變(width, height)這時(shí)候會(huì)出現(xiàn)什么結(jié)果呢?

圖4

輸出一下redView的frame

{{-50, -50}, {300, 300}}

起始點(diǎn)變成了(-50, -50)
輸出下anchorPoint

{0.5, 0.5}

錨點(diǎn)沒變, 但是起點(diǎn)變了. 說好的anchorPoint和起點(diǎn)重合呢? 喂, 現(xiàn)在不是單純的設(shè)置bounds啊, 你設(shè)置了frame了好不啦! 為什么會(huì)出現(xiàn)這種情況呢? 小編認(rèn)為, 在單純通過設(shè)置bounds的情況下, 錨點(diǎn)的絕對(duì)坐標(biāo)應(yīng)該是{0, 0}, 但是現(xiàn)在先設(shè)置了frame又重置了bounds的寬高(注意, 這里bounds的x,y不會(huì)影響到redView的顯示), 那增加的寬高如何分配呢? 總之寬高都不能變, 還是{300, 300}, 那就確定錨點(diǎn)的絕對(duì)坐標(biāo)就行了, 錨點(diǎn)最初因?yàn)樵O(shè)置frame(0,0,200, 200), 所以錨點(diǎn)的絕對(duì)坐標(biāo)在{100, 100}, 因?yàn)殄^點(diǎn)的絕對(duì)坐標(biāo)是不會(huì)變的, 所以frame的范圍是{100-300/2, 100+300/2}={-50,250}, 所以frame={{-50, -50}, {300, 300}}

5終極玩法

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = UIColor.redColor;
    redView.frame = CGRectMake(20, 20, 200, 200);
    redView.bounds = CGRectMake(0, 0, 300, 300);
    [self.view addSubview:redView];

如果說高級(jí)玩法還勉強(qiáng)可以接受的話, 那終極玩法純粹是作死啊, 已經(jīng)設(shè)置了frame, 然而frame并不在整個(gè)view的起點(diǎn), 因?yàn)殄^點(diǎn)(0.5, 0.5), 通過frame確定中心點(diǎn), 為(120, 120), 因?yàn)殄^點(diǎn)不動(dòng), 所以frame的范圍是{120-150, 120+150}, 所以frame={{-30, -30}, {300, 300}}
看下結(jié)果

圖5

總結(jié):

1 設(shè)置了bounds的(x, y)相當(dāng)于給子view一個(gè)起點(diǎn), 其中, 減號(hào)表示向正方向偏移.
2 單純設(shè)置bounds顯示出來的view的位置和錨點(diǎn)有關(guān).
3 通過先設(shè)置frame再設(shè)置bounds的做法在實(shí)際開發(fā)中沒任何意義. 要知道真實(shí)frame的絕對(duì)位置, 需要通過錨點(diǎn)確定的原中心點(diǎn)的絕對(duì)位置, 然后保持中心點(diǎn)位置不變, 根據(jù)大小就能確定起始點(diǎn)了.
4 先設(shè)置bounds再設(shè)置frame, 以frame值為最終view的frame.

思考

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = UIColor.redColor;
    redView.frame = CGRectMake(20, 20, 200, 200);
    redView.bounds = CGRectMake(0, 0, 100, 100);
    [self.view addSubview:redView];

這個(gè)redView的frame是多少呢?

答案:

{{70, 70}, {100, 100}}

解讀:

frame(20, 20, 200, 200)和anchorPoint(0.5, 0.5), 確定了中心點(diǎn)的絕對(duì)位置 20+200*0.5 = 120, 因?yàn)殄^點(diǎn)不動(dòng), 所以frame的范圍是{120-50, 120+50}, 所以frame={{70, 70}, {100, 100}}.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末纷闺,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子港华,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件砂碉,死亡現(xiàn)場離奇詭異什往,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)饰潜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來和簸,“玉大人彭雾,你說我怎么就攤上這事∷#” “怎么了薯酝?”我有些...
    開封第一講書人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長爽柒。 經(jīng)常有香客問我吴菠,道長,這世上最難降的妖魔是什么浩村? 我笑而不...
    開封第一講書人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任做葵,我火速辦了婚禮,結(jié)果婚禮上心墅,老公的妹妹穿的比我還像新娘酿矢。我一直安慰自己,他們只是感情好怎燥,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開白布瘫筐。 她就那樣靜靜地躺著,像睡著了一般铐姚。 火紅的嫁衣襯著肌膚如雪策肝。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,165評(píng)論 1 299
  • 那天隐绵,我揣著相機(jī)與錄音之众,去河邊找鬼。 笑死依许,一個(gè)胖子當(dāng)著我的面吹牛酝枢,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播悍手,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼帘睦,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了坦康?” 一聲冷哼從身側(cè)響起竣付,我...
    開封第一講書人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎滞欠,沒想到半個(gè)月后古胆,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡筛璧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年逸绎,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片夭谤。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡棺牧,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出朗儒,到底是詐尸還是另有隱情颊乘,我是刑警寧澤,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布醉锄,位于F島的核電站乏悄,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏恳不。R本人自食惡果不足惜檩小,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望烟勋。 院中可真熱鬧规求,春花似錦、人聲如沸神妹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鸵荠。三九已至冕茅,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蛹找,已是汗流浹背姨伤。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留庸疾,地道東北人乍楚。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像届慈,于是被迫代替她去往敵國和親徒溪。 傳聞我的和親對(duì)象是個(gè)殘疾皇子忿偷,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353

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

  • 1 CALayer IOS SDK詳解之CALayer(一) http://doc.okbase.net/Hell...
    Kevin_Junbaozi閱讀 5,148評(píng)論 3 23
  • 在iOS實(shí)際開發(fā)中常用的動(dòng)畫無非是以下四種:UIView動(dòng)畫,核心動(dòng)畫臊泌,幀動(dòng)畫鲤桥,自定義轉(zhuǎn)場動(dòng)畫。 1.UIView...
    請叫我周小帥閱讀 3,092評(píng)論 1 23
  • 在iOS實(shí)際開發(fā)中常用的動(dòng)畫無非是以下四種:UIView動(dòng)畫渠概,核心動(dòng)畫茶凳,幀動(dòng)畫,自定義轉(zhuǎn)場動(dòng)畫播揪。下面我們逐個(gè)介紹贮喧。...
    4b5cb36a2ee2閱讀 353評(píng)論 0 0
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜猪狈,今天將帶大家一窺ios動(dòng)畫全貌箱沦。在這里你可以看...
    每天刷兩次牙閱讀 8,485評(píng)論 6 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜罪裹,今天將帶大家一窺iOS動(dòng)畫全貌饱普。在這里你可以看...
    F麥子閱讀 5,110評(píng)論 5 13