青春.png
*废话不多说直接看效果(模仿新浪微博)
自定义视图弹窗.gif
-分析我们的效果，点击导航的titleView然后弹出一个自定义视图，里面有个tableView。 其次有个浅灰色的蒙版
-工程结构
Snip20170317_1.png
Pragma mark - NO.1 主界面设置
- (void)viewDidLoad {
[super viewDidLoad];
[self setupNav];
}
-(void)setupNav{
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"navigationbar_friendattention"] style: UIBarButtonItemStylePlain target:self action:nil];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"navigationbar_pop"] style: UIBarButtonItemStylePlain target:self action:nil];
self.titleBtn = [[TitleButton alloc]init];
[self.titleBtn setTitle:@"tmack81" forState:UIControlStateNormal];
[self.titleBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[self.titleBtn addTarget:self action:@selector(titleBtnClick:) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.titleView = self.titleBtn;
}
-以上是最简单主界面导航栏的设置，可以忽略
Pragma mark — NO.2 PopoverViewController设置
#首先创建一个PopoverViewController，继承自UIViewController,创建时给个xib文件，在里面整个tableView就好，其次在里面不需要设置任何东西
在ViewController中，按钮的点击事件
//按钮监听事件
-(void)titleBtnClick:(TitleButton *)titleBtn{
titleBtn.selected = !titleBtn.selected;
//创建弹出控制器
PopoverViewController *popover = [[PopoverViewController alloc]init];
//设置modal样式--因为不设置的话会造成popoverVc弹出的时候，首页和nav或者tabBar全部被移除掉了，而我的popoverVc不是遮住整个屏幕的，所以不能让底部的控制器移除掉了
popover.modalPresentationStyle = UIModalPresentationCustom; //设置成这个就不会移除了
//弹出控制器
[self presentViewController:popover animated:YES completion:nil];
}
Pragma mark — NO.3 关键设置JJPresentViewController
#import <UIKit/UIKit.h>
@interface JJPresentationController : UIPresentationController
/**蒙版View*/
@property (nonatomic , strong) UIView *coverView;
@end
#设置JJPresentationController继承自UIPresentationController，并创建一个蒙版属性
.m文件中进行设置
#import "JJPresentationController.h"
@implementation JJPresentationController
//Modal出来的控制器实际上都是先加到一个容器上的，我们重写这个即将布局容器的子控制器的方法来控制modal出来的控制器的大小
-(void)containerViewWillLayoutSubviews{
[super containerViewWillLayoutSubviews];
//1.拿到被弹出的控制器设置其大小
self.presentedView.frame = CGRectMake(0, 0, 200, 300);
self.presentedView.center = CGPointMake([UIScreen mainScreen].bounds.size.width/2, 55);
//2.设置蒙版
[self setupCoverView];
}
//设置蒙版View
-(void)setupCoverView{
//1.添加蒙版
//如果用addSubview会将我们弹出控制器的view一并遮住了
//把coverView添加到容器view的最底层
self.coverView = [[UIView alloc]init];
[self.containerView insertSubview:self.coverView atIndex:0];
//设置coverView的大小
self.coverView.frame = self.containerView.bounds;
self.coverView.backgroundColor = [UIColor colorWithWhite:0.5 alpha:0.3];
//给coverView添加点击手势
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapClick:)];
[self.coverView addGestureRecognizer:tap];
}
#pragma mark -- 点击手势的监听方法
-(void)tapClick:(UITapGestureRecognizer *)tap{
//直接可以拿到弹出的控制器，然后dismiss就好了
[self.presentedViewController dismissViewControllerAnimated:YES completion:nil];
// NSLog(@"点击蒙版了");
}
Pragma mark — NO.4 回到主界面继续设置
#1.遵守两个协议
@interface ViewController ()<UIViewControllerTransitioningDelegate,UIViewControllerAnimatedTransitioning>
#2.做个属性记录
/**记录是弹出还是消失动画*/
@property (nonatomic , assign) BOOL isPresented;
//默认是消失动画
self.isPresented = NO;
#3.在按钮点击事件中设置转场代理
popover.transitioningDelegate = self;
#4.执行协议方法并设置弹出和消失动画
#pragma mark -- 代理方法
-(UIPresentationController *)presentationControllerForPresentedViewController:(UIViewController *)presented presentingViewController:(UIViewController *)presenting sourceViewController:(UIViewController *)source{
JJPresentationController *presentVc = [[JJPresentationController alloc]initWithPresentedViewController:presented presentingViewController:presenting];
return presentVc;
}
#pragma mark -- 自定义弹出动画
-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{
self.isPresented = YES;
//返回值是转场动画协议，我们直接返回就好
return self;
}
#pragma mark -- 自定义消失动画
-(id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{
self.isPresented = NO;
return self;
}
// MARK:- 自定义弹出动画遵守的协议(报错是因为这个协议里面有必须实现的方法)
#pragma mark -- UIViewControllerAnimatedTransitioning 实现这个协议的代理方法
//返回动画时间
-(NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext{
return 0.8;
}
///transitionContext:转场上下文:可以获得弹出的view和消失的view
-(void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
//三目运算
self.isPresented ? [self animationForPresentedView:transitionContext] : [self animationToPresentedView:transitionContext];
}
#pragma mark -- 自定义弹出动画
-(void)animationForPresentedView:(id<UIViewControllerContextTransitioning>)transitionContext{
//1.获取弹出的view
//UITransitionContextFromViewKey:消失的view
//UITransitionContextToViewKey:弹出的view
UIView *presentedView = [transitionContext viewForKey:UITransitionContextToViewKey];
//2.将弹出的view添加到containerView中
UIView *containerView = [transitionContext containerView];
[containerView addSubview:presentedView];
//3.执行我们自定义的动画--将弹出视图的高度隐藏
presentedView.transform = CGAffineTransformMakeScale(1.0, 0);
//转场动画的时间，我们直接调用第一个动画执行时间的方法，获得的返回值就是那个时间了
[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
//恢复原有大小
presentedView.transform = CGAffineTransformIdentity;
//设置锚点，不然动画不是从上面开始弹出的
presentedView.layer.anchorPoint = CGPointMake(0.5, 0);
} completion:^(BOOL finished) {
//必须告诉转场已经完成了自定义动画
[transitionContext completeTransition:YES];
}];
}
#pragma mark -- 自定义消失动画
-(void)animationToPresentedView:(id<UIViewControllerContextTransitioning>)transitionContext{
//1.获取消失的View
UIView *dismissView = [transitionContext viewForKey:UITransitionContextFromViewKey];
//2.执行动画
[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
//这里不能把y方向缩放，直接置为0,这样的话会直接消失，效果不好
dismissView.transform = CGAffineTransformMakeScale(1.0, 0.000001);
} completion:^(BOOL finished) {
//将消失View从父控件中移除
[dismissView removeFromSuperview];
//告诉其转场动画结束
[transitionContext completeTransition:YES];
}];
}
Pragma mark — NO.5 至此已经能实现这个自定义视图转场了，最后我们对转场的代码进行一个抽取，使主控制器显得不是那么臃肿
#创建一个类PopoverAnimator继承自NSObject
#import <UIKit/UIKit.h>
//遵守协议
@interface PopoverAnimator : NSObject <UIViewControllerTransitioningDelegate,UIViewControllerAnimatedTransitioning>
/**记录是弹出还是消失动画*/
@property (nonatomic , assign) BOOL isPresented ;
#把主控制器里面关于转场的代码全部放过来
#import "PopoverAnimator.h"
#import "JJPresentationController.h"
@implementation PopoverAnimator
#pragma mark -- 代理方法
-(UIPresentationController *)presentationControllerForPresentedViewController:(UIViewController *)presented presentingViewController:(UIViewController *)presenting sourceViewController:(UIViewController *)source{
JJPresentationController *presentVc = [[JJPresentationController alloc]initWithPresentedViewController:presented presentingViewController:presenting];
return presentVc;
}
#pragma mark -- 自定义弹出动画
-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{
self.isPresented = YES;
return self;
}
#pragma mark -- 自定义消失动画
-(id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{
self.isPresented = NO;
return self;
}
#pragma mark -- UIViewControllerAnimatedTransitioning 实现这个协议的代理方法
-(NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext{
return 0.8;
}
///transitionContext:转场上下文:可以获得弹出的view和消失的view
-(void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
//三目运算
self.isPresented ? [self animationForPresentedView:transitionContext] : [self animationToPresentedView:transitionContext];
}
#pragma mark -- 自定义弹出动画
-(void)animationForPresentedView:(id<UIViewControllerContextTransitioning>)transitionContext{
//1.获取弹出的view
//UITransitionContextFromViewKey:消失的view
//UITransitionContextToViewKey:弹出的view
UIView *presentedView = [transitionContext viewForKey:UITransitionContextToViewKey];
//2.将弹出的view添加到containerView中
UIView *containerView = [transitionContext containerView];
[containerView addSubview:presentedView];
//3.执行我们自定义的动画--将弹出视图的高度隐藏
presentedView.transform = CGAffineTransformMakeScale(1.0, 0);
[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
//恢复原有大小
presentedView.transform = CGAffineTransformIdentity;
//设置锚点，不然动画不是从上面开始弹出的
presentedView.layer.anchorPoint = CGPointMake(0.5, 0);
} completion:^(BOOL finished) {
//必须告诉转场已经完成了自定义动画
[transitionContext completeTransition:YES];
}];
}
#pragma mark -- 自定义消失动画
-(void)animationToPresentedView:(id<UIViewControllerContextTransitioning>)transitionContext{
//1.获取消失的View
UIView *dismissView = [transitionContext viewForKey:UITransitionContextFromViewKey];
//2.执行动画
[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
dismissView.transform = CGAffineTransformMakeScale(1.0, 0.000001);
} completion:^(BOOL finished) {
//将消失View从父控件中移除
[dismissView removeFromSuperview];
//告诉其转场动画结束
[transitionContext completeTransition:YES];
}];
}
#回到主界面，只需要设置一下代理就好，其它代码就都删掉吧
self.popoverAnimator = [[PopoverAnimator alloc]init];
popover.transitioningDelegate = self.popoverAnimator;
