- GitHub 地址： KNSemiModalViewController
- star:1700+
??????
以下內容來源于官方源碼、 README 文檔、測試 Demo或個人使用總結 ！
UIViewController+KNSemiModal Category
UIViewController+KNSemiModal is an effort to make a replica of semi-modal view with pushed-back stacked animation found in the beautiful Park Guides by National Geographic app. You can see this original semi-modal view below.
This library (ARC) is designed as a Category to UIViewController so you don't have to subclass and you can simply drop in any project and it will just work!
UIViewController+KNSemiModal 可以實現半模態視圖的堆疊效果，使用范疇（Category）實現，代碼侵入性較小。
Original screenshot
Replica (view demo video to see the beautiful animation)*
On iPad
Features
- Works with bare UIViewController
- Works with UIViewController contained inside UINavigationController
- Works with UIViewController contained inside UINavigationController, contained inside UITabbarController
- Auto handling of modal frame size
- Auto handling of touch area for dismissal
- Resizable after presenting so that keyboard related interactions are possible
- Easy to understand and very small code base, only 2 files
- Trivial to implement as subclass
- Landscape support (not during presentation)
- Only use basic CAAnimation
- iPad support (experimental)
- Minimum iOS 5.0 (if you need 4.x support, use older commits before Jan 2013)
Optional parameters
- animation duration
- parent alpha
- optional push-back
- shadow opacity
- disabling the cancel action
- transition style: slide up, fade
Easily extend this to anything you would want to make configurable. Feel free to submit pull requests.
可選參數：
// 結構，相關的配置參數
extern const struct KNSemiModalOptionKeys {
__unsafe_unretained NSString *traverseParentHierarchy; // 遍歷父層次結構，BOOL類型. default is YES.
__unsafe_unretained NSString *pushParentBack; // 推回父視圖，BOOL類型. default is YES.
__unsafe_unretained NSString *animationDuration; // 動畫延時，double 類型, in seconds. default is 0.5.
__unsafe_unretained NSString *parentAlpha; // 父視圖透明度，float 類型.值越小越暗. default is 0.5.
__unsafe_unretained NSString *parentScale; // 父視圖縮放比例，double 類型 default is 0.8
__unsafe_unretained NSString *shadowOpacity; // 陰影不透明度，default is 0.8
__unsafe_unretained NSString *transitionStyle; // 動畫類型，NSNumber 類型
__unsafe_unretained NSString *disableCancel; // 是否禁用取消，BOOL 類型，default is NO.
__unsafe_unretained NSString *backgroundView; // 自定義背景視圖，UIView 類型
} KNSemiModalOptionKeys;
// 動畫類型
NS_ENUM(NSUInteger, KNSemiModalTransitionStyle) {
KNSemiModalTransitionStyleSlideUp, // 向上滑動
KNSemiModalTransitionStyleFadeInOut, // 淡入淡出
KNSemiModalTransitionStyleFadeIn, // 淡入
KNSemiModalTransitionStyleFadeOut, // 淡出
};
// 使用時要根據指定類型封裝
-(void)kn_registerDefaultsAndOptions:(NSDictionary*)options {
[self ym_registerOptions:options defaults:@{
KNSemiModalOptionKeys.traverseParentHierarchy : @(YES),
KNSemiModalOptionKeys.pushParentBack : @(YES),
KNSemiModalOptionKeys.animationDuration : @(0.5),
KNSemiModalOptionKeys.parentAlpha : @(0.5),
KNSemiModalOptionKeys.parentScale : @(0.8),
KNSemiModalOptionKeys.shadowOpacity : @(0.8),
KNSemiModalOptionKeys.transitionStyle : @(KNSemiModalTransitionStyleSlideUp),
KNSemiModalOptionKeys.disableCancel : @(NO),
}];
}
NSDictionary *options = @{
// 遍歷父層次結構，BOOL類型. default is YES.
KNSemiModalOptionKeys.traverseParentHierarchy:@(YES),
// 父視圖后移動畫，BOOL類型. default is YES.
KNSemiModalOptionKeys.pushParentBack:@(NO),
// 動畫延時，double 類型. in seconds. default is 0.5.
KNSemiModalOptionKeys.animationDuration:@(0.25),
// 父視圖透明度，float 類型.值越小越暗. default is 0.5.
KNSemiModalOptionKeys.parentAlpha:@(0.5),
// 父視圖縮放比例，double 類型 default is 0.8
KNSemiModalOptionKeys.parentScale:@(1),
// 陰影不透明度，default is 0.8
KNSemiModalOptionKeys.shadowOpacity:@(0.6),
// 動畫類型，NSNumber 類型
KNSemiModalOptionKeys.transitionStyle: @(KNSemiModalTransitionStyleFadeInOut),
// 是否禁用取消，BOOL 類型，default is NO.
KNSemiModalOptionKeys.disableCancel:@(NO),
// 自定義背景視圖，UIView 類型
KNSemiModalOptionKeys.backgroundView:[UIView new]
};
Installation / How to use
- Copy 4 files in
Sourcefolder to your project - Add
QuartzCore.frameworkto your project -
#import "UIViewController+KNSemiModal.h"in your ViewController - Call
[self presentSemiModalView:myView] - Call
[self dismissSemiModalView]either from parent/presenting or child/presented controller
使用
官方 Demo1
顯示視圖
- (IBAction)buttonDidTouch:(id)sender {
// 你可以呈現一個簡單的 UIImageView 或任何其他的 UIView ，而且不需要關心關閉方法
UIImageView * imagev = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"temp.jpg"]];
UIImageView * bgimgv = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"background_01"]];
[self presentSemiView:imagev
withOptions:@{
KNSemiModalOptionKeys.backgroundView:bgimgv
}];
}
官方 Demo2：
顯示大小可以改變的視圖
部分代碼：
@implementation KNSecondViewController
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
self.title = @"Second";
self.tabBarItem.image = [UIImage imageNamed:@"second"];
// 請注意，你需要擁有正在呈現的ViewController的所有權
semiVC = [[KNThirdViewController alloc] initWithNibName:@"KNThirdViewController" bundle:nil];
// 您可以選擇收聽通知
// 視圖顯示完成后
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(semiModalPresented:)
name:kSemiModalDidShowNotification
object:nil];
// 視圖隱藏后
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(semiModalDismissed:)
name:kSemiModalDidHideNotification
object:nil];
// 視圖被重新調整大小后
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(semiModalResized:)
name:kSemiModalWasResizedNotification
object:nil];
}
return self;
}
#pragma mark - Demo
- (IBAction)buttonDidTouch:(id)sender {
// You can also present a UIViewController with complex views in it
// and optionally containing an explicit dismiss button for semi modal
[self presentSemiViewController:semiVC withOptions:@{
KNSemiModalOptionKeys.pushParentBack : @(YES),
KNSemiModalOptionKeys.animationDuration : @(2.0),
KNSemiModalOptionKeys.shadowOpacity : @(0.3),
}];
}
#pragma mark - Optional notifications
- (void) semiModalResized:(NSNotification *) notification {
if(notification.object == self){
NSLog(@"The view controller presented was been resized");
}
}
- (void)semiModalPresented:(NSNotification *) notification {
if (notification.object == self) {
NSLog(@"This view controller just shown a view with semi modal annimation");
}
}
- (void)semiModalDismissed:(NSNotification *) notification {
if (notification.object == self) {
NSLog(@"A view controller was dismissed with semi modal annimation");
}
}
-(void)dealloc {
[[NSNotificationCenter defaultCenter] removeObserver:self];
}
被呈現視圖控制器中的動作方法
// 關閉視圖
- (IBAction)dismissButtonDidTouch:(id)sender {
// 調用父控件ViewController 以關閉視圖
// 視圖層次結構要小心
UIViewController * parent = [self.view containingViewController];
if ([parent respondsToSelector:@selector(dismissSemiModalView)]) {
[parent dismissSemiModalView];
}
}
// 重新設置大小
- (IBAction)resizeSemiModalView:(id)sender {
UIViewController * parent = [self.view containingViewController];
if ([parent respondsToSelector:@selector(resizeSemiView:)]) {
[parent resizeSemiView:CGSizeMake(320, arc4random() % 280 + 180)];
}
}
官方 Demo3：
顯示 tableView 列表：
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
[tableView deselectRowAtIndexPath:indexPath animated:NO];
// You have to retain the ownership of ViewController that you are presenting
// ??必須要保留被呈現視圖控制器的擁有權
// ??就是說被呈現的視圖控制器要設置成它的屬性或者實例對象
[self presentSemiViewController:modalVC
withOptions:@{
KNSemiModalOptionKeys.pushParentBack : @(NO),
KNSemiModalOptionKeys.parentAlpha : @(0.8)
}];
// 以下的代碼是無效的
// KNModalTableViewController * vc = [[KNModalTableViewController alloc] initWithStyle:UITableViewStylePlain];
// [self presentSemiViewController:vc];
}
TableView 的 frame 屬性在其指定初始化方法中設置：
- (id)initWithStyle:(UITableViewStyle)style {
self = [super initWithStyle:style];
if (self) {
// 設置 frame
self.view.frame = CGRectMake(0, 0, 320, 200);
}
return self;
}
以模態方式顯示一張圖片
實現代碼：
- (IBAction)buttonDidClicked:(id)sender {
// 加載圖片方式一，有緩存
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"boat"]];
// 加載圖片方式二，無緩存
// NSString *path = [[NSBundle mainBundle] pathForResource:@"boat" ofType:@"png"];
// UIImage *fileImage = [UIImage imageWithContentsOfFile:path];
NSDictionary *options = @{
// 父視圖后移動畫，BOOL類型. default is YES.
KNSemiModalOptionKeys.pushParentBack: @(NO),
// 動畫延時，double 類型. in seconds. default is 0.5.
KNSemiModalOptionKeys.animationDuration: @(0.25),
// 父視圖透明度，float 類型.值越小越暗. default is 0.5.
KNSemiModalOptionKeys.parentAlpha: @(0.5),
// 父視圖縮放比例，double 類型 default is 0.8
KNSemiModalOptionKeys.parentScale: @(1),
// 陰影不透明度，default is 0.8
KNSemiModalOptionKeys.shadowOpacity: @(0.6),
// 動畫類型，NSNumber 類型
KNSemiModalOptionKeys.transitionStyle: @(KNSemiModalTransitionStyleFadeInOut),
// 是否禁用取消，BOOL 類型，default is NO.
KNSemiModalOptionKeys.disableCancel: @(NO),
};
[self presentSemiView:imageView withOptions:options completion:^{
NSLog(@"completion!");
}];
}
