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

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

---

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

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

先上几张效果图让大家看一下：

点击APP进入界面

点击具体新闻查看

左右切换新闻

点击右上角按钮倒计时以及选择五天内新闻

---

今天先讲首页部分的实现吧

1. UITableView
   整个首页其实就是一个UITableView，有三种类型的Cell

   
   
   

   三个Cell
   
   

   MainTopTableViewCell是顶部这个Cell
   MainTableViewCell是中间的Cell
   MainBottomTableViewCell是底部那个Cell(显示已阅那个)
   剩下两个cell.xib是MainBottomTableViewCell里面的，因为里面有一个UICollectionView.

2. MainTopTableViewCell

   
   
   

   首页
   
   

   时间是固定在Cell上面，最外层那个Button是固定在ViewController上面的，其实就是底层一张图片，图片上面再放一个图片(也就是那个梯形)
   现在说说下拉放大图片并且文字不随着图片下拉的效果

    //MARK: - UIScrollViewDelegate
    func scrollViewDidScroll(scrollView: UIScrollView) {
        let offset_y = scrollView.contentOffset.y;
        
        // contentOffset.y < 0
        guard let cell = self.mainTV.cellForRowAtIndexPath(NSIndexPath.init(forRow: 0, inSection: 0)) as? MainTopTableViewCell else {
            // MainTopTableViewCell 已经不在visiableCells数组
        
            let distance = self.topCellHeight - self.markFirstCellHeight
            if offset_y > distance {
                if self.lastOffset > offset_y {
                    self.menuButton.hidden = false
                }
                else{
                    self.menuButton.hidden = true
                }
            }
            else {
                self.menuButton.hidden = false
            }
            
            self.lastOffset = offset_y
            return
        }
        if offset_y < 0 {
            // BackgroundImage
            var imageRect = cell.backgroundImage.frame
            imageRect.origin.y = offset_y
            imageRect.size.height = self.topCellHeight - offset_y
            cell.backgroundImage.frame = imageRect
            // Date And Time
            var dateRect = cell.currentDate.frame
            var timeRect = cell.currentTime.frame
            dateRect.origin.y = offset_y + 12
            timeRect.origin.y = offset_y + 49
            cell.currentDate.frame = dateRect
            cell.currentTime.frame = timeRect
        }
        else {
            // 恢复到原始状态
            cell.backgroundImage.frame = CGRectMake(0, 0, WIDTH, self.topCellHeight)
            cell.currentDate.frame = CGRectMake(12, 12, 110, 29)
            cell.currentTime.frame = CGRectMake(12, 49, 110, 21)
            // Mark Height
            self.markFirstCellHeight = cell.heightConstraint.constant
        }
        
        // 是否隐藏菜单按钮
        let distance = self.topCellHeight - self.markFirstCellHeight
        if offset_y > distance {
            if self.lastOffset > offset_y {
                self.menuButton.hidden = false
            }
            else{
                self.menuButton.hidden = true
            }
        }
        else {
            self.menuButton.hidden = false
        }
        self.lastOffset = offset_y
    }

这里guard条件先判断MainTopCell在不在当前屏幕内，不在的话，直接判断需要不需要隐藏右上角按钮即可
如果在的话，offset_y<0的时候，也就是在最顶部下拉的时候，计算下拉数值，然后重新赋值给顶部时间，也就是把控件的origin.y 改成下拉了多少，就能保持顶部时间不动。图片放大的话，也只是修改图片origin.y，因为图片的模式设成了AspectFill，所以当origin.y改变的时候，图片也会相应放大

3. MainBottomTableViewCell
   这里其实就是一个UICollectionView，通过CircleLayout重新排列UICollectionView的出现位置就好

    override func prepareLayout() {
        super.prepareLayout()
        
        // Assign
        self.size = self.collectionView!.frame.size
        self.cellCount = CGFloat(self.collectionView!.numberOfItemsInSection(0))
        self.center = CGPointMake(self.size.width/2.0, self.size.height/2.0)
        self.radius = min(self.size.width/2.0, self.size.height)/2.0
    }

首先prepareLayout初始化一些参数，比如说UICollectionViewCell距离圆心的半径，Cell数量等等
详情请参考这里UICollectionViewLayout之CircleLayout
与上面这个例子有点不同的是，在这里我们定义了

    override func layoutAttributesForSupplementaryViewOfKind(elementKind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? {
        let attributes = UICollectionViewLayoutAttributes(forSupplementaryViewOfKind: elementKind, withIndexPath: indexPath)
        attributes.size = CGSizeMake(108, 80)
        attributes.center = self.center
        return attributes
    }

这个就是显示在BottomCell中间的已阅字样，之前我是选择用DecorationView的，类的名字都已经叫DecorationCollectionReusableView了，但是发现装饰视图重用的时候不会刷新，于是就改用了SupplementaryView
每次重用BottomCell，都会调用下面方法，刷新已阅数量

    func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
        let view = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "Supplementary", forIndexPath: indexPath) as! DecorationCollectionReusableView
        
        self.number = 0
        for model in self.newsArray {
            if model.isRead?.intValue == 1 {
                self.number += 1
            }
        }
        view.readLabel.text = "\(self.number)/\(self.newsArray.count)"
        return view
    }

上一张效果图：

BottomCell