美文网首页iOS实战iOS 控件定制iOS学习
类似“今日头条”频道编辑功能UI实现

类似“今日头条”频道编辑功能UI实现

作者: Fight_ing | 来源:发表于2017-03-24 18:05 被阅读163次
    favimg

    FMChannelEdit

    这是一个类似“今日头条”频道编辑功能

    前言

    • 站在巨人的肩膀上编程:这个项目的channel编辑页面是在两位前辈代码的基础上,进一步的修改,封装。
      前辈一:codeWorm2015(GitHubID)
      源码地址
      前辈二:HelloYeah(GitHubID)
      源码地址

    PS:这两位具体是谁,我也不认识,想和他们具体交流的,请去GitHub上给他们留言,我这能帮你们到这了。

    进入正题 (以下均为个人见解,理解不对还望见谅)

    • 之所以用着两位前辈的代码,是因为,虽然实现是同一UI效果,但是思路不同,下面一一讲解

    方式一:(对应前辈一的实现思路)

    • 思路:完全自定义。自定义channelView(项目中名称:TouchView)继承于UIView,绑定需要的label,imageView,pan,tap,longPress手势,在对应的手势实现中计算出每个channel的index,然后刷新frame(具体实现请参考代码)

    • 优点:自定义程度高,自定义功能的添加修改比较方便,尤其动画比较流畅;

    • 缺点:要同时处理四个数组的数据(两个数据源的,两个视图的),frame刷新频率较高,且都是自己实现的frame刷新,性能可能不如原生的控件(只是可能)

    • 我的完善:原框架功能已经比较完善,只是缺少个下滑移除功能(已添加)

    GIF效果图:


    ChannelDemo1.gif

    方式二:(对应前辈二的实现思路)

    • 思路:在UICollectionView的基础上进一步的修改封装。(具体实现请参考代码)

    • 优点:只需要处理两个数据源就可以(上部&下部),视图由UICollectionView自己处理,包括动画效果也是系统自己完成;

    • 缺点:基于UICollectionView,功能的拓展受到一定的限制,动画不如方式一看这舒服。

    • 我的完善:原框架功能较少(相对于今日头条的channel编辑效果),只有上部分的排序和删除。(下部及其他功能已添加)

    GIF效果图:

    ChannelDemo2.gif

    其他功能

    • 标题内容对应滑动,滑动后标题居中
    • 标题随滑动,字体大小变化
    • 子视图内,有颜色渐变小Demo

    GIF效果图:


    ChannelDemo3.gif
    • QQ Popover弹框效果
      GIF效果图:
    ChannelDemo4.gif
    ChannelDemo5.gif

    Demo下载

    如果对您有帮助,您的星星将是对我最大的鼓励,谢谢!

    相关文章

      网友评论

      本文标题:类似“今日头条”频道编辑功能UI实现

      本文链接:https://www.haomeiwen.com/subject/plvfottx.html