iOS開發(fā)中經(jīng)常會用到模態(tài)彈框。我的經(jīng)驗(yàn)是用模態(tài)彈出視圖控制器葛圃，然后在控制器上自定義彈框的展示形式
我會先提出需求岛杀，然后通過代碼給出解決方案,最后解釋原理躯嫉。
提出需求
點(diǎn)擊自下而上按鈕彈出模態(tài)視圖，點(diǎn)擊漸隱漸現(xiàn)按鈕彈出模態(tài)視圖
Paste_Image.png
解決方案
我會把所有代碼寫在main.m文件中，以便于大家理解
Objective-C
完整代碼
#import <UIKit/UIKit.h>
#define SCREENWIDTH [UIScreen mainScreen].bounds.size.width
#pragma mark==========presentViewController
@interface PresentViewController : UIViewController
@end
@implementation PresentViewController
- (void)viewDidLoad{
[super viewDidLoad];
[self setupUI];
}
//模態(tài)視圖控制器UI搭建
- (void)setupUI{
self.view.backgroundColor = [UIColor clearColor];
UIView *blackBg = [[UIView alloc]initWithFrame:self.view.bounds];
blackBg.backgroundColor = [UIColor blackColor];
blackBg.alpha = 0.5;
[self.view addSubview:blackBg];
UILabel * bgView = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 300, 300)];
bgView.center = CGPointMake(SCREENWIDTH * 0.5, 250);
bgView.backgroundColor = [UIColor whiteColor];
bgView.layer.cornerRadius = 8;
bgView.layer.masksToBounds = YES;
bgView.text = @"Hello 模態(tài)視圖";
bgView.textAlignment = NSTextAlignmentCenter;
[self.view addSubview:bgView];
UIButton *sureBtn = [[UIButton alloc]initWithFrame:CGRectMake(0, 256, 300, 44)];
sureBtn.backgroundColor = [UIColor blueColor];
[sureBtn setTitle:@"Sure" forState:UIControlStateNormal];
[sureBtn addTarget:self action:@selector(sureBtnTapped) forControlEvents:UIControlEventTouchUpInside];
[bgView addSubview:sureBtn];
}
//確認(rèn)按鈕點(diǎn)擊
- (void)sureBtnTapped{
[self dismissViewControllerAnimated:YES completion:nil];
}
//屏幕點(diǎn)擊
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[super touchesBegan:touches withEvent:event];
[self dismissViewControllerAnimated:YES completion:nil];
}
@end
#pragma mark==========rootViewController
@interface RootViewController : UIViewController
@property (nonatomic, strong) UIButton *downToUpBtn;
@property (nonatomic, strong) UIButton *alphaBtn;
@end
@implementation RootViewController
- (void)viewDidLoad{
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
//自下而上按鈕
self.downToUpBtn = [UIButton buttonWithType:UIButtonTypeCustom];
self.downToUpBtn.layer.cornerRadius = 8;
self.downToUpBtn.backgroundColor = [UIColor blueColor];
self.downToUpBtn.bounds = CGRectMake(0, 0, 99, 33);
self.downToUpBtn.center = CGPointMake(SCREENWIDTH *0.5, 200);
[self.downToUpBtn setTitle:@"自上而下" forState:UIControlStateNormal];
[self.downToUpBtn addTarget:self action:@selector(downToUpBtnTapped) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:self.downToUpBtn];
//漸隱漸現(xiàn)按鈕
self.alphaBtn = [UIButton buttonWithType:UIButtonTypeCustom];
self.alphaBtn.layer.cornerRadius = 8;
self.alphaBtn.backgroundColor = [UIColor redColor];
self.alphaBtn.bounds = CGRectMake(0, 0, 99, 33);
self.alphaBtn.center = CGPointMake(SCREENWIDTH *0.5, 273);
[self.alphaBtn setTitle:@"漸隱漸現(xiàn)" forState:UIControlStateNormal];
[self.alphaBtn addTarget:self action:@selector(alphaBtnBtnTapped) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:self.alphaBtn];
}
- (void)downToUpBtnTapped{
PresentViewController *vc = [[PresentViewController alloc]init];
//設(shè)置模態(tài)格式：自定義模態(tài)格式
vc.modalPresentationStyle= UIModalPresentationCustom;
//設(shè)置轉(zhuǎn)場動畫
vc.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
[self presentViewController:vc animated:YES completion:nil];
}
- (void)alphaBtnBtnTapped{
PresentViewController *vc = [[PresentViewController alloc]init];
//設(shè)置模態(tài)格式：自定義模態(tài)格式
vc.modalPresentationStyle= UIModalPresentationCustom;
//設(shè)置轉(zhuǎn)場動畫
vc.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
[self presentViewController:vc animated:YES completion:nil];
}
@end
#pragma mark==========自定義Delegate
@interface PresentAppDelegate : NSObject <UIApplicationDelegate>
@property (nonatomic, strong) UIWindow *window;
@end
@implementation PresentAppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
self.window.tintColor = [UIColor whiteColor];
//設(shè)置根控制器
self.window.rootViewController = [[RootViewController alloc]init];
[self.window makeKeyAndVisible];
return YES;
}
@end
#pragma mark==========程序入口
int main(int argc, char * argv[]) {
@autoreleasepool {
return UIApplicationMain(argc, argv, nil, NSStringFromClass([PresentAppDelegate class]));
}
}
Objective-C 效果
4.gif
Swift版
import UIKit
class PresentViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.clearColor()
self.modalPresentationStyle = .Custom
let blackBg:UIView! = UIView()
blackBg.backgroundColor = UIColor.blackColor()
blackBg.alpha = 0.5
blackBg.frame = self.view.bounds
self.view.addSubview(blackBg)
let contentView:UILabel! = UILabel()
contentView.backgroundColor = UIColor.whiteColor()
contentView.frame = CGRectMake(0, 0, UIScreen.mainScreen().bounds.size.width-80, UIScreen.mainScreen().bounds.size.width-80)
contentView.center = self.view.center
contentView.layer.cornerRadius = 8
contentView.layer.masksToBounds = true
contentView.textAlignment = .Center
contentView.text = "Hello 模態(tài)視圖（swift）"
self.view.addSubview(contentView)
}
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
self.dismissViewControllerAnimated(true) {
};
}
}
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.setupUI()
}
func setupUI() {
self.view.backgroundColor = UIColor.yellowColor()
let titleLabel:UILabel! = UILabel.init(frame: CGRectMake(0, 20, UIScreen.mainScreen().bounds.size.width, 40))
titleLabel.textAlignment = .Center
titleLabel.text = "模態(tài)視圖"
self.view.addSubview(titleLabel)
var titles:[String] = ["Vertical","Horizontal","CrossDissolve","PartialCurl"];
for var i in 0...3 {
let modalBtn:UIButton! = UIButton.init(type:.Custom)
modalBtn.bounds = CGRectMake(0, 0, 132, 44)
modalBtn.center = CGPointMake(UIScreen.mainScreen().bounds.size.width*0.5, 150+60*CGFloat(i))
modalBtn.backgroundColor = UIColor.blueColor()
modalBtn.tag = i
modalBtn.setTitle(titles[i], forState: .Normal)
modalBtn.addTarget(self, action: #selector(modalBtnTapped), forControlEvents: .TouchUpInside)
modalBtn.layer.cornerRadius = 8
self.view.addSubview(modalBtn)
}
}
func modalBtnTapped(var btn:UIButton!) {
print(btn.tag)
let vc : PresentViewController = PresentViewController()
vc.modalTransitionStyle = UIModalTransitionStyle(rawValue: btn.tag)!;
vc.modalPresentationStyle = .Custom
if btn.tag == 3 {
vc.modalPresentationStyle = .FullScreen
}
self.presentViewController(vc, animated: true) {
}
}
}
效果swift版本
6.gif
關(guān)鍵點(diǎn)
- 設(shè)置模態(tài)格式：自定義模態(tài)格式
//模態(tài)彈出只有是Custom時(shí)候才有背景透明的效果
vc.modalPresentationStyle= UIModalPresentationCustom;
- 設(shè)置模態(tài)轉(zhuǎn)場動畫
vc.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
模態(tài)轉(zhuǎn)場動畫
typedef NS_ENUM(NSInteger, UIModalTransitionStyle) {
UIModalTransitionStyleCoverVertical = 0,
UIModalTransitionStyleFlipHorizontal __TVOS_PROHIBITED,
UIModalTransitionStyleCrossDissolve,
//這個(gè)是翻頁效果，模態(tài)格式必須是FullScreen,而且背景無法透明
UIModalTransitionStylePartialCurl NS_ENUM_AVAILABLE_IOS(3_2) __TVOS_PROHIBITED,
};
5.gif
背景透明
self.view.backgroundColor = [UIColor clearColor];
//設(shè)置模態(tài)格式：自定義模態(tài)格式,這個(gè)很關(guān)鍵闸盔，不然不透明
self.modalPresentationStyle = UIModalPresentationCustom;
//黑色透明背景
UIView *blackBg = [[UIView alloc]initWithFrame:self.view.bounds];
blackBg.backgroundColor = [UIColor blackColor];
blackBg.alpha = 0.5;
[self.view addSubview:blackBg];
