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下載

 

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