iOS 利用模態視圖實現帶黑色蒙版的底部彈窗


本demo僅適用於iOS8及以上系統。

本文將使用autolayout+storyboard來實現彈窗

第一步、storyboard創建界面

1、打開storyboard 拖一個UIViewcontroller出來,並與class相關聯

2、拖出一個UIView作為彈窗視圖的容器,容器里放置彈窗的內容,容器高度根據具體需求放置。容器放在最底部 

3、放置一個UIButton在容器View的上方間距為0,並把UIButton設置為黑色(用於實現蒙版效果及點擊空白處關閉彈窗)

4、約束。底部容器打left、right、bottom、height這個約束。UIButton打 left、right、top、bottom約束 如圖

 

底部容器約束

UIButton約束

 

5、約束。將底部容器的bottom約束編輯修改 如圖

 

修改容器bottom約束

修改容器bottom約束

修改容器bottom約束

 

6、找到底部容器的bottom約束拉線到對應的UIViewController 如圖

拉線

第二步、設置蒙版及彈窗動畫

1、修改UIButton的透明度並把UIViewController的View的背景色設置為透明 如圖

設置透明度

 

2、實現彈窗動畫,在viewDidAppear中實現,這樣才可以看到整個動畫過程 如圖

修改約束

 

3、彈出模態視圖 如圖

模態視圖

幾個屬性的解釋

解釋內容摘至博客園 不打擾是我的溫柔 http://www.cnblogs.com/SenDylan/p/3953832.html

providesPresentationContextTransitionStyle

definesPresentationContext

modalPresentationStyle

部分類容讀起來怪怪的,不清楚是不是翻譯軟件的原因。

 

4、關閉彈窗

關閉彈窗

 

最后來個演示gif 和 demo

 

demo下載

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM