這是圖蟲首頁點(diǎn)擊評(píng)論后的頁面,這個(gè)頁面有兩個(gè)亮點(diǎn):1.上半部分半透明舒帮;2.下半部分頂部切圓角。
實(shí)現(xiàn)思路:共 0 - 5 六個(gè)步驟。
0.創(chuàng)建一個(gè)控制器controllerX
1.在viewA(第0步創(chuàng)建的controllerX的view,以下簡稱A)上添加一個(gè)button和viewB(以下簡稱B)
2.設(shè)置A的背景色為[UIColor clearColor]骚烧,設(shè)置button的背景色為黑色,alpha為x(0到1之間闰围,根據(jù)需求自己確定)
注:通過這種設(shè)置可以給出一種視覺上的假象赃绊,就像開局的圖中展示的那樣,讓用戶看到一個(gè)上半部分半透明的頁面辫诅。而實(shí)際上凭戴,這個(gè)半透明的部分只是一個(gè)帶有透明度的button。以假亂真
3.設(shè)置B的左上角和有上角為圓角(本文最后會(huì)介紹如何指定切圓角)
4.設(shè)置button和B的約束炕矮。
注:這里需要特別說明一下么夫,請看下面的三張圖
圖1和圖3為我為了演示特意設(shè)置的測試截圖。圖2為項(xiàng)目正式的截圖(來自我們公司的產(chǎn)品TOP6000)肤视。
設(shè)置控件約束档痪,我使用的是第三方框架Masonry。
button的約束為:
B的約束為:
注意我用紅線圈住的兩條約束邢滑,按鈕的高度給的固定值30腐螟,B的頂部距離父view的頂部固定18。這里需要注意什么呢?就是按鈕的高度要大于B頂部到父view頂部的距離乐纸,這樣做就可以使得按鈕多出來一部分衬廷,避免出現(xiàn)圖1那種情況。
5.最后一步:直接以modal的方式彈出controllerX就可以看到效果啦~
最后:如果大家有更好的思路汽绢,請私信我吗跋;如果發(fā)現(xiàn)我寫的有問題,沒說明白的宁昭,請私信我跌宛。謝謝。
備注:controllerX.modalPresentationStyle = UIModalPresentationOverCurrentContext;
self.definesPresentationContext = YES;
以上添加的這兩行代碼能夠保證present controllerX 之后, self.view仍然顯示.