基于OC簡要模仿網(wǎng)易新聞?lì)^部標(biāo)題欄，實(shí)現(xiàn)點(diǎn)擊對應(yīng)標(biāo)題時(shí)相關(guān)性標(biāo)題居中功能。供小伙伴學(xué)習(xí)參考，高手忽略。
詳細(xì)代碼參考<a >demo。</a>
實(shí)現(xiàn)效果如下圖：
1.首先布局整個(gè)界面：①配置導(dǎo)航控制器相關(guān)；②創(chuàng)建標(biāo)題欄的子標(biāo)題對應(yīng)的子控制器；
2.具體標(biāo)題欄的邏輯代碼實(shí)現(xiàn)過程如下：
①引入對應(yīng)的頭文件，定義必要的屬性。
#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```
②邏輯代碼過程實(shí)現(xiàn)：
@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
{
// 讓按鈕標(biāo)題顏色變成紅色
_selectButton.transform = CGAffineTransformIdentity;
[_selectButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
// 按鈕居中顯示:本質(zhì)修改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];
// 設(shè)置標(biāo)題縮放
button.transform = CGAffineTransformMakeScale(1.3, 1.3);
_selectButton = button;
}
pragma mark - UIScrollViewDelegate
// 只要滾動(dòng)scrollView就會調(diào)用
-
(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];
}
// 縮放比例,根據(jù)滾動(dòng)計(jì)算
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];
}
// 滾動(dòng)完成的時(shí)候調(diào)用
- (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];
}
}
// 點(diǎn)擊標(biāo)題就會調(diào)用
(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);
}
// 設(shè)置標(biāo)題-
(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);
// 監(jiān)聽按鈕標(biāo)題
[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;
// 設(shè)置內(nèi)容滾動(dòng)視圖滾動(dòng)范圍
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];
// 熱點(diǎn)
MEHotViewController *h = [[MEHotViewController alloc] init];
h.title = @"熱點(diǎn)";
[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];
}
// 添加頂部的標(biāo)題滾動(dòng)視圖 - (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];
}
//添加底部的內(nèi)容滾動(dòng)視圖 - (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
