这是一个基于iOS的新闻框架。

githup 传送门demo地址

分析需求

仿网易动态图.gif

选中标题视图，可以进入到对应的内容视图界面。
滑动内容视图，对应的标题自动居中。
滑动标题的时候，标题内容动态改变。

创建主视图控制器

Snip20170913_1.png

每一个内容视图中的内容自己管理，以减轻主控制器的代码量，

@interface ZYKViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *titleScrollView;
@property (weak, nonatomic) IBOutlet UIScrollView *contentScrollView;

@end
@implementation ZYKViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    [self setuPChildVC];
    [self setUptitle];
    
    // 默认显示第0个
    [self scrollViewDidEndScrollingAnimation:self.contentScrollView];
    
}

- (void)setuPChildVC
{
    ZYKSociaViewController *socia0 = [[ZYKSociaViewController alloc]init];
    socia0.title = @"国际";
    [self addChildViewController:socia0];
    
    
    ZYKSociaViewController *socia1 = [[ZYKSociaViewController alloc]init];
    socia1.title = @"军事";
    [self addChildViewController:socia1];
    
    ZYKSociaViewController *socia2 = [[ZYKSociaViewController alloc]init];
    socia2.title = @"体育";
    [self addChildViewController:socia2];
    
    
    ZYKSociaViewController *socia3 = [[ZYKSociaViewController alloc]init];
    socia3.title = @"政治";
    [self addChildViewController:socia3];
    ZYKSociaViewController *socia4 = [[ZYKSociaViewController alloc]init];
    socia4.title = @"经济";
    [self addChildViewController:socia4];
    
    
    ZYKSociaViewController *socia5 = [[ZYKSociaViewController alloc]init];
    socia5.title = @"拳击";
    [self addChildViewController:socia5];
    ZYKSociaViewController *socia6 = [[ZYKSociaViewController alloc]init];
    socia6.title = @"NBA";
    [self addChildViewController:socia6];
    
    
}

为了方便事件的传递，建立了把内容控制器设置为主控制器的子控制器。

标题UIScrollview


/**
 设置标题栏
 */
- (void)setUptitle{
    
    CGFloat LabelY = 0;
    CGFloat LabelWeight = 100;
    CGFloat LabelHeight = self.titleScrollView.bounds.size.height;

    for (int i = 0; i < 7 ; i ++ ) {
        
        
        CGFloat LabelX = i * LabelWeight;
        ZYKHomeLabel *label = [[ZYKHomeLabel alloc]init];
        
        
        label.text = self.childViewControllers[i].title;
        
      
        label.frame = CGRectMake(LabelX, LabelY, LabelWeight, LabelHeight);
        
        [label addGestureRecognizer:[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(labelClick:) ]];
        
        label.tag = i;
        [self.titleScrollView addSubview:label];
        
        
        // 设置contentSize

        self.titleScrollView.contentSize = CGSizeMake(LabelWeight * 7, 0);
        self.contentScrollView.contentSize = CGSizeMake(7 * [UIScreen mainScreen].bounds.size.width, 0);
        
         
    }
    
}

- (void)labelClick:(UIGestureRecognizer *)tap
{
    NSInteger index = tap.view.tag;
    
    
    CGPoint offset = self.contentScrollView.contentOffset;
    
    offset.x = index * self.contentScrollView.bounds.size.width ;
    
    [self.contentScrollView setContentOffset:offset animated:YES];
    
}

这里把标题视图里面的内容作为label 显示出来。用UIButton当然可以了为了传递点击事件就在label上添加了手势。

自定义标题的UILabel

@interface ZYKHomeLabel : UILabel
// 缩放比例
@property (nonatomic,assign)CGFloat scale;

@end


#import "ZYKHomeLabel.h"
static const CGFloat XMGRed = 0.4;
static const CGFloat XMGGreen = 0.6;
static const CGFloat XMGBlue = 0.7;
@implementation ZYKHomeLabel

- (instancetype)init{
    
    if (self = [super init]) {
        self.font = [UIFont systemFontOfSize:15];
        self.textColor = [UIColor colorWithRed:XMGRed green:XMGGreen blue:XMGBlue alpha:1.0];
        self.textAlignment = NSTextAlignmentCenter;
        self.backgroundColor = [UIColor clearColor];
        self.userInteractionEnabled = YES;

    }
    
    return self;
}

- (void)setScale:(CGFloat)scale{
    _scale = scale;
    
    //      R G B
    // 默认：0.4 0.6 0.7
    // 红色：1   0   0
    
    CGFloat red = XMGRed + (1 - XMGRed) * scale;
    CGFloat green = XMGGreen + (0 - XMGGreen) * scale;
    CGFloat blue = XMGBlue + (0 - XMGBlue) * scale;
    self.textColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
    
    // 大小缩放比例
    CGFloat transformScale = 1 + scale * 0.3;
    self.transform = CGAffineTransformMakeScale(transformScale, transformScale);
    
    
}

暴露出一个scale,改变着个属性，可以改变UILabel 的大小，同时有颜色的变化
颜色的变化在OC 中就是RGB的色值的变化，

内容视图

在storyboard 上添加内容视图的代理


/**
scrollView结束了滚动动画以后就会调用这个方法
 @param scrollView <#scrollView description#>
 */
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{
    
    // 一些临时变量
    CGFloat width = scrollView.frame.size.width;
    NSInteger index = scrollView.contentOffset.x / scrollView.frame.size.width;
    
    
    //对应的顶部标题居中显示
    ZYKHomeLabel *label = self.titleScrollView.subviews[index];
    CGPoint titleOffet = self.titleScrollView.contentOffset;
    titleOffet.x = label.center.x - width * 0.5 ;
    
    //左边超出处理
    if (titleOffet.x < 0) titleOffet.x = 0;
    
    CGFloat maxTitleOffetX = self.titleScrollView.contentSize.width - width;
    // 右边超出处理
    if (titleOffet.x > maxTitleOffetX) titleOffet.x = maxTitleOffetX;
    
    
    [self.titleScrollView setContentOffset:titleOffet animated:YES];
    
    // 让其他label 回到最初的状态（当滑动范围大时，会触发别的label的颜色变化）
    
    for (ZYKHomeLabel *otherLable in self.titleScrollView.subviews) {
        
        if (otherLable != label) otherLable.scale = 0.0;
        
    }
    
    // 取出需要显示的控制器
    ZYKSociaViewController *willshowVC = self.childViewControllers[index];

    // 如果当前位置的位置已经显示过了，就直接返回
    if ([willshowVC isViewLoaded]) return;
    
    
    
    willshowVC.view.frame = CGRectMake(scrollView.contentOffset.x, 0, scrollView.frame.size.width, scrollView.frame.size.height);
    
    [scrollView addSubview:willshowVC.view];
    
    
/**
 滚动减速的时候

 @return <#return value description#>
 */
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    
    [self scrollViewDidEndScrollingAnimation:scrollView];
}

/**
 滚动的时候

 @param scrollView <#scrollView description#>
 */
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat scale = scrollView.contentOffset.x / scrollView.frame.size.width;
    
    // 滑到最左边和最右边的时候，do nothing
    if (scale < 0 || scale > self.titleScrollView.subviews.count ) return;
    
    //左边label
    NSInteger leftIndex = scale;
    ZYKHomeLabel *leftlabel = self.titleScrollView.subviews[leftIndex];
    
    // 右边label
    CGFloat rightScale = scale - leftIndex;
    CGFloat leftScale  = 1 - rightScale;
    
    
    if (leftIndex == self.titleScrollView.subviews.count - 1) return;
    
    
    // 获取右边的按钮
    NSInteger rightIndex = leftIndex + 1;
    
    ZYKHomeLabel *rightLabel = (rightIndex == self.titleScrollView.subviews.count)? nil : self.titleScrollView.subviews[rightIndex];
    
    
    leftlabel.scale = leftScale;
    
    rightLabel.scale = rightScale;
    
    
}

内容视图设计的时候，使用了懒加载。但要出现的时候再让其创建，已经创建过的内容视图不再重复创建
当内容视图滑动结束后，标题随之改变，对应的标题由偏移量算出
注意当标题位于最左边和最右边的时候，标题栏不滚动。
当滑动范围超过1个界面时只有之前的标题栏和左后一个标题栏发生变化，中间的不变化。

新闻框架