iOS開發(fā)-自定制滑動容器控制器RHNavController

窗外的雨滴.jpg

前言：轉(zhuǎn)眼間將近兩個月沒有更新了，今天來給大家講解一個封裝的簡單容器控制器RHNavController，在APP中應用的還是很多的。廢話不多說，大家先來看圖：


RHNavController.gif

原理：標題使用UIButton添加點擊事件，下方頁面使用UICollectionView實現(xiàn)滑動的控制器。點擊上方標題，通過代理回調(diào)改變UICollectionView的contentOffset來實現(xiàn)頁面的自動左右切換，手動滑動頁面改變當前選中的標題實現(xiàn)頁面也標題同步。

下面，按照圖層從上到下來給大家詳細講解各個類的實現(xiàn)。
首先是標題按鈕，定制一個繼承與UIButton的子類，通過重寫構(gòu)造方法快速實現(xiàn)各個屬性的設置，.m實現(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

在此使用了一個model來存儲了各個屬性，方便對應管理。model.h如下：

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface RHNavItemModel : NSObject

// 標題
@property (nonatomic, copy) NSString * title;
// 標題文字寬度
@property (nonatomic, assign) CGFloat titleWidth;
// 標題對應的按鈕寬度
@property (nonatomic, assign) CGFloat itemWidth;
// 標題下方線寬度
@property (nonatomic, assign) CGFloat lineWidth;
// 標題字體大小
@property (nonatomic, strong) UIFont * titleFont;
// 標題未選中顏色
@property (nonatomic, strong) UIColor * normalColor;
// 標題選中顏色
@property (nonatomic, strong) UIColor * selectColor;

// 構(gòu)造方法快速創(chuàng)建model
- (instancetype)initWithTitle:(NSString *)title font:(UIFont *)font normalColor:(UIColor *)normalColor selectColor:(UIColor *)selectColor;
@end

接下來是上方標題按鈕所在view的實現(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)的代理及重寫了構(gòu)造方法以快速創(chuàng)建對象。下面是在.m文件中的實現(xiàn)：

#import "RHNavView.h"

#define BtnTag       2016
#define SVHeight     44     // scrollview高度
#define LineHeight   2      // 移動線高度
#define ItemHeight   41     // 按鈕高度
#define LineOriginY  SVHeight - LineHeight - 1  // 移動線 y 點
@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 - 重寫屬性set方法  實現(xiàn)item自動切換

- (void)setSelectedIndex:(NSInteger)selectedIndex {
    
    RHNavItem * item = [self viewWithTag:BtnTag + selectedIndex];
    [self setScrollViewContentOffsetWithItem:item];
}

#pragma mark - 設置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 判斷如果是當前點中的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

如果看完了這個類，可以看出這里對標題的個數(shù)對應不同的布局做了簡單的區(qū)分，把所有代碼都拿過來了，有點繁瑣，還請不要介意。

下面是關(guān)鍵了，是下方滑動界面與上方標題欄相互關(guān)聯(lián)的實現(xiàn)，這里用到了UIViewController來實現(xiàn)，為了能夠更清晰的給大家展示如何封裝，還請大家不要覺得代碼繁瑣，.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;
// 當前選中的下標
@property (nonatomic, assign, readonly) NSInteger selectedIndex;

// vc 與 title 個數(shù)必須一致
- (instancetype)initWithControllers:(NSArray<UIViewController *> *)controllers itemTitles:(NSArray<NSString *> *)titles;
@end

.m文件的實現(xiàn)：

#import "RHNavController.h"
#import "RHNavView.h"

// 標題默認未選中顏色
#define NORMAL_COLOR [UIColor colorWithRed:77/255.0 green:77/255.0 blue:77/255.0 alpha:1.0]
// 標題默認選中顏色
#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;
// 是否手動拖拽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);
}

//翻頁中，是否手動翻頁都會觸發(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;
        }
    }
}
//開始翻頁，只有手動開始翻頁才會觸發(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;
        //設置翻頁
        collection.pagingEnabled = YES;
        //反彈
        collection.bounces = NO;
        //水平滾動條
        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é)束了，接下來就是使用了，使用是非常的簡單，只需要在需求的VC里邊通過構(gòu)造方法創(chuàng)建該控制器，并設置父VC為需求的VC即可。這里就只給大家展示一下在ViewController中的實現(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 = @"首頁";
    [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é)該控件的好處就是：所有界面都是獨立的，可以在相應的vc里邊實現(xiàn)不同的布局。
如果還有什么疑問的話可以去下載該控件的demo或者對我提問也可，我會在看到的第一時間回復。下載地址：https://github.com/guorenhao/RHNavController

最后，還是希望能夠幫助到有需要的猿友們，愿我們能夠共同學習進步，在開發(fā)的道路上越走越遠。謝謝！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容