iOS开发-自定制滑动容器控制器RHNavController

蓝天下的静湖 發表於 2020-5-25 12:53:00

iOS开发-自定制滑动容器控制器RHNavController

<div>
前言：转眼间将近两个月没有更新了，今天来给大家讲解一个封装的简单容器控制器RHNavController，在APP中应用的还是很多的。废话不多说，大家先来看图：
 
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="373" data-height="684"><img src="//upload-images.jianshu.io/upload_images/3015321-ae63366be1f372b3.gif?imageMogr2/auto-orient/strip|imageView2/2/w/373/format/webp"></div>

</div>
<div class="image-caption">RHNavController.gif</div>

</div>
原理：标题使用<code>UIButton</code>添加点击事件，下方页面使用<code>UICollectionView</code>实现滑动的控制器。点击上方标题，通过代理回调改变<code>UICollectionView</code>的<code>contentOffset</code>来实现页面的自动左右切换，手动滑动页面改变当前选中的标题实现页面也标题同步。
下面，按照图层从上到下来给大家详细讲解各个类的实现。 
首先是标题按钮，定制一个继承与<code>UIButton</code>的子类，通过重写构造方法快速实现各个属性的设置，<code>.m</code>实现如下：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-objectivec"><code class="language-objectivec">#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
</code></pre>
</div>
在此使用了一个<code>model</code>来存储了各个属性，方便对应管理。<code>model.h</code>如下：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-objectivec"><code class="language-objectivec">#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;

// 构造方法快速创建model
- (instancetype)initWithTitle:(NSString *)title font:(UIFont *)font normalColor:(UIColor *)normalColor selectColor:(UIColor *)selectColor;
@end
</code></pre>
</div>
接下来是上方标题按钮所在<code>view</code>的实现，<code>.h</code>文件如下：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-objectivec"><code class="language-objectivec">#import <UIKit/UIKit.h>
#import "RHNavItem.h"

#define kScreen_W .bounds.size.width
#define kScreen_H .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
</code></pre>
</div>
在此定义了回调的代理及重写了构造方法以快速创建对象。下面是在<code>.m</code>文件中的实现：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-objectivec"><code class="language-objectivec">#import "RHNavView.h"

#define BtnTag 2016
#define SVHeight 44 // scrollview高度
#define LineHeight 2 // 移动线高度
#define ItemHeight 41 // 按钮高度
#define LineOriginYSVHeight - 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 = ;
 [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];
;
[self addSubview:self.lab_lineH];
RHNavItemModel * mod = _modelArr.firstObject;
_lab_line.backgroundColor = mod.selectColor;

if (_modelArr.count == 1) {

 RHNavItemModel * model = _modelArr.firstObject;
 RHNavItem * item = [ initWithFrame:CGRectMake((kScreen_W - model.itemWidth)/2, 0, model.itemWidth, ItemHeight) itemModel:model];
 [self itemClick: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;
 RHNavItem * item = [ initWithFrame:CGRectMake(i * (kScreen_W/2), 0, kScreen_W/2, ItemHeight) itemModel:model];
 item.tag = BtnTag + i;
 ;
 ;
 [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;
 model.itemWidth += (kScreen_W - totalItemWidth)/_modelArr.count;
 }

 float originX = 0;

 for (int i = 0; i < _modelArr.count; i++) {

 RHNavItemModel * model = _modelArr;

 RHNavItem * item = [ initWithFrame:CGRectMake(originX, 0, model.itemWidth, ItemHeight) itemModel:model];
 item.tag = BtnTag + i;
 ;
 ;
 [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;
 RHNavItem * item = [ initWithFrame:CGRectMake(originX, 0, model.itemWidth, ItemHeight) itemModel:model];
 item.tag = BtnTag + i;
 ;
 ;
 [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方法实现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;
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) {

 ;
 return;
}

if (item.center.x - kScreen_W/2 > 0 && _scrollView.contentSize.width - item.center.x > kScreen_W/2) {

 ;
 return;
}

if (_scrollView.contentSize.width - item.center.x <= kScreen_W/2) {

 ;
 return;
}
}

#pragma mark - setter and getter

- (UIScrollView *)scrollView {

if (!_scrollView) {

 UIScrollView * scrollView = [ init];

 _scrollView = scrollView;
}
return _scrollView;
}

- (UILabel *)lab_line {

if (!_lab_line) {

 UILabel * label = [ init];
 _lab_line = label;
}
return _lab_line;
}

- (UILabel *)lab_lineH {

if (!_lab_lineH) {

 UILabel * label = [ init];
 label.backgroundColor = ;
 _lab_lineH = label;
}
return _lab_lineH;
}

- (NSMutableArray *)modelArr {

if (!_modelArr) {

 _modelArr = [ init];
}
return _modelArr;
}

- (NSMutableArray *)itemArr {

if (!_itemArr) {

 _itemArr = [ 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;
 RHNavItemModel * model = _itemModelArr;
 item.titleLabel.font = model.titleFont;
 ;
 ;
 if (i == 0) {

 _lab_line.backgroundColor = model.selectColor;
 }
}
}
@end
</code></pre>
</div>
如果看完了这个类，可以看出这里对标题的个数对应不同的布局做了简单的区分，把所有代码都拿过来了，有点繁琐，还请不要介意。
下面是关键了，是下方滑动界面与上方标题栏相互关联的实现，这里用到了<code>UIViewController</code>来实现，为了能够更清晰的给大家展示如何封装，还请大家不要觉得代码繁琐，<code>.h</code>文件如下：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-objectivec"><code class="language-objectivec">#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 个数必须一致
- (instancetype)initWithControllers:(NSArray<UIViewController *> *)controllers itemTitles:(NSArray<NSString *> *)titles;
@end
</code></pre>
</div>
<code>.m</code>文件的实现：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-objectivec"><code class="language-objectivec">#import "RHNavController.h"
#import "RHNavView.h"

// 标题默认未选中颜色
#define NORMAL_COLOR
// 标题默认选中颜色
#define SELECT_COLOR

#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 = [ initWithTitle:titles font: 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;
 [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;
;
_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 = ;
if (indexPath.row < self.controllerArr.count) {

 UIViewController * controller = self.controllerArr;
 controller.view.frame = cell.contentView.bounds;
 ;
 ;
}
return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {

return CGSizeMake(kScreen_W, self.view.bounds.size.height - _navViewH);
}

//翻页中，是否手动翻页都会触发
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

if (_isDrag) {

 if (scrollView == _collectionView) {

 NSInteger selectIndex = (_collectionView.contentOffset.x + kScreen_W / 2) / kScreen_W;
 _navView.selectedIndex = selectIndex;
 _selectedIndex = selectIndex;
 }
}
}
//开始翻页，只有手动开始翻页才会触发的方法
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {

_isDrag = YES;
}

#pragma mark - setter and getter

- (UICollectionView *)collectionView {

if (!_collectionView) {

 UICollectionViewFlowLayout * flowLayout = [ init];
 flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
 //两列之间的距离
 flowLayout.minimumInteritemSpacing = 0;
 //两行之间的距离
 flowLayout.minimumLineSpacing = 0;

 UICollectionView * collection = [ initWithFrame:CGRectZero collectionViewLayout:flowLayout];
 collection.backgroundColor = ;
 collection.dataSource = self;
 collection.delegate = self;
 //设置翻页
 collection.pagingEnabled = YES;
 //反弹
 collection.bounces = NO;
 //水平滚动条
 collection.showsHorizontalScrollIndicator = NO;
 forCellWithReuseIdentifier:RHNAV_COLLECTION_CELL];
 _collectionView = collection;
}
return _collectionView;
}

- (RHNavView *)navView {

if (!_navView) {

 RHNavView * navView = [ initWithFrame:CGRectZero itemModels:self.modelArr];
 navView.delegate = self;
 _navView = navView;
}
return _navView;
}

- (NSMutableArray *)controllerArr {

if (!_controllerArr) {

 _controllerArr = [ init];
}
return _controllerArr;
}

- (NSMutableArray *)modelArr {

if (!_modelArr) {

 _modelArr = [ init];
}
return _modelArr;
}

- (void)setParentController:(UIViewController *)parentController {

parentController.automaticallyAdjustsScrollViewInsets = NO;
;
;
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
</code></pre>
</div>
OK，到此就封装结束了，接下来就是使用了，使用是非常的简单，只需要在需求的VC里边通过构造方法创建该控制器，并设置父VC为需求的VC即可。这里就只给大家展示一下在<code>ViewController</code>中的实现如下：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-objectivec"><code class="language-objectivec">#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 = [ init];
SecondViewController * second = [ init];
ThirdViewController * third = [ init];
FourthViewController * fourth = [ init];
FifthViewController * fifth = [ init];
SixthViewController * sixth = [ init];

NSArray * controllerArr = @;
NSArray * titleArr = @[@"first", @"second", @"third", @"fourth", @"fifth", @"sixth"];
RHNavController * nav = [ initWithControllers:controllerArr itemTitles:titleArr];
// nav.tintColor = ;
// nav.itemNormalColor = ;
// nav.itemSelectColor = ;
// nav.itemFont = ;
nav.parentController = self;
}
@end
</code></pre>
</div>
总结该控件的好处就是：所有界面都是独立的，可以在相应的vc里边实现不同的布局。 
如果还有什么疑问的话可以去下载该控件的demo或者对我提问也可，我会在看到的第一时间回复。
作为一个开发者，有一个学习的氛围跟一个交流圈子特别重要，这是一个我的iOS交流群：651612063 进群密码111，分享BAT,阿里面试题、面试经验，讨论技术， 大家一起交流学习成长！进群领取iOS面试题。
<img src="https://img2020.cnblogs.com/blog/2038694/202005/2038694-20200525125638534-584279184.png">
 
 
 

</div>
 
来源：https://www.cnblogs.com/ajjx1366/p/12956293.html

頁: [1]

琼殿技术论坛's Archiver

iOS开发-自定制滑动容器控制器RHNavController