最近得空做了一个小的新闻类APP，基本上都是照着News Digest的模子刻出来的，之所以这个为参考，是因为觉得News Digest这个APP做得真的很酷炫！
猛戳这里获取整个项目源代码
项目前端主要由swift编写，本地数据用CoreData，后端由Node.js编写，后台数据库用MongoDB。
News Digest(雅虎新闻)模仿秀第二弹
News Digest(雅虎新闻)模仿秀第三弹
News Digest(雅虎新闻)模仿秀第四弹
先上几张效果图让大家看一下：
今天先讲首页部分的实现吧
-
UITableView
整个首页其实就是一个UITableView，有三种类型的Cell
三个Cell
MainTopTableViewCell是顶部这个Cell
MainTableViewCell是中间的Cell
MainBottomTableViewCell是底部那个Cell(显示已阅那个)
剩下两个cell.xib是MainBottomTableViewCell里面的，因为里面有一个UICollectionView. -
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改变的时候，图片也会相应放大
- 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
}
上一张效果图：
