基于OC简要模仿网易新闻头部标题栏，实现点击对应标题时相关性标题居中功能。供小伙伴学习参考，高手忽略。
详细代码参考<a href="https://github.com/mayboo/NeteaseNews.git">demo。</a>
实现效果如下图：
1.首先布局整个界面：①配置导航控制器相关；②创建标题栏的子标题对应的子控制器；
2.具体标题栏的逻辑代码实现过程如下：
①引入对应的头文件，定义必要的属性。
#import "ViewController.h"
#import "MEHotViewController.h"
#import "MEVideoViewController.h"
#import "METoplineViewController.h"
#import "MEScoietyViewController.h"
#import "MEScienceViewController.h"
#import "MEReaderViewController.h"
#define MEScreenW [UIScreen mainScreen].bounds.size.width
#define MEScreenH [UIScreen mainScreen].bounds.size.height
@interface ViewController ()<UIScrollViewDelegate>
@property (nonatomic, strong) NSMutableArray *buttons;
@property (nonatomic, weak) UIButton *selectButton;
@property (nonatomic, weak) UIScrollView *titleScrollView;
@property (nonatomic, weak) UIScrollView *contentScrollView;
@end```
②逻辑代码过程实现：
@implementation ViewController
(NSMutableArray *)buttons
{
if (_buttons == nil) {
_buttons = [NSMutableArray array];
}
return _buttons;
}(void)viewDidLoad {
[super viewDidLoad];
[self setupTitleScrollView];
[self setupContentScrollView];
[self setupAllChildViewController];
[self setupAllTitle];
self.automaticallyAdjustsScrollViewInsets = NO;
}
// 选中按钮-
(void)selButton:(UIButton *)button
{
// 让按钮标题颜色变成红色
_selectButton.transform = CGAffineTransformIdentity;
[_selectButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
// 按钮居中显示:本质修改titleScrollView的contentOffsetX
CGFloat offsetX = button.center.x - MEScreenW * 0.5;if (offsetX < 0) {
offsetX = 0;
}
CGFloat maxOffsetX = self.titleScrollView.contentSize.width - MEScreenW;
// 处理最大偏移量
if (offsetX > maxOffsetX) {
offsetX = maxOffsetX;
}
[self.titleScrollView setContentOffset:CGPointMake(offsetX, 0) animated:YES];
// 设置标题缩放
button.transform = CGAffineTransformMakeScale(1.3, 1.3);
_selectButton = button;
}
pragma mark - UIScrollViewDelegate
// 只要滚动scrollView就会调用
-
(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
NSInteger leftI = scrollView.contentOffset.x / MEScreenW;
NSInteger rightI = leftI + 1;
// 缩放按钮
UIButton *leftButton = self.buttons[leftI];
UIButton *rightButton = nil;
NSInteger count = self.buttons.count;
if (rightI < count) {
rightButton = self.buttons[rightI];
}
// 缩放比例,根据滚动计算
CGFloat scaleR = scrollView.contentOffset.x / MEScreenW - leftI;
CGFloat scaleL = 1 - scaleR;
// 0 ~ 1 => 1 ~ 1.3
leftButton.transform = CGAffineTransformMakeScale(scaleL * 0.3 + 1, scaleL * 0.3 + 1);
rightButton.transform = CGAffineTransformMakeScale(scaleR * 0.3 + 1, scaleR * 0.3 + 1);// 做颜色渐变 黑色 变成 红色
UIColor *colorR = [UIColor colorWithRed:scaleR green:0 blue:0 alpha:1];
UIColor *colorL = [UIColor colorWithRed:scaleL green:0 blue:0 alpha:1];
[leftButton setTitleColor:colorL forState:UIControlStateNormal];
[rightButton setTitleColor:colorR forState:UIControlStateNormal];
}
// 滚动完成的时候调用
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
NSInteger i = scrollView.contentOffset.x / MEScreenW;
UIButton *btn = self.buttons[i];
[self selButton:btn];
[self setupOneChildViewController:i];
}
// 切换控制器的view
- (void)setupOneChildViewController:(NSInteger)i{
UIViewController *vc = self.childViewControllers[i];
if (vc.view.superview == nil) {
CGFloat x = i * [UIScreen mainScreen].bounds.size.width;
vc.view.frame = CGRectMake(x, 0, MEScreenW, self.contentScrollView.frame.size.height);
[self.contentScrollView addSubview:vc.view];
}
}
// 点击标题就会调用
(void)titleClick:(UIButton *)button
{
NSInteger i = button.tag;
[self selButton:button];
[self setupOneChildViewController:i];
CGFloat x = i * [UIScreen mainScreen].bounds.size.width;
self.contentScrollView.contentOffset = CGPointMake(x, 0);
}
// 设置标题-
(void)setupAllTitle
{
NSInteger count = self.childViewControllers.count;
CGFloat x = 0;
CGFloat w = 100;
CGFloat h = 35;for (int i = 0; i < count; i++) {
UIButton *titleButton = [UIButton buttonWithType:UIButtonTypeCustom];
titleButton.tag = i;
UIViewController *vc = self.childViewControllers[i];
[titleButton setTitle:vc.title forState:UIControlStateNormal];
[titleButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
x = i * w;
titleButton.frame = CGRectMake(x, 0, w, h);
// 监听按钮标题
[titleButton addTarget:self action:@selector(titleClick:) forControlEvents:UIControlEventTouchUpInside];
[self.titleScrollView addSubview:titleButton];
[self.buttons addObject:titleButton];
if (i == 0) {
[self titleClick:titleButton];
}
}
self.titleScrollView.contentSize = CGSizeMake(count * w, 0);
self.titleScrollView.showsHorizontalScrollIndicator = NO;
// 设置内容滚动视图滚动范围
self.contentScrollView.contentSize = CGSizeMake(count * MEScreenW, 0);
self.contentScrollView.bounces = NO;
self.contentScrollView.pagingEnabled = YES;
self.contentScrollView.delegate = self;
}
//添加所有的子控制器
- (void)setupAllChildViewController
{
// 头条
METoplineViewController *t = [[METoplineViewController alloc] init];
t.title = @"头条";
[self addChildViewController:t];
// 热点
MEHotViewController *h = [[MEHotViewController alloc] init];
h.title = @"热点";
[self addChildViewController:h];
// 视频
MEVideoViewController *v = [[MEVideoViewController alloc] init];
v.title = @"视频";
[self addChildViewController:v];
// 社会
MEScoietyViewController *so = [[MEScoietyViewController alloc] init];
so.title = @"社会";
[self addChildViewController:so];
// 订阅
MEReaderViewController *r = [[MEReaderViewController alloc] init];
r.title = @"订阅";
[self addChildViewController:r];
// 科技
MEScienceViewController *s = [[MEScienceViewController alloc] init];
s.title = @"科技";
[self addChildViewController:s];
}
// 添加顶部的标题滚动视图 - (void)setupTitleScrollView
{
UIScrollView *titleScrollView = [[UIScrollView alloc] init];
CGFloat y = 64;
CGFloat w = self.view.bounds.size.width;
CGFloat h = 35;
titleScrollView.frame = CGRectMake(0, y, w, h);
_titleScrollView = titleScrollView;
[self.view addSubview:titleScrollView];
}
//添加底部的内容滚动视图 - (void)setupContentScrollView
{
UIScrollView *contentScrollView = [[UIScrollView alloc] init];
CGFloat y = CGRectGetMaxY(_titleScrollView.frame);
CGFloat w = self.view.bounds.size.width;
CGFloat h = self.view.bounds.size.height - y;
_contentScrollView = contentScrollView;
contentScrollView.frame = CGRectMake(0, y, w, h);
contentScrollView.backgroundColor = [UIColor purpleColor];
[self.view addSubview:contentScrollView];
}
@end
