模态视图控制器使用经验
2016-07-07 本文已影响1100人
木头与琉璃
iOS开发中经常会用到模态弹框。我的经验是用模态弹出视图控制器，然后在控制器上自定义弹框的展示形式
我会先提出需求，然后通过代码给出解决方案,最后解释原理。
提出需求
点击自下而上按钮弹出模态视图，点击渐隐渐现按钮弹出模态视图
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];
}
//模态视图控制器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 模态视图";
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];
}
//确认按钮点击
- (void)sureBtnTapped{
[self dismissViewControllerAnimated:YES completion:nil];
}
//屏幕点击
- (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];
//渐隐渐现按钮
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:@"渐隐渐现" forState:UIControlStateNormal];
[self.alphaBtn addTarget:self action:@selector(alphaBtnBtnTapped) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:self.alphaBtn];
}
- (void)downToUpBtnTapped{
PresentViewController *vc = [[PresentViewController alloc]init];
//设置模态格式：自定义模态格式
vc.modalPresentationStyle= UIModalPresentationCustom;
//设置转场动画
vc.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
[self presentViewController:vc animated:YES completion:nil];
}
- (void)alphaBtnBtnTapped{
PresentViewController *vc = [[PresentViewController alloc]init];
//设置模态格式：自定义模态格式
vc.modalPresentationStyle= UIModalPresentationCustom;
//设置转场动画
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];
//设置根控制器
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 模态视图（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 = "模态视图"
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
关键点
- 设置模态格式：自定义模态格式
//模态弹出只有是Custom时候才有背景透明的效果
vc.modalPresentationStyle= UIModalPresentationCustom;
- 设置模态转场动画
vc.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
模态转场动画
typedef NS_ENUM(NSInteger, UIModalTransitionStyle) {
UIModalTransitionStyleCoverVertical = 0,
UIModalTransitionStyleFlipHorizontal __TVOS_PROHIBITED,
UIModalTransitionStyleCrossDissolve,
//这个是翻页效果，模态格式必须是FullScreen,而且背景无法透明
UIModalTransitionStylePartialCurl NS_ENUM_AVAILABLE_IOS(3_2) __TVOS_PROHIBITED,
};
5.gif
背景透明
self.view.backgroundColor = [UIColor clearColor];
//设置模态格式：自定义模态格式,这个很关键，不然不透明
self.modalPresentationStyle = UIModalPresentationCustom;
//黑色透明背景
UIView *blackBg = [[UIView alloc]initWithFrame:self.view.bounds];
blackBg.backgroundColor = [UIColor blackColor];
blackBg.alpha = 0.5;
[self.view addSubview:blackBg];
