最近得空做了一个小的新闻类APP,基本上都是照着News Digest的模子刻出来的,之所以这个为参考,是因为觉得News Digest这个APP做得真的很酷炫!
猛戳这里获取整个项目源代码
项目前端主要由swift编写,本地数据用CoreData,后端由Node.js编写,后台数据库用MongoDB。
News Digest(雅虎新闻)模仿秀第一弹
News Digest(雅虎新闻)模仿秀第三弹
News Digest(雅虎新闻)模仿秀第四弹
今天我们主要实现效果是这两张图的效果
- 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)
}
-
UITableView浏览新闻,上下移动
每一个UICollectionViewCell嵌套一个UITableView用于显示新闻。
着了UITableView有两个Cell,一个是标签+UIScrollView,一个就直接是一个UILabel(显示标题和内容)
第二个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)
}