Evernote样式的Share Extension

最新推荐文章于 2020-05-06 18:17:50 发布

转载最新推荐文章于 2020-05-06 18:17:50 发布 · 1k 阅读

文章标签：

#Evernote #shareExtension #SLComposeServiceView

ios Extension 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在iOS应用中实现类似Evernote的Share Extension功能，包括自定义配置项图标、调整导航栏样式及自动调整视图控制器高度等技巧。

下文所述均是在继承 SLComposeServiceViewController 的基础上的不漂亮做法，对于无法满足更多要求时，请使用 UIViewController 或者 NSViewController 来实现

Evernote 无论是桌面还是移动客户端都以设计新颖，用户体验良好成为设计者们借鉴的标杆。iOS8 带来的Share Extension更是提高了 Evernote 的易用性，以前需要在桌面浏览器 Clip 保存的功能在 iPhone、iPad 上也能用了。

在众多开发者给自己应用定制 Share Extension 的时候，自然得看看 Evernote 是怎么把体验做得很好的。我在给公司应用定制时也首先想到了 Evernote。

最吸引开发者的应该是最底下带有 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 的方式。经过几天摸索，终于模仿得挺像了。

添加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];
        }
    }
}