前言:轉(zhuǎn)眼間將近兩個(gè)月沒(méi)有更新了枯夜,今天來(lái)給大家講解一個(gè)封裝的簡(jiǎn)單容器控制器RHNavController斩启,在APP中應(yīng)用的還是很多的夜牡。廢話不多說(shuō)商架,大家先來(lái)看圖:
原理:標(biāo)題使用UIButton
添加點(diǎn)擊事件堰怨,下方頁(yè)面使用UICollectionView
實(shí)現(xiàn)滑動(dòng)的控制器。點(diǎn)擊上方標(biāo)題蛇摸,通過(guò)代理回調(diào)改變UICollectionView
的contentOffset
來(lái)實(shí)現(xiàn)頁(yè)面的自動(dòng)左右切換备图,手動(dòng)滑動(dòng)頁(yè)面改變當(dāng)前選中的標(biāo)題實(shí)現(xiàn)頁(yè)面也標(biāo)題同步。
下面皇型,按照?qǐng)D層從上到下來(lái)給大家詳細(xì)講解各個(gè)類(lèi)的實(shí)現(xiàn)诬烹。
首先是標(biāo)題按鈕砸烦,定制一個(gè)繼承與UIButton
的子類(lèi)弃鸦,通過(guò)重寫(xiě)構(gòu)造方法快速實(shí)現(xiàn)各個(gè)屬性的設(shè)置,.m
實(shí)現(xiàn)如下:
#import "RHNavItem.h"
@implementation RHNavItem
- (instancetype)initWithFrame:(CGRect)frame itemModel:(RHNavItemModel *)model {
self = [super initWithFrame:frame];
if (self) {
self.titleLabel.font = model.titleFont;
[self setTitle:model.title forState:UIControlStateNormal];
[self setTitleColor:model.normalColor forState:UIControlStateNormal];
[self setTitleColor:model.selectColor forState:UIControlStateSelected];
}
return self;
}
@end
在此使用了一個(gè)model
來(lái)存儲(chǔ)了各個(gè)屬性幢痘,方便對(duì)應(yīng)管理唬格。model.h
如下:
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface RHNavItemModel : NSObject
// 標(biāo)題
@property (nonatomic, copy) NSString * title;
// 標(biāo)題文字寬度
@property (nonatomic, assign) CGFloat titleWidth;
// 標(biāo)題對(duì)應(yīng)的按鈕寬度
@property (nonatomic, assign) CGFloat itemWidth;
// 標(biāo)題下方線寬度
@property (nonatomic, assign) CGFloat lineWidth;
// 標(biāo)題字體大小
@property (nonatomic, strong) UIFont * titleFont;
// 標(biāo)題未選中顏色
@property (nonatomic, strong) UIColor * normalColor;
// 標(biāo)題選中顏色
@property (nonatomic, strong) UIColor * selectColor;
// 構(gòu)造方法快速創(chuàng)建model
- (instancetype)initWithTitle:(NSString *)title font:(UIFont *)font normalColor:(UIColor *)normalColor selectColor:(UIColor *)selectColor;
@end
接下來(lái)是上方標(biāo)題按鈕所在view
的實(shí)現(xiàn),.h
文件如下:
#import <UIKit/UIKit.h>
#import "RHNavItem.h"
#define kScreen_W [UIScreen mainScreen].bounds.size.width
#define kScreen_H [UIScreen mainScreen].bounds.size.height
@protocol RHNavViewDelegate;
@interface RHNavView : UIView
@property (nonatomic, weak) id<RHNavViewDelegate> delegate;
@property (nonatomic, strong) NSArray * itemModelArr;
@property (nonatomic, assign) NSInteger selectedIndex;
- (instancetype)initWithFrame:(CGRect)frame itemModels:(NSArray<RHNavItemModel *> *)models;
@end
@protocol RHNavViewDelegate <NSObject>
@optional
- (void)navView:(RHNavView *)navView didSelectedItemAtIndex:(NSInteger)index;
@end
在此定義了回調(diào)的代理及重寫(xiě)了構(gòu)造方法以快速創(chuàng)建對(duì)象颜说。下面是在.m
文件中的實(shí)現(xiàn):
#import "RHNavView.h"
#define BtnTag 2016
#define SVHeight 44 // scrollview高度
#define LineHeight 2 // 移動(dòng)線高度
#define ItemHeight 41 // 按鈕高度
#define LineOriginY SVHeight - LineHeight - 1 // 移動(dòng)線 y 點(diǎn)
@interface RHNavView () <UIScrollViewDelegate>
@property (nonatomic, strong) UIScrollView * scrollView;
@property (nonatomic, strong) UILabel * lab_line;
@property (nonatomic, strong) UILabel * lab_lineH;
@property (nonatomic, strong) NSMutableArray * modelArr;
@property (nonatomic, strong) NSMutableArray * itemArr;
@end
@implementation RHNavView
- (instancetype)initWithFrame:(CGRect)frame itemModels:(NSArray<RHNavItemModel *> *)models {
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor whiteColor];
[self.modelArr removeAllObjects];
[self.modelArr addObjectsFromArray:models];
[self addSubviews];
}
return self;
}
- (void)layoutSubviews {
self.scrollView.frame = CGRectMake(0, self.bounds.size.height - SVHeight, self.bounds.size.width, SVHeight);
self.lab_lineH.frame = CGRectMake(0, self.bounds.size.height - 1, self.bounds.size.width, 1);
[super layoutSubviews];
}
#pragma mark - create UI
- (void)addSubviews {
if (_modelArr.count == 0) {
return;
}
float totalItemWidth = 0;
for (RHNavItemModel * model in _modelArr) {
totalItemWidth += model.itemWidth;
}
[self addSubview:self.scrollView];
[_scrollView addSubview:self.lab_line];
[self addSubview:self.lab_lineH];
RHNavItemModel * mod = _modelArr.firstObject;
_lab_line.backgroundColor = mod.selectColor;
if (_modelArr.count == 1) {
RHNavItemModel * model = _modelArr.firstObject;
RHNavItem * item = [[RHNavItem alloc] initWithFrame:CGRectMake((kScreen_W - model.itemWidth)/2, 0, model.itemWidth, ItemHeight) itemModel:model];
[self itemClick:item];
[_scrollView addSubview:item];
[self.itemArr addObject:item];
_lab_line.frame = CGRectMake(0, LineOriginY, model.lineWidth, LineHeight);
_lab_line.center = CGPointMake(item.center.x, _lab_line.center.y);
} else if (_modelArr.count == 2) {
for (int i = 0; i < _modelArr.count; i++) {
RHNavItemModel * model = _modelArr[i];
RHNavItem * item = [[RHNavItem alloc] initWithFrame:CGRectMake(i * (kScreen_W/2), 0, kScreen_W/2, ItemHeight) itemModel:model];
item.tag = BtnTag + i;
[item addTarget:self action:@selector(itemClick:) forControlEvents:UIControlEventTouchUpInside];
[_scrollView addSubview:item];
[self.itemArr addObject:item];
if (i == 0) {
_lab_line.frame = CGRectMake(0, LineOriginY, model.lineWidth, LineHeight);
_lab_line.center = CGPointMake(item.center.x, _lab_line.center.y);
[self itemClick:item];
}
}
} else if (kScreen_W >= totalItemWidth) {
for (int i = 0; i < _modelArr.count; i++) {
RHNavItemModel * model = _modelArr[i];
model.itemWidth += (kScreen_W - totalItemWidth)/_modelArr.count;
}
float originX = 0;
for (int i = 0; i < _modelArr.count; i++) {
RHNavItemModel * model = _modelArr[i];
RHNavItem * item = [[RHNavItem alloc] initWithFrame:CGRectMake(originX, 0, model.itemWidth, ItemHeight) itemModel:model];
item.tag = BtnTag + i;
[item addTarget:self action:@selector(itemClick:) forControlEvents:UIControlEventTouchUpInside];
[_scrollView addSubview:item];
[self.itemArr addObject:item];
originX += model.itemWidth;
if (i == 0) {
_lab_line.frame = CGRectMake(0, LineOriginY, model.lineWidth, LineHeight);
_lab_line.center = CGPointMake(item.center.x, _lab_line.center.y);
[self itemClick:item];
}
}
} else {
_scrollView.contentSize = CGSizeMake(totalItemWidth, 44);
_scrollView.showsHorizontalScrollIndicator = NO;
float originX = 0;
for (int i = 0; i < _modelArr.count; i++) {
RHNavItemModel * model = _modelArr[i];
RHNavItem * item = [[RHNavItem alloc] initWithFrame:CGRectMake(originX, 0, model.itemWidth, ItemHeight) itemModel:model];
item.tag = BtnTag + i;
[item addTarget:self action:@selector(itemClick:) forControlEvents:UIControlEventTouchUpInside];
[_scrollView addSubview:item];
[self.itemArr addObject:item];
originX += model.itemWidth;
if (i == 0) {
_lab_line.frame = CGRectMake(0, LineOriginY, model.lineWidth, LineHeight);
_lab_line.center = CGPointMake(item.center.x, _lab_line.center.y);
[self itemClick:item];
}
}
}
}
#pragma mark - item event
- (void)itemClick:(RHNavItem *)item{
NSInteger index = item.tag - BtnTag;
if ([self.delegate respondsToSelector:@selector(navView:didSelectedItemAtIndex:)]) {
[self.delegate navView:self didSelectedItemAtIndex:index];
}
[self setScrollViewContentOffsetWithItem:item];
}
#pragma mark - 重寫(xiě)屬性set方法 實(shí)現(xiàn)item自動(dòng)切換
- (void)setSelectedIndex:(NSInteger)selectedIndex {
RHNavItem * item = [self viewWithTag:BtnTag + selectedIndex];
[self setScrollViewContentOffsetWithItem:item];
}
#pragma mark - 設(shè)置item的位置
- (void)setScrollViewContentOffsetWithItem:(RHNavItem *)item {
NSInteger index = item.tag - BtnTag;
RHNavItemModel * model = _modelArr[index];
float scaleX = model.lineWidth / _lab_line.bounds.size.width;
dispatch_async(dispatch_get_main_queue(), ^{
[UIView animateWithDuration:0.25 animations:^{
_lab_line.center = CGPointMake(item.center.x, _lab_line.center.y);
_lab_line.transform = CGAffineTransformMakeScale(scaleX, 1);
} completion:^(BOOL finished) {
_lab_line.frame = CGRectMake(item.frame.origin.x + (model.itemWidth - model.lineWidth)/2, LineOriginY, model.lineWidth, LineHeight);
}];
});
//遍歷ScrollView的RHNavItem 判斷如果是當(dāng)前點(diǎn)中的item 改變其selected屬性為YES 否則改為NO
for (RHNavItem * navItem in self.itemArr) {
if (navItem != item) {
navItem.selected = NO;
} else {
navItem.selected = YES;
}
}
float totalItemWidth = 0;
for (RHNavItemModel * model in _modelArr) {
totalItemWidth += model.itemWidth;
}
if (kScreen_W >= totalItemWidth) {
return;
}
if (item.center.x - kScreen_W/2 <= 0) {
[_scrollView setContentOffset:CGPointMake(0, 0) animated:YES];
return;
}
if (item.center.x - kScreen_W/2 > 0 && _scrollView.contentSize.width - item.center.x > kScreen_W/2) {
[_scrollView setContentOffset:CGPointMake(item.center.x-kScreen_W/2, 0) animated:YES];
return;
}
if (_scrollView.contentSize.width - item.center.x <= kScreen_W/2) {
[_scrollView setContentOffset:CGPointMake(_scrollView.contentSize.width - kScreen_W, 0) animated:YES];
return;
}
}
#pragma mark - setter and getter
- (UIScrollView *)scrollView {
if (!_scrollView) {
UIScrollView * scrollView = [[UIScrollView alloc] init];
_scrollView = scrollView;
}
return _scrollView;
}
- (UILabel *)lab_line {
if (!_lab_line) {
UILabel * label = [[UILabel alloc] init];
_lab_line = label;
}
return _lab_line;
}
- (UILabel *)lab_lineH {
if (!_lab_lineH) {
UILabel * label = [[UILabel alloc] init];
label.backgroundColor = [UIColor colorWithRed:220/255.0 green:220/255.0 blue:220/255.0 alpha:1];
_lab_lineH = label;
}
return _lab_lineH;
}
- (NSMutableArray *)modelArr {
if (!_modelArr) {
_modelArr = [[NSMutableArray alloc] init];
}
return _modelArr;
}
- (NSMutableArray *)itemArr {
if (!_itemArr) {
_itemArr = [[NSMutableArray alloc] init];
}
return _itemArr;
}
- (void)setItemModelArr:(NSArray *)itemModelArr {
_itemModelArr = itemModelArr;
[self.modelArr removeAllObjects];
[self.modelArr addObjectsFromArray:itemModelArr];
for (int i = 0; i < _itemArr.count; i++) {
RHNavItem * item = _itemArr[i];
RHNavItemModel * model = _itemModelArr[i];
item.titleLabel.font = model.titleFont;
[item setTitleColor:model.normalColor forState:UIControlStateNormal];
[item setTitleColor:model.selectColor forState:UIControlStateSelected];
if (i == 0) {
_lab_line.backgroundColor = model.selectColor;
}
}
}
@end
如果看完了這個(gè)類(lèi)购岗,可以看出這里對(duì)標(biāo)題的個(gè)數(shù)對(duì)應(yīng)不同的布局做了簡(jiǎn)單的區(qū)分,把所有代碼都拿過(guò)來(lái)了门粪,有點(diǎn)繁瑣喊积,還請(qǐng)不要介意。
下面是關(guān)鍵了玄妈,是下方滑動(dòng)界面與上方標(biāo)題欄相互關(guān)聯(lián)的實(shí)現(xiàn)乾吻,這里用到了UIViewController
來(lái)實(shí)現(xiàn)髓梅,為了能夠更清晰的給大家展示如何封裝,還請(qǐng)大家不要覺(jué)得代碼繁瑣绎签,.h
文件如下:
#import <UIKit/UIKit.h>
@interface RHNavController : UIViewController
// navView 背景色
@property (nonatomic, strong) UIColor * tintColor;
// 未選中 item 字體顏色
@property (nonatomic, strong) UIColor * itemNormalColor;
// 選中 item 字體顏色
@property (nonatomic, strong) UIColor * itemSelectColor;
// item 字體大小
@property (nonatomic, strong) UIFont * itemFont;
// 父 vc
@property (nonatomic, weak) UIViewController * parentController;
// 當(dāng)前選中的下標(biāo)
@property (nonatomic, assign, readonly) NSInteger selectedIndex;
// vc 與 title 個(gè)數(shù)必須一致
- (instancetype)initWithControllers:(NSArray<UIViewController *> *)controllers itemTitles:(NSArray<NSString *> *)titles;
@end
.m
文件的實(shí)現(xiàn):
#import "RHNavController.h"
#import "RHNavView.h"
// 標(biāo)題默認(rèn)未選中顏色
#define NORMAL_COLOR [UIColor colorWithRed:77/255.0 green:77/255.0 blue:77/255.0 alpha:1.0]
// 標(biāo)題默認(rèn)選中顏色
#define SELECT_COLOR [UIColor colorWithRed:243/255.0 green:83/255.0 blue:33/255.0 alpha:1.0]
#define RHNAV_COLLECTION_CELL @"RHNav_Collection_Cell_ID"
@interface RHNavController () <UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout, RHNavViewDelegate>
@property (nonatomic, strong) NSMutableArray * controllerArr;
@property (nonatomic, strong) NSMutableArray * modelArr;
@property (nonatomic, strong) UICollectionView * collectionView;
@property (nonatomic, strong) RHNavView * navView;
// 是否手動(dòng)拖拽collectionView
@property (nonatomic, assign) BOOL isDrag;
@property (nonatomic, assign) CGFloat navViewH;
@end
@implementation RHNavController
- (instancetype)initWithControllers:(NSArray<UIViewController *> *)controllers itemTitles:(NSArray<NSString *> *)titles {
self = [super init];
if (self) {
[self.controllerArr addObjectsFromArray:controllers];
for (int i = 0; i < titles.count; i++) {
RHNavItemModel * model = [[RHNavItemModel alloc] initWithTitle:titles[i] font:[UIFont systemFontOfSize:15] normalColor:NORMAL_COLOR selectColor:SELECT_COLOR];
[self.modelArr addObject:model];
}
}
return self;
}
- (void)viewDidLoad {
[super viewDidLoad];
[self addChildViewControllers];
[self addSubviews];
}
#pragma mark - 添加子控制器
- (void)addChildViewControllers {
for (int i = 0; i < self.controllerArr.count; i++) {
UIViewController * vc = (UIViewController *)self.controllerArr[i];
[self addChildViewController:vc];
}
}
#pragma mark - add subviews
- (void)addSubviews {
[self.view addSubview:self.navView];
[self.view addSubview:self.collectionView];
}
#pragma mark - navView delegate
- (void)navView:(RHNavView *)navView didSelectedItemAtIndex:(NSInteger)index {
_isDrag = NO;
[_collectionView setContentOffset:CGPointMake(kScreen_W * index, 0) animated:YES];
_selectedIndex = index;
}
#pragma mark - collectionView dataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.controllerArr.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:RHNAV_COLLECTION_CELL forIndexPath:indexPath];
if (indexPath.row < self.controllerArr.count) {
UIViewController * controller = self.controllerArr[indexPath.row];
controller.view.frame = cell.contentView.bounds;
[cell.contentView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
[cell.contentView addSubview:controller.view];
}
return cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
return CGSizeMake(kScreen_W, self.view.bounds.size.height - _navViewH);
}
//翻頁(yè)中枯饿,是否手動(dòng)翻頁(yè)都會(huì)觸發(fā)
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (_isDrag) {
if (scrollView == _collectionView) {
NSInteger selectIndex = (_collectionView.contentOffset.x + kScreen_W / 2) / kScreen_W;
_navView.selectedIndex = selectIndex;
_selectedIndex = selectIndex;
}
}
}
//開(kāi)始翻頁(yè),只有手動(dòng)開(kāi)始翻頁(yè)才會(huì)觸發(fā)的方法
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
_isDrag = YES;
}
#pragma mark - setter and getter
- (UICollectionView *)collectionView {
if (!_collectionView) {
UICollectionViewFlowLayout * flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
//兩列之間的距離
flowLayout.minimumInteritemSpacing = 0;
//兩行之間的距離
flowLayout.minimumLineSpacing = 0;
UICollectionView * collection = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];
collection.backgroundColor = [UIColor whiteColor];
collection.dataSource = self;
collection.delegate = self;
//設(shè)置翻頁(yè)
collection.pagingEnabled = YES;
//反彈
collection.bounces = NO;
//水平滾動(dòng)條
collection.showsHorizontalScrollIndicator = NO;
[collection registerClass:[UICollectionViewCell class]forCellWithReuseIdentifier:RHNAV_COLLECTION_CELL];
_collectionView = collection;
}
return _collectionView;
}
- (RHNavView *)navView {
if (!_navView) {
RHNavView * navView = [[RHNavView alloc] initWithFrame:CGRectZero itemModels:self.modelArr];
navView.delegate = self;
_navView = navView;
}
return _navView;
}
- (NSMutableArray *)controllerArr {
if (!_controllerArr) {
_controllerArr = [[NSMutableArray alloc] init];
}
return _controllerArr;
}
- (NSMutableArray *)modelArr {
if (!_modelArr) {
_modelArr = [[NSMutableArray alloc] init];
}
return _modelArr;
}
- (void)setParentController:(UIViewController *)parentController {
parentController.automaticallyAdjustsScrollViewInsets = NO;
[parentController addChildViewController:self];
[parentController.view addSubview:self.view];
CGFloat originY = 0;
if (parentController.navigationController) {
_navViewH = 44;
if (parentController.navigationController.navigationBar.isTranslucent) {
originY = 64;
} else {
originY = 0;
}
} else {
_navViewH = 64;
}
self.navView.frame = CGRectMake(0, originY, kScreen_W, _navViewH);
self.collectionView.frame = CGRectMake(0, _navViewH + originY, kScreen_W, self.view.bounds.size.height - _navViewH - originY);
[self.collectionView reloadData];
}
- (void)setTintColor:(UIColor *)tintColor {
_tintColor = tintColor;
self.navView.backgroundColor = tintColor;
}
- (void)setItemNormalColor:(UIColor *)itemNormalColor {
_itemNormalColor = itemNormalColor;
for (RHNavItemModel * model in _modelArr) {
model.normalColor = itemNormalColor;
}
_navView.itemModelArr = _modelArr;
}
- (void)setItemSelectColor:(UIColor *)itemSelectColor {
_itemSelectColor = itemSelectColor;
for (RHNavItemModel * model in _modelArr) {
model.selectColor = itemSelectColor;
}
_navView.itemModelArr = _modelArr;
}
- (void)setItemFont:(UIFont *)itemFont {
_itemFont = itemFont;
for (RHNavItemModel * model in _modelArr) {
model.titleFont = _itemFont;
}
_navView.itemModelArr = _modelArr;
}
@end
OK诡必,到此就封裝結(jié)束了奢方,接下來(lái)就是使用了,使用是非常的簡(jiǎn)單爸舒,只需要在需求的VC里邊通過(guò)構(gòu)造方法創(chuàng)建該控制器蟋字,并設(shè)置父VC為需求的VC即可。這里就只給大家展示一下在ViewController
中的實(shí)現(xiàn)如下:
#import "ViewController.h"
#import "RHNavController.h"
#import "FirstViewController.h"
#import "SecondViewController.h"
#import "ThirdViewController.h"
#import "FourthViewController.h"
#import "FifthViewController.h"
#import "SixthViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"首頁(yè)";
[self setNavController];
}
- (void)setNavController {
FirstViewController * first = [[FirstViewController alloc] init];
SecondViewController * second = [[SecondViewController alloc] init];
ThirdViewController * third = [[ThirdViewController alloc] init];
FourthViewController * fourth = [[FourthViewController alloc] init];
FifthViewController * fifth = [[FifthViewController alloc] init];
SixthViewController * sixth = [[SixthViewController alloc] init];
NSArray * controllerArr = @[first, second, third, fourth, fifth, sixth];
NSArray * titleArr = @[@"first", @"second", @"third", @"fourth", @"fifth", @"sixth"];
RHNavController * nav = [[RHNavController alloc] initWithControllers:controllerArr itemTitles:titleArr];
// nav.tintColor = [UIColor lightGrayColor];
// nav.itemNormalColor = [UIColor whiteColor];
// nav.itemSelectColor = [UIColor redColor];
// nav.itemFont = [UIFont systemFontOfSize:17];
nav.parentController = self;
}
@end
總結(jié)該控件的好處就是:所有界面都是獨(dú)立的扭勉,可以在相應(yīng)的vc里邊實(shí)現(xiàn)不同的布局愉老。
如果還有什么疑問(wèn)的話可以去下載該控件的demo或者對(duì)我提問(wèn)也可,我會(huì)在看到的第一時(shí)間回復(fù)剖效。下載地址:https://github.com/guorenhao/RHNavController
最后嫉入,還是希望能夠幫助到有需要的猿友們,愿我們能夠共同學(xué)習(xí)進(jìn)步璧尸,在開(kāi)發(fā)的道路上越走越遠(yuǎn)咒林。謝謝!