ios自定义类似网易新闻的滚动条

效果图：

因为注释很详细 就不再单独讲，直接放上代码。

NewsViewController.m中：
#import "NewsViewController.h"
#import "TopLineViewController.h"
#import "HotViewController.h"
#import "SocietyViewController.h"
#import "VedioViewController.h"
#import "ReaderViewController.h"
#import "ScienceViewController.h"

static  CGFloat const labelw = 100;
static  CGFloat  const radio = 1.3;
#define WIDTH [UIScreen mainScreen].bounds.size.width
#define HEIGHT [UIScreen mainScreen].bounds.size.height
@interface NewsViewController ()<UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *titleScrollView;
@property (nonatomic,weak)UILabel *selectedLabel;
@property (weak, nonatomic) IBOutlet UIScrollView *contentScrollView;

@property (strong,nonatomic)NSMutableArray *titleLabels;
@end

@implementation NewsViewController
-(NSMutableArray *)titleLabels{
    if(!_titleLabels){
        _titleLabels = [NSMutableArray array];
    }
    return _titleLabels;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    //添加所有子控制器
    [self setUpAllChildViewController];
    //添加所有子控制器对应的标题
    [self setUpTitleLabel];
    //iOS7会给导航试图控制器下所有的UIScorllView顶部添加额外的滚动区域  不需要  所以设置成NO
    self.automaticallyAdjustsScrollViewInsets = NO;
    //初始化UIScrollView
    [self setUpScrollView];
}

-(void)setUpScrollView{
    NSUInteger count = self.childViewControllers.count;
    //设置标题滚动条
    self.titleScrollView.contentSize = CGSizeMake(count*labelw, 0);
    self.titleScrollView.showsHorizontalScrollIndicator = NO;
    //设置内容滚动条
    self.contentScrollView.contentSize = CGSizeMake(count*WIDTH, 0);
    //开启分页
    self.contentScrollView.pagingEnabled = YES;
    //去掉弹簧效果
    self.contentScrollView.bounces = NO;
    //隐藏水平滚动条
    self.contentScrollView.showsHorizontalScrollIndicator = NO;
    //设置代理
    self.contentScrollView.delegate = self;
    
}

-(void)setUpAllChildViewController{
    TopLineViewController *topLine = [[TopLineViewController alloc]init];
    topLine.title = @"头条";
    [self addChildViewController:topLine];
    
    HotViewController *hot = [[HotViewController alloc]init];
    hot.title = @"热点";
    [self addChildViewController:hot];
    
    SocietyViewController *society = [[SocietyViewController alloc]init];
    society.title = @"社会";
    [self addChildViewController:society];
    
    VedioViewController *vedio = [[VedioViewController alloc]init];
    vedio.title = @"视频";
    [self addChildViewController:vedio];
    
    ReaderViewController*reader = [[ReaderViewController alloc]init];
    reader.title = @"阅读";
    [self addChildViewController:reader];
    
    ScienceViewController *science = [[ScienceViewController alloc]init];
    science.title = @"科技";
    [self addChildViewController:science];
}

-(void)setUpTitleLabel{
    NSUInteger count = self.childViewControllers.count;
    CGFloat labelX = 0;
    CGFloat labelY = 0;
    CGFloat labelH = 44;
    for(int i = 0; i < count; i++){
        UIViewController *vc = self.childViewControllers[i];
        UILabel *label = [[UILabel alloc]init];
        //添加到titleLabels数组中
        [self.titleLabels addObject:label];
        labelX = i * labelw;
        //设置尺寸
        label.frame = CGRectMake(labelX, labelY, labelw, labelH);
        //设置label的文字
        label.text = vc.title;
        //设置用户交互
        label.userInteractionEnabled = YES;
        //设置高亮文字颜色
        label.highlightedTextColor = [UIColor redColor];
        //设置label的tag
        label.tag = i;
        //设置label文字居中
        label.textAlignment = NSTextAlignmentCenter;
        //为label添加点击手势
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(titleClick:)];
                //默认选中第0个label
        if(i==0){
            [self titleClick:tap];
        }
        [label addGestureRecognizer:tap];
        [self.titleScrollView addSubview:label];
        
    }
}
//使标题滚动 点击时居中
//设置标题居中
-(void)setUpTitleCenter:(UILabel *)centerLabel{
    //计算偏移量
    CGFloat offsetX = centerLabel.center.x - WIDTH*0.5;
    if(offsetX < 0)offsetX = 0;//防止最左边滚动出现空余
    //获取最大的滚动范围
    CGFloat maxOffsetX = self.titleScrollView.contentSize.width - WIDTH;
    if(offsetX > maxOffsetX) offsetX = maxOffsetX;//防止最右边出现空余  到最右边就不在滚动
    //滚动标题滚动条
    [self.titleScrollView setContentOffset:CGPointMake(offsetX, 0) animated:YES];
}

#pragma mark --UIScrollViewDelegate
//监听scrollView的滚动
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGFloat curPage = scrollView.contentOffset.x / scrollView.bounds.size.width;
    //左边label的角标
    NSInteger leftIndex = curPage;
    //右边label的角标
    NSInteger rightIndex = leftIndex + 1;
    //获取左边的label
    UILabel *leftLabel = self.titleLabels[leftIndex];
    //获取最右边
    UILabel *rightLabel;
    if(rightIndex < self.titleLabels.count-1){
        rightLabel = self.titleLabels[rightIndex];
    }
    //计算缩放比例
    CGFloat rightScale = curPage - leftIndex;
    CGFloat leftScale = 1 - rightScale;
    //缩放
    leftLabel.transform = CGAffineTransformMakeScale(leftScale*0.3+1, leftScale*0.3+1);
    rightLabel.transform = CGAffineTransformMakeScale(rightScale*0.3+1, rightScale*0.3+1);
    leftLabel.textColor = [UIColor colorWithRed:leftScale green:0 blue:0 alpha:1];
    rightLabel.textColor = [UIColor colorWithRed:rightScale green:0 blue:0 alpha:1];
}

//滚动完成的时候调用这个方法
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    //获取滚动到哪一页
    NSInteger index = scrollView.contentOffset.x/scrollView.bounds.size.width;
    //显示对应的视图控制器
    [self showVc:index];
    //把对应的label选中
    UILabel *selLabel = self.titleLabels[index];
    [self selectLabel:selLabel];
    //让选中的标题居中
    [self setUpTitleCenter:selLabel];
    
}

-(void)showVc:(NSInteger)index{
    CGFloat offsetX = index * WIDTH;
    //获取对应的子控制器
    UIViewController *vc = self.childViewControllers[index];
    //添加子控制器View
    //如果控制器已经创建好了  就直接return不再创建了
    if(vc.isViewLoaded)return;
    vc.view.frame = CGRectMake(offsetX, 0, WIDTH, HEIGHT);
    [self.contentScrollView addSubview:vc.view];
}

-(void)titleClick:(UITapGestureRecognizer*)sender{
    
    UILabel *selLabel = (UILabel*)sender.view;
    [self selectLabel:selLabel];
    
    NSInteger index = selLabel.tag;
    //计算滚动的位置
    CGFloat offsetX = selLabel.tag * WIDTH;
    self.contentScrollView.contentOffset = CGPointMake(offsetX, 0);
    //给对应的位置添加控制器
    [self showVc:index];
    //让标题居中
    [self setUpTitleCenter:selLabel];
    
}
//选中按钮的设置
-(void)selectLabel:(UILabel *)label{
    
    //取消上一个选中
    _selectedLabel.highlighted = NO;
    //取消形变
    _selectedLabel.transform = CGAffineTransformIdentity;
    _selectedLabel.textColor = [UIColor blackColor];
    label.highlighted = YES;
    label.transform = CGAffineTransformMakeScale(radio, radio);
    _selectedLabel = label;
}

@end
复制代码