Masonry + UIScrollView 之上下滾動(dòng)

????作為iOS初學(xué)者,習(xí)慣了用frame來寫控件位置,隨著往下學(xué)習(xí)糊啡,接觸到自動(dòng)布局的使用蠕蚜,然后發(fā)現(xiàn)用frame寫,會(huì)出現(xiàn)一系列問題悔橄。接著我改變以前的習(xí)慣靶累,慢慢學(xué)習(xí)自動(dòng)布局,適應(yīng)用自動(dòng)布局代替frame的使用。在網(wǎng)上找各種資料癣疟,隨后在簡(jiǎn)書找到不錯(cuò)的masonry學(xué)習(xí)文章挣柬,各位可以看看這篇iOS Autolayout之Masonry解讀,應(yīng)該對(duì)初學(xué)者有用睛挚。


Masonry + UIScrollView使用:

? ? 這是我在學(xué)習(xí)自動(dòng)布局的時(shí)候遇到過的問題邪蛔,當(dāng)時(shí)界面寫完,加上布局扎狱,不會(huì)滾動(dòng)侧到?當(dāng)時(shí)心里想,“挖槽淤击,什么情況”匠抗,然后在網(wǎng)上查找資源解決問題.



剛開始寫完是這樣的不會(huì)滑動(dòng)的:


不會(huì)滾動(dòng)界面.

綠色是View,準(zhǔn)備在上面放UIButton的污抬,然后不會(huì)滑動(dòng)就沒添加汞贸。



然后我參考網(wǎng)上的資料绳军,我發(fā)現(xiàn)自己錯(cuò)誤:


給了ContenSize設(shè)置了太小....(其實(shí)當(dāng)時(shí)在masonry不知道怎么設(shè)置)





然后在網(wǎng)上發(fā)現(xiàn)大神們,根本沒有設(shè)置ContenSize的大小矢腻,為什么會(huì)滾動(dòng)呢门驾?

原來把自定義的View添加到scrollView上時(shí),它的大小就是scrollView的contenSize的大小了!多柑!

接著把所有的控件都添加到這個(gè)view上奶是,然后使自定義View底部約束??等于? 自定義View里面的最后一個(gè)控件底部約束。




第一步:

? ? self.scrollview = [[UIScrollView alloc] init];??

? self.scrollview.backgroundColor = [UIColor clearColor];?? ?? ? self.scrollview.showsVerticalScrollIndicator = NO;?

? //增加額外的滾動(dòng)區(qū)域? ?

//self.scrollview.contentInset? = UIEdgeInsetsMake(-20, 0, 44, 0);? ?

// 去掉彈簧效果

//? ? self.scrollview.bounces = NO;?

? [self.view addSubview:self.scrollview];?? ??

? // UIScrollView 對(duì)四邊left top bottom right 進(jìn)行約束竣灌,值均為0聂沙,作為view 的子視圖存在? ? [self.scrollview mas_makeConstraints:^(MASConstraintMaker *make) {? ? ? ? make.top.left.bottom.right.equalTo(self.view);?

? }];


第二步:

//自定義的View??

? //UIScrollView 新增一個(gè)名為v1 視圖UIView,同樣對(duì)其四邊約束帐偎,添加width 相對(duì)父視圖進(jìn)行寬度約束逐纬。(關(guān)鍵的一步蛔屹。需要為UIScrollView 添加一個(gè)子視圖)? ?

//v1 的高度內(nèi)容削樊,決定 這個(gè)滾動(dòng)條會(huì)不會(huì)上下滾動(dòng),影響contentSize?

? UIView *v1 = [[UIView alloc] init];?

? v1.backgroundColor = [UIColor grayColor];

? ? [self.scrollview addSubview:v1];

? ? [v1 mas_makeConstraints:^(MASConstraintMaker *make) {? ? ? ? make.edges.equalTo(self.scrollview);? ? ? ? //上下滾動(dòng)? ? ? ? make.width.equalTo(self.scrollview);? ? ?

? /*?? ? ? ? 和下面的效果一樣? ? ? ?

make.top.mas_equalTo(self.scrollView.mas_top).offset(0);? ? ? ? make.left.mas_equalTo(self.scrollView.mas_left).offset(0);? ? ? ? make.right.mas_equalTo(self.scrollView.mas_right).offset(0);? ? ? ? make.bottom.mas_equalTo(self.scrollView.mas_bottom).offset(0);?? ? ?

??? ? ? ? */

? ? }];?? ?


第三步(重要的一步):


//v1最后一個(gè)控件

? ? ? ? ?UIButton *btn2 = [[UIButton alloc] init];? ?

btn2.titleLabel.textColor = [UIColor whiteColor];?

? btn2.backgroundColor = [UIColor blackColor];?

? [btn2 setTitle:@"點(diǎn)擊報(bào)名" forState:UIControlStateNormal];??

?? ? [v1 addSubview:btn2];

//添加btn2的約束

? ? [btn2 mas_makeConstraints:^(MASConstraintMaker *make) {? ? ? ? make.top.mas_equalTo(laba9.mas_bottom).offset(50);? ? ? ? make.centerX.mas_equalTo(v1);? ? ?

? make.width.and.height.mas_equalTo(80);??

? ? ?? ? }];

? ? //使自定義View底部等于最后一個(gè)控件設(shè)置的底部約束兔毒。? ?

[v1 mas_makeConstraints:^(MASConstraintMaker *make) {? ?

? ? make.bottom.equalTo(btn2.mas_bottom);?

? }];

你會(huì)注意上面的代碼 [v1 mas_makeConstraints…]使用了兩次..

這是沒有錯(cuò)的..雖然v1對(duì)象是一樣的..但約束是不一樣的.

第一個(gè)是對(duì)scrollview 的..第二個(gè)是對(duì)btn2的.

PS:v1這個(gè)視圖是來設(shè)置scrollView的contenSize的大小的.

引用它來實(shí)現(xiàn)scrollView的滾動(dòng).


可以參考一下:

Demo



如果有哪里錯(cuò)誤指出漫贞,望大神指出.



最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市育叁,隨后出現(xiàn)的幾起案子迅脐,更是在濱河造成了極大的恐慌,老刑警劉巖豪嗽,帶你破解...
    沈念sama閱讀 211,561評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谴蔑,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡龟梦,警方通過查閱死者的電腦和手機(jī)隐锭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來计贰,“玉大人钦睡,你說我怎么就攤上這事≡甑梗” “怎么了荞怒?”我有些...
    開封第一講書人閱讀 157,162評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)秧秉。 經(jīng)常有香客問我褐桌,道長(zhǎng),這世上最難降的妖魔是什么象迎? 我笑而不...
    開封第一講書人閱讀 56,470評(píng)論 1 283
  • 正文 為了忘掉前任撩嚼,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘完丽。我一直安慰自己恋技,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,550評(píng)論 6 385
  • 文/花漫 我一把揭開白布逻族。 她就那樣靜靜地躺著蜻底,像睡著了一般。 火紅的嫁衣襯著肌膚如雪聘鳞。 梳的紋絲不亂的頭發(fā)上薄辅,一...
    開封第一講書人閱讀 49,806評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音抠璃,去河邊找鬼站楚。 笑死,一個(gè)胖子當(dāng)著我的面吹牛搏嗡,可吹牛的內(nèi)容都是我干的窿春。 我是一名探鬼主播,決...
    沈念sama閱讀 38,951評(píng)論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼采盒,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼旧乞!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起磅氨,我...
    開封第一講書人閱讀 37,712評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤尺栖,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后烦租,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體延赌,經(jīng)...
    沈念sama閱讀 44,166評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,510評(píng)論 2 327
  • 正文 我和宋清朗相戀三年叉橱,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了挫以。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,643評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡赏迟,死狀恐怖屡贺,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情锌杀,我是刑警寧澤甩栈,帶...
    沈念sama閱讀 34,306評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站糕再,受9級(jí)特大地震影響量没,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜突想,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,930評(píng)論 3 313
  • 文/蒙蒙 一殴蹄、第九天 我趴在偏房一處隱蔽的房頂上張望究抓。 院中可真熱鬧,春花似錦袭灯、人聲如沸刺下。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)橘茉。三九已至,卻和暖如春姨丈,著一層夾襖步出監(jiān)牢的瞬間畅卓,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工蟋恬, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留翁潘,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,351評(píng)論 2 360
  • 正文 我出身青樓歼争,卻偏偏與公主長(zhǎng)得像拜马,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子矾飞,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,509評(píng)論 2 348