最近得空做了一個小的新聞類APP,基本上都是照著News Digest的模子刻出來的钦勘,之所以這個為參考怎炊,是因為覺得News Digest這個APP做得真的很酷炫混移!
猛戳這里獲取整個項目源代碼
項目前端主要由swift編寫该镣,本地數(shù)據(jù)用CoreData冻璃,后端由Node.js編寫,后臺數(shù)據(jù)庫用MongoDB损合。
News Digest(雅虎新聞)模仿秀第一彈
News Digest(雅虎新聞)模仿秀第三彈
News Digest(雅虎新聞)模仿秀第四彈
今天我們主要實現(xiàn)效果是這兩張圖的效果
- UICollectionView
從首頁點擊一個UITableViewCell之后省艳,跳轉(zhuǎn)到一個新的ViewController(在項目里面是NewsViewController),然后傳入一個數(shù)組newsArray(UICollectionViewCell個數(shù))塌忽,以及傳入一個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拍埠,存儲已經(jīng)閱讀過的cell的indexPath.row,用于閉包回調(diào)執(zhí)行動畫
viewDidLayoutSubviews是布局完成之后土居,即將執(zhí)行viewWillAppear方法,在這里我們需要直接滾動到第N個Cell嬉探,如果把scrollToItemAtIndexPath方法放到viewWillAppear或者放到viewDidAppear都會有一段動畫執(zhí)行擦耀,不但會影響視覺效果,而且會導(dǎo)致self.scanArray記錄偏差(因為直接從第一個滾到第N個涩堤,意思說前N個的新聞都看了眷蜓,其實用戶并沒有看,這里self.scanArray的添加是某一個Cell出現(xiàn)之后就添加進去)
移動的時候旁邊的黑邊胎围,是因為在StoryBoard里面設(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)
}
-
UITableView瀏覽新聞德召,上下移動
每一個UICollectionViewCell嵌套一個UITableView用于顯示新聞。
著了UITableView有兩個Cell汽纤,一個是標簽+UIScrollView上岗,一個就直接是一個UILabel(顯示標題和內(nèi)容)
第一個Cell
第二個Cell
第二個Cell就是直接計算文字高度,改變Cell的高度即可
第一個Cell的UIScrollView添加一個填滿的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
}
// 防止第一個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)
}