News Digest(雅虎新闻)模仿秀第二弹

最近得空做了一个小的新闻类APP,基本上都是照着News Digest的模子刻出来的,之所以这个为参考,是因为觉得News Digest这个APP做得真的很酷炫!


猛戳这里获取整个项目源代码
项目前端主要由swift编写,本地数据用CoreData,后端由Node.js编写,后台数据库用MongoDB。

News Digest(雅虎新闻)模仿秀第一弹
News Digest(雅虎新闻)模仿秀第三弹
News Digest(雅虎新闻)模仿秀第四弹

今天我们主要实现效果是这两张图的效果


点击具体新闻查看
左右切换新闻
  1. UICollectionView
    从首页点击一个UITableViewCell之后,跳转到一个新的ViewController(在项目里面是NewsViewController),然后传入一个数组newsArray(UICollectionViewCell个数),以及传入一个indexPath.row(用于直接跳进第N个Cell)
    //MARK: - Life Circle
    override func viewDidLoad() {
        super.viewDidLoad()
        // Register Nib
        self.newsCV.registerNib(UINib.init(nibName: "NewsCollectionViewCell", bundle: NSBundle.mainBundle()), forCellWithReuseIdentifier: "DetailNews")
        
        // Add Current Row
        self.scanArray.append(self.currentRow!.row)
    }

    override func viewDidLayoutSubviews() {
        self.view.layoutIfNeeded()
        self.newsCV.scrollToItemAtIndexPath(self.currentRow!, atScrollPosition: .CenteredHorizontally, animated: false)
    }

self.scanArray,存储已经阅读过的cell的indexPath.row,用于闭包回调执行动画
viewDidLayoutSubviews是布局完成之后,即将执行viewWillAppear方法,在这里我们需要直接滚动到第N个Cell,如果把scrollToItemAtIndexPath方法放到viewWillAppear或者放到viewDidAppear都会有一段动画执行,不但会影响视觉效果,而且会导致self.scanArray记录偏差(因为直接从第一个滚到第N个,意思说前N个的新闻都看了,其实用户并没有看,这里self.scanArray的添加是某一个Cell出现之后就添加进去)
移动的时候旁边的黑边,是因为在StoryBoard里面设置了sectionInsects左右都是2.5,然后设置Cell的size

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        return CGSizeMake(collectionView.bounds.width - 5, collectionView.bounds.height)
    }
  1. UITableView浏览新闻,上下移动
    每一个UICollectionViewCell嵌套一个UITableView用于显示新闻。
    着了UITableView有两个Cell,一个是标签+UIScrollView,一个就直接是一个UILabel(显示标题和内容)


    第一个Cell

    第二个Cell

    第二个Cell就是直接计算文字高度,改变Cell的高度即可
    第一个Cell的UIScrollView添加一个填满的UIImageView,然后根据下拉的offset.y改变scrollView的origin.y以及zoomScale即可.

        // ImageView Setting
        contentImageView.clipsToBounds = true
        contentImageView.contentMode = .ScaleAspectFill
        contentImageView.autoresizingMask = .FlexibleHeight
    //MARK: - UIScrollViewDelegate
    func scrollViewDidScroll(scrollView: UIScrollView) {
        // 如果是Cell里面的scrollView直接跳过
        guard scrollView.tag != ScrollViewTag else {
            return
        }
        // 防止第一个Cell不在visiableCells数组引发的crash
        guard let cell = self.detailNewsTV.cellForRowAtIndexPath(NSIndexPath.init(forRow: 0, inSection: 0)) as? DetailTopTableViewCell else {
            return
        }
        let imageScrollView = cell.viewWithTag(ScrollViewTag) as! UIScrollView
        var frame = imageScrollView.frame
        frame.size.height = max(self.imageHeaderHeight - scrollView.contentOffset.y, 0)
        frame.origin.y = scrollView.contentOffset.y
        imageScrollView.frame = frame
        imageScrollView.zoomScale = abs(min(scrollView.contentOffset.y, 0)/WIDTH) + 1
    }
    
    func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
        return scrollView.viewWithTag(ImageViewTag)
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容