高仿网易新闻频道选择器

栏目: IOS · 发布时间: 5年前

内容简介:前段时间公司做一个新闻类的项目,需要支持频道编辑,缓存等功能,界面效果逻辑就按照最新版的网易新闻来,网上没找到类似的轮子,二话不说直接开撸,为了做到和网易效果一模一样还是遇到不少坑和细节,这在此分享出来,自己做个记录,大家觉得有用的话也可以参考。支持手动集成或者cocoapods集成。其实基本就和网易一毛一样了啦,只是为了更加直观还是贴出两张图片

前段时间公司做一个新闻类的项目,需要支持频道编辑,缓存等功能,界面效果逻辑就按照最新版的网易新闻来,网上没找到类似的轮子,二话不说直接开撸,为了做到和网易效果一模一样还是遇到不少坑和细节,这在此分享出来,自己做个记录,大家觉得有用的话也可以参考。支持手动集成或者cocoapods集成。

项目地址

github.com/yd2008/YDCh…

最终效果

其实基本就和网易一毛一样了啦,只是为了更加直观还是贴出两张图片

高仿网易新闻频道选择器 高仿网易新闻频道选择器

调起方式

因为要弹出一个占据全屏的控件,7.0之前可能是加在window上,但是后面苹果不建议这么做,所以还是直接present一个控制器出来是最优的选择。

public class YDChannelSelector: UIViewController
复制代码

创建

非常简单,遵守数据源协议和代理协议

class ViewController: UIViewController, YDChannelSelectorDataSource, YDChannelSelectorDelegate

 // 数据源 因为至少有当前栏目和可添加栏目,所以是二维数组
 var selectorDataSource: [[SelectorItem]]? {
    didSet {
        // 网络异步获取成功时赋值即可
         channelSelector.dataSource = selectorDataSource
    }
 }
 
 // 频道选择控制器
 private lazy var channelSelector: YDChannelSelector = {
     let sv = YDChannelSelector()
     sv.delegate = self
     // 是否支持本地缓存用户功能
     // sv.isCacheLastest = false
     return sv
 }()
复制代码

基于接口傻瓜的原则,呼出窗口最简单的方法就是系统自带的present方法就ok。

present(channelSelector, animated: true, completion: nil)
复制代码

传递数据

作为一个频道选择器,它需要知道哪些关键信息呢?

  • 频道名字
  • 频道是否是固定栏目
  • 频道自己的原始数据

基于以上需求,我设计了频道结构体

public struct SelectorItem {
    /// 频道名称
    public var channelTitle: String!
    /// 是否是固定栏目
    public var isFixation: Bool!
    /// 频道对应初始字典或模型
    public var rawData: Any?
    public init(channelTitle: String, isFixation: Bool = false, rawData: Any?) {
        self.channelTitle = channelTitle
        self.isFixation = isFixation
        self.rawData = rawData
    }
}
复制代码

实现数据源代理里的数据接口

public protocol YDChannelSelectorDataSource: class {
    /// selector 数据源
    var selectorDataSource: [[SelectorItem]]? { get }
}
复制代码

代理

用户做了各种操作后如何通知控制器当前状态

public protocol YDChannelSelectorDelegate: class {
    /// 数据源发生变化
    func selector(_ selector: YDChannelSelector, didChangeDS newDataSource: [[SelectorItem]])
    /// 点击了关闭按钮
    func selector(_ selector: YDChannelSelector, dismiss newDataSource: [[SelectorItem]])
    /// 点击了某个频道
    func selector(_ selector: YDChannelSelector, didSelectChannel channelItem: SelectorItem)
}
复制代码

核心思路

如果你只是打算直接用的话那下面已经不用看了,因为以下是记录初版功能实现的核心思路以及难点介绍,如果感兴趣想自己扩展功能或者自定义的话可以看看。

写在前面: ios9以后苹果又添加了很多强大的api,所以本插件主要基于几个新api实现,整个逻辑还是很清晰明了。主要是很多细节比较恶心,后期调试了很久。

控件选择一眼就能看出 UICollectionView

private lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.minimumLineSpacing = itemMargin
        layout.minimumInteritemSpacing = itemMargin
        layout.itemSize = CGSize(width: itemW, height: itemH)
        let cv = UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
        cv.contentInset = UIEdgeInsets.init(top: 0, left: itemMargin, bottom: 0, right: itemMargin)
        cv.backgroundColor = UIColor.white
        cv.showsVerticalScrollIndicator = false
        cv.delegate = self
        cv.dataSource = self
        cv.register(YDChannelSelectorCell.self, forCellWithReuseIdentifier: YDChannelSelectorCellID)
        cv.register(YDChannelSelectorHeader.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: YDChannelSelectorHeaderID)
        cv.addGestureRecognizer(longPressGes)
        return cv
}()
复制代码

最近删除 & 用户操作缓存

基于网易的逻辑,在操作时会出现一个新的section叫最近删除,dismiss时把最近删除的频道下移到我的栏目,思路就是在 viewWillApperar 时操纵数据源,添加最近删除section,在 viewDidDisappear 时整理用户操作,移除最近删除section,与此同时进行用户操作的缓存和读取,具体实现代码如下:

public override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        // 根据需求处理数据源
        if isCacheLastest && UserDefaults.standard.value(forKey: operatedDS) != nil { // 需要缓存之前数据 且用户操作有存储
            // 缓存原始数据源
            if isCacheLastest { cacheDataSource(dataSource: dataSource!, isOrigin: true) }
            var bool = false
            let newTitlesArrs = dataSource!.map { $0.map { $0.channelTitle! } }
            let orginTitlesArrs = UserDefaults.standard.value(forKey: originDS) as? [[String]]
            // 之前有存过原始数据源
            if orginTitlesArrs != nil { bool = newTitlesArrs == orginTitlesArrs! }
            if bool { // 和之前数据相等 -> 返回缓存数据源
                let cacheTitleArrs = UserDefaults.standard.value(forKey: operatedDS) as? [[String]]
                let flatArr = dataSource!.flatMap { $0 }
                var cachedDataSource = cacheTitleArrs!.map { $0.map { SelectorItem(channelTitle: $0, rawData: nil) }}
                for (i,items) in cachedDataSource.enumerated() {
                    for (j,item) in items.enumerated() {
                        for originItem in flatArr {
                            if originItem.channelTitle == item.channelTitle {
                                cachedDataSource[i][j] = originItem
                            }
                        }
                    }
                }
                dataSource = cachedDataSource
            } else {  // 和之前数据不等 -> 返回新数据源(不处理)
                
            }
        }
        
        // 预处理数据源
        var dataSource_t = dataSource
        dataSource_t?.insert(latelyDeleteChannels, at: 1)
        dataSource = dataSource_t
        collectionView.reloadData()
    }
    
    public override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        
        // 移除界面后的一些操作
        dataSource![2] = dataSource![1] + dataSource![2]
        dataSource?.remove(at: 1)
        latelyDeleteChannels.removeAll()
    }
复制代码

用户操作相关

移动主要依赖9.0新增的InteractiveMovement系列接口,通过给collectionView添加长按手势并监听拖动的location实现item拖动效果:

@objc private func handleLongGesture(ges: UILongPressGestureRecognizer) {
    guard isEdit == true else { return }
    switch(ges.state) {
    case .began:
        guard let selectedIndexPath = collectionView.indexPathForItem(at: ges.location(in: collectionView)) else { break }
        collectionView.beginInteractiveMovementForItem(at: selectedIndexPath)
    case .changed:
        collectionView.updateInteractiveMovementTargetPosition(ges.location(in: ges.view!))
    case .ended:
        collectionView.endInteractiveMovement()
    default:
        collectionView.cancelInteractiveMovement()
    }
}
复制代码

这里有个小坑就是cell自己的长按手势会和collectionView的长按手势冲突,需要在创建cell的时候做冲突解决:

public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    ......
    // 手势冲突解决
    longPressGes.require(toFail: cell.longPressGes)
    ......
}
复制代码

仔细观察发现网易的有个细节,就是点击item的时候要先闪烁一下在进入编辑状态,但是触碰事件会被collectionView拦截,所以要先自定义collectionView,重写 func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? 做下转换和提前处理:

fileprivate class HitTestView: UIView {
    
    open var collectionView: UICollectionView!
    
    /// 拦截系统触碰事件
    public override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        if let indexPath = collectionView.indexPathForItem(at: convert(point, to: collectionView)) { // 在某个cell上
            let cell = collectionView.cellForItem(at: indexPath) as! YDChannelSelectorCell
            cell.touchAnimate()
        }
        return super.hitTest(point, with: event)
    }
}

复制代码

在编辑模式频道不能拖到更多栏目里面,需要还原编辑动作,苹果提供了现成接口,我们只需要实现相应逻辑即可:

/// 这个方法里面控制需要移动和最后移动到的IndexPath(开始移动时)
/// - Returns: 当前期望移动到的位置
public func collectionView(_ collectionView: UICollectionView, targetIndexPathForMoveFromItemAt originalIndexPath: IndexPath, toProposedIndexPath proposedIndexPath: IndexPath) -> IndexPath {
    let item = dataSource![proposedIndexPath.section][proposedIndexPath.row]
    if proposedIndexPath.section > 0 || item.isFixation { // 不是我的栏目 或者是固定栏目
        return originalIndexPath
    } else {
        return proposedIndexPath
    }
}
复制代码

用户操作后的数据源处理

用户操作完后对数据源要操作方法是 func handleDataSource(sourceIndexPath: IndexPath, destinationIndexPath: IndexPath) , 调用时间有两个,一是拖动编辑后调用,二就是点击事件调用,为了数据源越界统一在此处理:

private func handleDataSource(sourceIndexPath: IndexPath, destinationIndexPath: IndexPath) {
    let sourceStr = dataSource![sourceIndexPath.section][sourceIndexPath.row]
    if sourceIndexPath.section == 0 && destinationIndexPath.section == 1 { // 我的栏目 -> 最近删除
        latelyDeleteChannels.append(sourceStr)
    }
    
    if sourceIndexPath.section == 1 && destinationIndexPath.section == 0 && !latelyDeleteChannels.isEmpty { // 最近删除 -> 我的栏目
        latelyDeleteChannels.remove(at: sourceIndexPath.row)
    }
    
    dataSource![sourceIndexPath.section].remove(at: sourceIndexPath.row)
    dataSource![destinationIndexPath.section].insert(sourceStr, at: destinationIndexPath.row)
    
    // 通知代理
    delegate?.selector(self, didChangeDS: dataSource!)
    // 存储用户操作
    cacheDataSource(dataSource: dataSource!)
}
复制代码

以上所述就是小编给大家介绍的《高仿网易新闻频道选择器》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

HTML5秘籍(第2版)

HTML5秘籍(第2版)

[美] Matthew MacDonald / 李松峰、朱巍、刘帅 / 人民邮电出版社 / 2015-4 / 89.00元

不依赖插件添加音频和视频,构建适用于所有浏览器的播放页面。 用Canvas创建吸引人的视觉效果,绘制图形、图像、文本,播放动画,运行交互游戏。 用CSS3将页面变活泼,比如添加新奇的字体,利用变换和动画添加吸引人的效果。 设计更出色的Web表单,利用HTML5新增的表单元素更加高效地收集访客信息。 一次开发,多平台运行,实现响应式设计,创建适配桌面计算机、平板电脑和智能手机......一起来看看 《HTML5秘籍(第2版)》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具