小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
继续之前的storyBoard中使用的分享，今天主要介绍下scrollerView的使用以及分页的实现。
1. ScrollerView的实现
storyBoard中，scrollerView添加并添加约束会报错，因为没有设置它的内容视图控制器的大小。
我们去除上图中
Content Layout Guides，并给他添加内容视图。
设置内容视图的大小和约束，相当于把这个
scroller View撑开，我们设置它的比例
我们设置屏幕宽度的
3倍，并设置分页效果
2. 内容视图的实现
我们添加页面1，设置它的上下左间距为0，宽度为屏幕宽
同理页面2，设置它的上下左间距为0，宽度等于页面1.
页面3，直接设置它的上下左右间距为0
运行下，具有分页的效果
3.头部按钮实现
我们继续实现头部按钮点击切换，首先我们创建3个按钮并设置它的可选状态下的标题和颜色
我们设置等分的约束，首先距中显示则
左边的button相当于0.5，右边的按钮相当于1.5.我们可以把屏幕分为
4份
设置对应的比例即可
我们设置按钮下的下划线跟随button点击移动的效果
4. 实现按钮点击以及scrollerView滑动的时候切换
我们实现下scrollerView的代理，主要是滑动时按钮下划线跟着移动，结束的滑动的时候设置按钮的根据偏移量选中状态。
#pragma mark - UIScrollViewDelegate
//滑动时按钮下划线跟着移动
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (scrollView == self.scrollerView && scrollView.contentSize.width > 0) {
self.bottomLineView.center = CGPointMake(kScreenWidth*scrollView.contentOffset.x/scrollView.contentSize.width*3/4 + kScreenWidth/4, self.bottomLineView.center.y);
}
}
//结束的滑动的时候设置按钮的根据偏移量选中状态
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
if (scrollView == self.scrollerView) {
for (UIView *vi in self.bottomLineView
.superview.subviews) {
if ([vi isKindOfClass:[UIButton class]]) {
UIButton *tempBtn = (UIButton *)vi;
tempBtn.selected = CGRectGetMidX(self.bottomLineView.frame)-2<CGRectGetMidX(vi.frame) && CGRectGetMidX(self.bottomLineView.frame)+2>CGRectGetMidX(vi.frame);
}
}
}
}
实现按钮点击scrillerView进行偏移
- (IBAction)selectAction:(UIButton *)sender {
if (sender.selected) return;
[self.scrollerView setContentOffset:CGPointMake((CGRectGetMidX(sender.frame)+2)<kScreenWidth/2?0:(CGRectGetMidX(sender.frame)-2)>kScreenWidth/2?kScreenWidth*2:kScreenWidth, 0) animated:YES];
for (UIButton *btn in sender.superview.subviews) {
if ([btn isKindOfClass:[UIButton class]]) {
btn.selected = NO;
}
}
sender.selected = YES;
}
最后看下效果
实际效果还可以，喜欢的话点个赞吧。
