最近得空做了一個(gè)小的新聞?lì)怉PP，基本上都是照著News Digest的模子刻出來的，之所以這個(gè)為參考，是因?yàn)橛X得News Digest這個(gè)APP做得真的很酷炫！

猛戳這里獲取整個(gè)項(xiàng)目源代碼
項(xiàng)目前端主要由swift編寫，本地?cái)?shù)據(jù)用CoreData，后端由Node.js編寫，后臺(tái)數(shù)據(jù)庫用MongoDB。

News Digest(雅虎新聞)模仿秀第一彈
News Digest(雅虎新聞)模仿秀第三彈
News Digest(雅虎新聞)模仿秀第四彈

今天我們主要實(shí)現(xiàn)效果是這兩張圖的效果

點(diǎn)擊具體新聞查看

左右切換新聞

1. UICollectionView
   從首頁點(diǎn)擊一個(gè)UITableViewCell之后，跳轉(zhuǎn)到一個(gè)新的ViewController(在項(xiàng)目里面是NewsViewController)，然后傳入一個(gè)數(shù)組newsArray(UICollectionViewCell個(gè)數(shù))，以及傳入一個(gè)indexPath.row(用于直接跳進(jìn)第N個(gè)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，存儲(chǔ)已經(jīng)閱讀過的cell的indexPath.row，用于閉包回調(diào)執(zhí)行動(dòng)畫
viewDidLayoutSubviews是布局完成之后，即將執(zhí)行viewWillAppear方法，在這里我們需要直接滾動(dòng)到第N個(gè)Cell，如果把scrollToItemAtIndexPath方法放到viewWillAppear或者放到viewDidAppear都會(huì)有一段動(dòng)畫執(zhí)行，不但會(huì)影響視覺效果，而且會(huì)導(dǎo)致self.scanArray記錄偏差(因?yàn)橹苯訌牡谝粋€(gè)滾到第N個(gè)，意思說前N個(gè)的新聞都看了，其實(shí)用戶并沒有看，這里self.scanArray的添加是某一個(gè)Cell出現(xiàn)之后就添加進(jìn)去)
移動(dòng)的時(shí)候旁邊的黑邊，是因?yàn)樵赟toryBoard里面設(shè)置了sectionInsects左右都是2.5，然后設(shè)置Cell的size

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        return CGSizeMake(collectionView.bounds.width - 5, collectionView.bounds.height)
    }

2. UITableView瀏覽新聞，上下移動(dòng)
   每一個(gè)UICollectionViewCell嵌套一個(gè)UITableView用于顯示新聞。
   著了UITableView有兩個(gè)Cell，一個(gè)是標(biāo)簽+UIScrollView，一個(gè)就直接是一個(gè)UILabel(顯示標(biāo)題和內(nèi)容)

   
   
   第一個(gè)Cell
   
   
   第二個(gè)Cell
   
   

   第二個(gè)Cell就是直接計(jì)算文字高度，改變Cell的高度即可
   第一個(gè)Cell的UIScrollView添加一個(gè)填滿的UIImageView，然后根據(jù)下拉的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
        }
        // 防止第一個(gè)Cell不在visiableCells數(shù)組引發(fā)的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)
    }