由一个自定义分享页面的需求想到的

一个自定义分享页面引发的思考

引言

相信绝大多数人都用过或者正使用着UMeng分享,但是往往UMeng提供的分享样式满足不了我们的需求,例如我们想额外填加一些按钮(复制链接、举报等)。
目前在做的这个项目一开始是使用的UMeng的分享样式,准备上架时由于审核要求,我们需要加一个举报按钮,所以将"分享"按钮改为"更多"按钮,然后需要将举报放在分享的下面一行,并且查看别人的内容的时候需要显示举报,查看自己的内容的时候是不需要显示举报按钮的(谁还需要举报自己啊,哈哈),所以一个页面有两种状态;
同时因为有些平台不支持网页跳转登录,所以我们需要检查用户手机上面是否有安装该平台软件来显示页面,大致效果如下图:

当时需求只有微信、朋友圈、短信三个分享,为了赶进度,十分钟写完,当时的思路是:

  1. 整个页面是个UIView,点击更多的时候进行初始化,然后add到window上面;

  2. 页面最底下放置一个UIView来实现出现和隐藏的时候透明度在0-0.3之间渐变,添加点击手势响应Remove操作;

  3. 下面的主要操作区域放置一个背景颜色为rgb都是240的UIView,根据传入的type计算总高度,中间放置一个颜色为rgb都是224的UILabel做分割线,垂直方向动画移入和移出页面;

  4. 三个分享按钮+举报按钮都使用UIButton,设置图片和标题的EdgeInsets属性为UI所需样式,举报按钮根据传入的type控制;

  5. 布局页面的时候判断手机是否安装有微信,没有的话只显示短信分享;

  6. 使用delegate与调用分享的Controller通信;
    然后适配一下,这样写最直接,但是代码量大,纯代码设置每个按钮的各项属性,还要根据用户是否安装某些软件来配置显示的按钮的坐标,扩展性不强,按钮不多还好,要是随着业务发展加入更多的分享平台,就很坑爹了。

当然有很多人使用的是UIActionSheet+UIScrollView实现,同样的道理,这样实现需要根据按钮是否显示来动态布局页面,需求变更就得重新布局,代码写着不爽。
下面说说我的思路。

正题

前几天群里有个哥们问我怎么在UMeng的界面上面加个复制按钮?显然不太好弄,于是本着负责任的态度,结合我这一年来学到的知识,重新梳理了一遍整个需求:

  1. 每组按钮可能需要组头来放置文字提示;

  2. 每个分享的按钮的图文样式需要方便随时调节;

  3. 根据用户手机是否安装某些平台来控制是否生成/显示某些按钮(所有按钮的坐标需要动态控制);

  4. 可能有两行可能有一行,也可能有很多行(后期可能会有其他需求);

  5. 一组按钮数量过多时,可能需要一行横向滑动显示,也可能需要纵向多行排布;

  6. 需要有显示和隐藏的动画效果;

  7. 最底部可能需要有个取消或者"X"按钮;

前面提到的几种方法,一旦更改需求,比如横向滑动改成纵向排布,代码写起来就会很痛苦,还是那句话,代码写起来要自己觉得爽才行,下面看看这些需求对应的解决方案:

  1. 组头、组尾、可能单行也可能多行的需求,最底部有个取消按钮,一个UITableView就能满足了,header、section、footer,根据dataSource可以非常方便地控制显示什么和显示与否;

  2. 按钮样式的调节和有可能横向排布或纵向排布,使用UICollectionView可以完美解决,UITableView的每一行里面放置一个UICollectionView,UICollectionViewCell就是按钮样式,调节样式改一个地方就行,排布方式setScrollDirection即可;

  3. 根据软件的安装状态来动态控制显示按钮,用到这两个控件,很显然我们只需要控制数据源就好了;
    所以数据源的结构应该是这样的:

由一个自定义分享页面的需求想到的_第1张图片

值得一提的思路

由于目前在重构公司项目,所以文章结尾给出来的Demo中,分享按钮事件没有使用Delegate去操作Controller,而是采用的OC的runtime反射调用,根据方法名反过来构造SEL方法,然后判断传入actionVC是否响应该方法,响应就performSelector执行;
同样的道理,其实model一样可以有个方法属性,但是这样写的话构造数据源所在的类必须声明实现该方法,并且需要引用model文件,本人的想法是简化操作,不要写太多没有必要的代码。
看看代码:

对于Controller的引用

@property (nonatomic, weak) id actionVC;
A.使用Dictionary

1.构造数据源

        NSMutableDictionary *wechatDic = [[NSMutableDictionary alloc]initWithDictionary:@{@"imageName":@"wechat_icon", @"title":@"微信", @"actionName":@"shareToWeChatAction"}];

2.Item点击交互

    NSDictionary *dic = _dataSource[indexPath.row];
    NSString *actionStr = dic[@"actionName"];
    SEL action = NSSelectorFromString(actionStr);
     
    if ([self.actionVC respondsToSelector:action]) {
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"//去除警告
        [self.actionVC performSelector:action withObject:nil];
    }
B.使用model(使用的地方需要引入头文件和实现响应selector构造的方法)

1.构造数据源

        M_Share *wechatModel = [[M_Share alloc]init];
        wechatModel.title = @"微信";
        wechatModel.imageName = @"wechat_icon";
        wechatModel.selector = @selector(shareToWeChatAction);//所在类需要声明/实现该方法
        [sectionOne addObject:wechatModel];
    
        [_dataSource addObject:sectionOne];

2.Item点击交互

    M_Share *shareModel = _dataSource[indexPath.row];
    if ([self.actionVC respondsToSelector:shareModel.selector]) {
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"//去除警告
        [self.actionVC performSelector:shareModel.selector withObject:nil];
    }

值得一提的是,这里从逻辑上来讲没有任何问题,但是系统始终会报一个警告,看了一下前辈们的解决办法是加了一行代码去除leaks警告:

#pragma clang diagnostic ignored "-Warc-performSelector-leaks"

所以顺便了解一一下去除项目中不必要的警告的方法,比如方法的废弃警告,找到项目Target中的Build Phases下的Compile Sources,将里面想要过滤警告的item后面编辑写入-w后保存该文件里面的警告就过滤掉了。

最后

抽时间整理成Demo出来放到github上面了:UMengDiyShareDemo
感谢阅读,希望本文对你有帮助!

本人坐标杭州,后续我会陆续把工作中遇到的问题及解决方案分享出来,互相交流学习,本人QQ:815187811,欢迎结交[笑脸].

你可能感兴趣的:(由一个自定义分享页面的需求想到的)