这是一个基于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个界面时只有之前的标题栏和左后一个标题栏发生变化，中间的不变化。