下文所述均是在继承 SLComposeServiceViewController
的基础上的不漂亮做法,对于无法满足更多要求时,请使用 UIViewController
或者 NSViewController
来实现
Evernote 无论是桌面还是移动客户端都以设计新颖,用户体验良好成为设计者们借鉴的标杆。iOS8 带来的Share Extension
更是提高了 Evernote 的易用性,以前需要在桌面浏览器 Clip 保存的功能在 iPhone、iPad 上也能用了。
在众多开发者给自己应用定制 Share Extension
的时候,自然得看看 Evernote 是怎么把体验做得很好的。我在给公司应用定制时也首先想到了 Evernote。
![](http://sannma.com/content/images/2014/11/1.jpg)
最吸引开发者的应该是最底下带有 icon 的 TableViewCell。我们都知道配置下面的TableView需要在函数 - (NSArray *)configurationItems
中配置。
- (NSArray *)configurationItems {
SLComposeSheetConfigurationItem *accountItem = [[SLComposeSheetConfigurationItem alloc] init];
accountItem.title = @"account";
SLComposeSheetConfigurationItem *groupItem = [[SLComposeSheetConfigurationItem alloc] init];
groupItem.title = @"group";
return @[accountItem, groupItem];
}
但是配置中并没有配置 icon 的参数。当然首先想到的是 Evernote 自定义了SLComposeSheetConfigurationItem
和SLComposeServiceViewController
,但翻遍了文档和Google都没有找到相应的资料。找寻解决办法失败后想着以其花时间也可能找不到解决,还不如试试 Hacking 的方式。经过几天摸索,终于模仿得挺像了。
![](http://sannma.com/content/images/2014/11/cut-1.png)
添加icon
既然没法配置 icon,那就在 viewDidLoad
或者 viewDidAppear
中手动添加 icon,然后将 SLComposeSheetConfigurationItem
的 title
置空。ViewController 跳转的时候控制它们隐藏显示。
PS: viewDidAppear
也只会触发一次
self.view
icon 用 self.view
添加自然可以,但是 ConfigureItem
一多,键盘切换时就会发生错位了。
这是为什么呢?
我们在 Extension 呈现后设置断点,打印出当前 ViewController 的层级。 原来在
SLComposeServiceViewController
中的 self.view
并不是我们看到的 Extension 所显示的 view, 打印self.view.frame
得出的大小也不符。仔细查看 view 层级后,使用
UIView *containerView = [self.view subviews][0];
[containerView addSubView:icon];
可以将 icon 挂到显示的 view 上。而Evernote是选择将显示的 view 往上提了一段距离来避免在小屏幕上碰到此问题。至此解决了 icon 显示的问题。
NavigationItem.titleView
在你想用通常的方法,用 UIImageView
替换 NavigationItem.titleView
时,发现不起作用。那是因为当前的 SLSheetNaviagtionController
与 UINavigationController
不一样,设置后也没效果。
那怎么办呢?
还是像之前我们在模拟 TableViewCell 时一样,自己添加 icon 吧。
self.logoImage = [[UIImageView alloc] initWithFrame:CGRectMake(150, 10, 56, 22)];
self.logoImage.image = [UIImage imageNamed:@"navi_lobi_logo"];
[containerView addSubview:self.logoImage];
自动改变ViewController的高度
使用Evernote时观察到,在选择 notebook 页面,当 notebook 很多时,会自动增加 ViewController 的高度,使之适应整个屏幕。 这是怎么实现的?
只需在 pushConfigurationViewController
之前设置 vc 的 preferredContentSize
就行。
groupItem.tapHandler = ^(void) {
GroupTableViewController *groupVC = [[GroupTableViewController alloc] init];
groupVC.preferredContentSize = CGSizeMake(self.navigationController.navigationBar.frame.size.width, [groupVC needsContentHeight]);
[_self pushConfigurationViewController:groupVC];
};
Evernote的实现方式
在几天研究后,观察到一个细节。在上面的 ViewController 的层级图里,作为呈现的 view 其实是被包到一个 TableView 里了。既然是 TableView, 那肯定可以上下拖动了。 但是 Evernote 的 Extension 是无法拖动的。所以我怀疑 Evernote 也是采用我这种 Hacking 方式,因为你一拖动,手动添加的 icon 又会错位了,所以只能把 TableView 的 scroll 禁止了。
- (void)disableScrollInSubviews:(UIView*)av {
for (UIView *v in [av subviews]) {
if ([v isKindOfClass:[UIScrollView class]]) {
UIScrollView *sView = (UIScrollView*)v;
sView.scrollEnabled = NO;
return;
}
else {
[self disableScrollInSubviews:v];
}
}
}
Preview
SLComposeServiceViewController
里有个很重要的方法 - (UIView *)loadPreviewView;
。 preview
的行为比较诡异,没有细致研究,待补充。。。
虽然实现方式没怎么高大上,算是暂时能用。如果你有更好的方式,或者本文里有什么错误,欢迎留言指出。