30分钟完成今日头条首页布局

先上一张效果图：

大概介绍一下这个小demo的布局情况：整个界面是由两个scroller构成的，top的title栏 中放置了n个button，下面的content内容里面对应了放置了n个view，然后在scrollerview的代理方法scrollViewDidEndScrollingAnimation和scrollViewDidEndDecelerating 中加以控制，让title跟content一一对应；

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView

{

//NSLog(@"scrollViewDidEndDecelerating");

CGFloat width = scrollView.bounds.size.width;

CGFloat height = scrollView.bounds.size.height;

CGFloat offsetX = scrollView.contentOffset.x;

// 取出当前位置要显示的index

NSInteger index = offsetX / width;

// 让对应的标题居中， 用title中心点得值－scrollerview的一半

Homelabel *label = self.titleScroller.subviews[index];

CGPoint titleOffset = self.titleScroller.contentOffset;

titleOffset.x = label.center.x - width*0.5;

if (titleOffset.x < 0) titleOffset.x = 0;

CGFloat maxOffset = self.titleScroller.contentSize.width - width;

if (titleOffset.x >= maxOffset) titleOffset.x = maxOffset;

[self.titleScroller setContentOffset:titleOffset animated:YES];

// 让其他的label会打破最初的状态

for (Homelabel *otherLabel in self.titleScroller.subviews) {

if (otherLabel !=label) {

otherLabel.labelScale = 0;

}

}

UIViewController *willShowVC = self.childViewControllers[index];

// 如果当前位置的控制器已经显示过了，就返回

if ([willShowVC isViewLoaded]) return;

//添加控制器到contentscroller中

willShowVC.view.frame = CGRectMake(offsetX , 0, width, height);

[scrollView addSubview:willShowVC.view];

}

滑动下面的scrollerview的时候上面的title文字渐变色 需要 实现scrollerview的scrollViewDidScroll 方法，时刻监听 scrollerview的滚动事件

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

{

CGFloat scale = scrollView.contentOffset.x / scrollView.bounds.size.width;

NSInteger leftIndex = scale;

Homelabel *leftLabel = self.titleScroller.subviews[leftIndex];

// 防止titles越界

if (leftIndex == (self.titleScroller.subviews.count - 1))  return;

NSInteger rightIndex = leftIndex + 1;

Homelabel *rightLabel = self.titleScroller.subviews[rightIndex];

// 右边比例

CGFloat rightScale = scale - leftIndex;

CGFloat leftScale = 1.0 - rightScale;

leftLabel.labelScale = leftScale;

rightLabel.labelScale = rightScale;

//    leftLabel.textColor = [UIColor colorWithRed:leftScale green:0 blue:0 alpha:1];

//    rightLabel.textColor = [UIColor colorWithRed:rightScale green:0 blue:0 alpha:1];

//    leftLabel.transform = CGAffineTransformMakeScale(leftScale + 1, leftScale + 1);

//    rightLabel.transform = CGAffineTransformMakeScale(rightScale + 1, rightScale + 1);

// rgb 000  黑色

// rgb 100  红色

// rgb 110  黄色

// 根据偏移量 修改rgb即可

}

值得注意的是， 在修改text的文字大小的时候，可能会出现 文字忽大忽小的情况， 具体的原因是因为[UIFont systemFontOfSize:13.0];是根据整数计算文字大小的，  想要避免该效果的话，可以使用transform 动画来实现效果；

self.transform = CGAffineTransformMakeScale(labelScale*0.3 + 1, labelScale*0.3 + 1);