先上一张效果图:
大概介绍一下这个小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);