這是一個(gè)基于iOS的新聞框架。
githup 傳送門demo地址
分析需求
仿網(wǎng)易動(dòng)態(tài)圖.gif
選中標(biāo)題視圖坛梁，可以進(jìn)入到對(duì)應(yīng)的內(nèi)容視圖界面而姐。
滑動(dòng)內(nèi)容視圖，對(duì)應(yīng)的標(biāo)題自動(dòng)居中划咐。
滑動(dòng)標(biāo)題的時(shí)候拴念，標(biāo)題內(nèi)容動(dòng)態(tài)改變。
創(chuàng)建主視圖控制器
Snip20170913_1.png
每一個(gè)內(nèi)容視圖中的內(nèi)容自己管理褐缠，以減輕主控制器的代碼量政鼠，
@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];
// 默認(rèn)顯示第0個(gè)
[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 = @"經(jīng)濟(jì)";
[self addChildViewController:socia4];
ZYKSociaViewController *socia5 = [[ZYKSociaViewController alloc]init];
socia5.title = @"拳擊";
[self addChildViewController:socia5];
ZYKSociaViewController *socia6 = [[ZYKSociaViewController alloc]init];
socia6.title = @"NBA";
[self addChildViewController:socia6];
}
為了方便事件的傳遞，建立了把內(nèi)容控制器設(shè)置為主控制器的子控制器队魏。
標(biāo)題UIScrollview
/**
設(shè)置標(biāo)題欄
*/
- (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];
// 設(shè)置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];
}
這里把標(biāo)題視圖里面的內(nèi)容作為label 顯示出來公般。用UIButton當(dāng)然可以了為了傳遞點(diǎn)擊事件就在label上添加了手勢(shì)。
自定義 標(biāo)題的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
// 默認(rèn)：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);
}
- 暴露出一個(gè)scale,改變著個(gè)屬性胡桨，可以改變UILabel 的大小官帘，同時(shí)有顏色的變化
- 顏色的變化在OC 中就是RGB的色值的變化，
內(nèi)容視圖
在storyboard 上添加內(nèi)容視圖的代理
/**
scrollView結(jié)束了滾動(dòng)動(dòng)畫以后就會(huì)調(diào)用這個(gè)方法
@param scrollView <#scrollView description#>
*/
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{
// 一些臨時(shí)變量
CGFloat width = scrollView.frame.size.width;
NSInteger index = scrollView.contentOffset.x / scrollView.frame.size.width;
//對(duì)應(yīng)的頂部標(biāo)題居中顯示
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 回到最初的狀態(tài)（當(dāng)滑動(dòng)范圍大時(shí)昧谊，會(huì)觸發(fā)別的label的顏色變化）
for (ZYKHomeLabel *otherLable in self.titleScrollView.subviews) {
if (otherLable != label) otherLable.scale = 0.0;
}
// 取出需要顯示的控制器
ZYKSociaViewController *willshowVC = self.childViewControllers[index];
// 如果當(dāng)前位置的位置已經(jīng)顯示過了刽虹，就直接返回
if ([willshowVC isViewLoaded]) return;
willshowVC.view.frame = CGRectMake(scrollView.contentOffset.x, 0, scrollView.frame.size.width, scrollView.frame.size.height);
[scrollView addSubview:willshowVC.view];
/**
滾動(dòng)減速的時(shí)候
@return <#return value description#>
*/
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
[self scrollViewDidEndScrollingAnimation:scrollView];
}
/**
滾動(dòng)的時(shí)候
@param scrollView <#scrollView description#>
*/
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat scale = scrollView.contentOffset.x / scrollView.frame.size.width;
// 滑到最左邊和最右邊的時(shí)候，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;
}
- 內(nèi)容視圖設(shè)計(jì)的時(shí)候揽浙，使用了懶加載状婶。但要出現(xiàn)的時(shí)候再讓其創(chuàng)建，已經(jīng)創(chuàng)建過的內(nèi)容視圖不再重復(fù)創(chuàng)建
- 當(dāng)內(nèi)容視圖滑動(dòng)結(jié)束后馅巷，標(biāo)題隨之改變膛虫，對(duì)應(yīng)的標(biāo)題由偏移量算出
- 注意當(dāng)標(biāo)題位于最左邊和最右邊的時(shí)候，標(biāo)題欄不滾動(dòng)钓猬。
- 當(dāng)滑動(dòng)范圍超過1個(gè)界面時(shí)只有之前的標(biāo)題欄和左后一個(gè)標(biāo)題欄發(fā)生變化稍刀，中間的不變化。
