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