ios 顶部tab滑动实现_iOS导航栏下滑动菜单

90 阅读 0 评论 60 点赞

我是靠谱客的博主朴实小刺猬，最近开发中收集的这篇文章主要介绍ios 顶部tab滑动实现_iOS导航栏下滑动菜单，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在我们项目中经常会遇到这样的需求，下面是实现过程:

UIParameter.h中：

#ifndef UIParameter_h

#define UIParameter_h

//全屏宽和高大小

#define FUll_VIEW_WIDTH ([[UIScreen mainScreen] bounds].size.width)

#define FUll_VIEW_HEIGHT ([[UIScreen mainScreen] bounds].size.height)

#define FUll_CONTENT_HEIGHT FUll_VIEW_HEIGHT - 64 - 49

//十六进制颜色值

#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

#define PageBtn .0675 * FUll_VIEW_HEIGHT //6s下高度45

//tabbar的高度

#define TabbarHeight 49

//TopTab相关参数

#define LeftLength .6 * 45 //左侧的视图长度 20 / 45

#define LeftX .12 * self.frame.size.width //左侧视图的X 20 / 375

#define TotalY .015 * FUll_VIEW_HEIGHT //两边图片的Y 10 / 45

#define TotalYPlus .009 * FUll_VIEW_HEIGHT //右侧图片的高度调节

#define TitleWidth .4 * FUll_VIEW_WIDTH / 2 //标题的宽度 55 / 375

#define RightImageWidth .085 * FUll_VIEW_WIDTH //右侧图片宽度

#define RightImageHeight .024 * FUll_VIEW_HEIGHT //右侧图片高度

#define RightTitleWidth .06 * FUll_VIEW_WIDTH //右侧文字宽度

#define RightTitleHeight .021 * FUll_VIEW_HEIGHT //右侧文字高度

#define RightTitleY 0.0015 * FUll_VIEW_HEIGHT //右侧文字Y

#define RightTitleX 0.015 * FUll_VIEW_WIDTH //右侧文字X

#define LinbottomWidth (132.0/375)*FUll_VIEW_WIDTH //下面红线的宽度

#define More5LineWidth FUll_VIEW_WIDTH / 5.0 //超过5个标题的宽度

#endif /* UIParameter_h */

HJTBaseView.h中：

#import

#import "TopTabView.h"

@interface HJTBaseView : UIView

@property (strong, nonatomic) UIScrollView *scrollView;

@property (assign, nonatomic) NSInteger currentPage; /**< 页码 **/

@property (strong, nonatomic) UIScrollView *topTab; /**< 顶部tab **/

@property (strong, nonatomic) NSArray *titleArray; /**< 标题 **/

- (instancetype)initWithFrame:(CGRect)frame WithSelectColor:(UIColor *)selectColor WithUnselectorColor:(UIColor *)unselectColor WithUnderLineColor:(UIColor *)underlineColor;

@end

HJTBaseView.m中：

#import "HJTBaseView.h"

#import "TopTabView.h"

#import "UIParameter.h"

@interface HJTBaseView ()

@end

@implementation HJTBaseView {

UIView *lineBottom;

UIView *topTabBottomLine;

NSMutableArray *btnArray;

NSArray *titlesArray; /**< 标题 **/

NSInteger arrayCount; /**< topTab数量 **/

UIColor *selectBtn;

UIColor *unselectBtn;

UIColor *underline;

}

- (instancetype)initWithFrame:(CGRect)frame WithSelectColor:(UIColor *)selectColor WithUnselectorColor:(UIColor *)unselectColor WithUnderLineColor:(UIColor *)underlineColor

{

self = [super initWithFrame:frame];

if (self) {

if ([selectColor isKindOfClass:[UIColor class]]) {

selectBtn = selectColor;

}

if ([unselectColor isKindOfClass:[UIColor class]]) {

unselectBtn = unselectColor;

}

if ([underlineColor isKindOfClass:[UIColor class]]) {

underline = underlineColor;

}

return self;

}

#pragma mark - SetMethod

- (void)setTitleArray:(NSArray *)titleArray {

titlesArray = titleArray;

arrayCount = titleArray.count;

self.topTab.frame = CGRectMake(0, 0, FUll_VIEW_WIDTH, PageBtn);

self.scrollView.frame = CGRectMake(0, PageBtn, FUll_VIEW_WIDTH, FUll_VIEW_HEIGHT - PageBtn - TabbarHeight);

[self addSubview:self.topTab];

[self addSubview:self.scrollView];

}

#pragma mark - GetMethod

- (UIScrollView *)scrollView {

if (!_scrollView) {

_scrollView = [[UIScrollView alloc] init];

_scrollView.delegate = self;

_scrollView.tag = 318;

_scrollView.backgroundColor = UIColorFromRGB(0xfafafa);

_scrollView.contentSize = CGSizeMake(FUll_VIEW_WIDTH * titlesArray.count, 0);

_scrollView.pagingEnabled = YES;

_scrollView.showsHorizontalScrollIndicator = NO;

_scrollView.alwaysBounceHorizontal = YES;

}

return _scrollView;

}

- (UIScrollView *)topTab {

if (!_topTab) {

_topTab = [[UIScrollView alloc] init];

_topTab.delegate = self;

_topTab.tag = 917;

_topTab.scrollEnabled = YES;

_topTab.alwaysBounceHorizontal = YES;

_topTab.showsHorizontalScrollIndicator = NO;

CGFloat additionCount = 0;

if (arrayCount > 5) {

additionCount = (arrayCount - 5.0) / 5.0;

}

_topTab.contentSize = CGSizeMake((1 + additionCount) * FUll_VIEW_WIDTH, 0);

btnArray = [NSMutableArray array];

for (NSInteger i = 0; i < titlesArray.count; i++) {

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];

button.tag = i;

button.titleLabel.font = [UIFont systemFontOfSize:14];

if ([titlesArray[i] isKindOfClass:[NSString class]]) {

[button setTitle:titlesArray[i] forState:UIControlStateNormal];

}else {

NSLog(@"您所提供的标题%li格式不正确。 Your title%li not fit for topTab,please correct it to NSString!",(long)i + 1,(long)i + 1);

}

if (titlesArray.count > 5) {

button.frame = CGRectMake(FUll_VIEW_WIDTH / 5 * i, 0, FUll_VIEW_WIDTH / 5, PageBtn);

}else {

button.frame = CGRectMake(FUll_VIEW_WIDTH / titlesArray.count * i, 0, FUll_VIEW_WIDTH / titlesArray.count, PageBtn);

}

[_topTab addSubview:button];

[button addTarget:self action:@selector(touchAction:) forControlEvents:UIControlEventTouchUpInside];

[btnArray addObject:button];

if (i == 0) {

if (selectBtn) {

[button setTitleColor:selectBtn forState:UIControlStateNormal];

}else {

[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

}

[UIView animateWithDuration:0.3 animations:^{

button.transform = CGAffineTransformMakeScale(1.15, 1.15);

}];

} else {

if (unselectBtn) {

[button setTitleColor:unselectBtn forState:UIControlStateNormal];

}else {

[button setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];

}

//创建tabTop下方总览线

topTabBottomLine = [UIView new];

topTabBottomLine.backgroundColor = UIColorFromRGB(0xcecece);

[_topTab addSubview:topTabBottomLine];

//创建选中移动线

lineBottom = [UIView new];

if (underline) {

lineBottom.backgroundColor = underline;

}else {

lineBottom.backgroundColor = UIColorFromRGB(0xff6262);

}

[_topTab addSubview:lineBottom];

}

return _topTab;

}

#pragma mark - BtnMethod

- (void)touchAction:(UIButton *)button {

[_scrollView setContentOffset:CGPointMake(FUll_VIEW_WIDTH * button.tag, 0) animated:YES];

self.currentPage = (FUll_VIEW_WIDTH * button.tag + FUll_VIEW_WIDTH / 2) / FUll_VIEW_WIDTH;

}

#pragma mark - UIScrollViewDelegate

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

if (scrollView.tag == 318) {

self.currentPage = (NSInteger)((scrollView.contentOffset.x + FUll_VIEW_WIDTH / 2) / FUll_VIEW_WIDTH);

}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

if (scrollView.tag == 318) {

NSInteger yourPage = (NSInteger)((scrollView.contentOffset.x + FUll_VIEW_WIDTH / 2) / FUll_VIEW_WIDTH);

CGFloat additionCount = 0;

CGFloat yourCount = 1.0 / arrayCount;

if (arrayCount > 5) {

additionCount = (arrayCount - 5.0) / 5.0;

yourCount = 1.0 / 5.0;

lineBottom.frame = CGRectMake(scrollView.contentOffset.x / 5, PageBtn - 2, yourCount * FUll_VIEW_WIDTH, 1);

}else {

lineBottom.frame = CGRectMake(scrollView.contentOffset.x / arrayCount, PageBtn - 2, yourCount * FUll_VIEW_WIDTH, 1);

}

for (NSInteger i = 0; i < btnArray.count; i++) {

if (unselectBtn) {

[btnArray[i] setTitleColor:unselectBtn forState:UIControlStateNormal];

}else {

[btnArray[i] setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];

}

UIButton *changeButton = btnArray[i];

[UIView animateWithDuration:0.3 animations:^{

changeButton.transform = CGAffineTransformMakeScale(1, 1);

}];

}

if (selectBtn) {

[btnArray[yourPage] setTitleColor:selectBtn forState:UIControlStateNormal];

}else {

[btnArray[yourPage] setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

}

UIButton *changeButton = btnArray[yourPage];

[UIView animateWithDuration:0.3 animations:^{

changeButton.transform = CGAffineTransformMakeScale(1.15, 1.15);

}];

}

#pragma mark - LayOutSubViews

- (void)layoutSubviews {

[super layoutSubviews];

[self initUI];

}

- (void)initUI {

CGFloat yourCount = 1.0 / arrayCount;

CGFloat additionCount = 0;

if (arrayCount > 5) {

additionCount = (arrayCount - 5.0) / 5.0;

yourCount = 1.0 / 5.0;

}

lineBottom.frame = CGRectMake(0, PageBtn - 2,yourCount * FUll_VIEW_WIDTH, 2);

topTabBottomLine.frame = CGRectMake(0, PageBtn - 1, (1 + additionCount) * FUll_VIEW_WIDTH, 1);

}

@end

HJTPagerView.h中：

#import

@interface HJTPagerView : UIView

- (instancetype)initWithTitles:(NSArray *)titles WithVCs:(NSArray *)childVCs WithColorArrays:(NSArray *)colors;

@property (strong, nonatomic) UIColor *selectColor; /**< 选中时的颜色 **/

@property (strong, nonatomic) UIColor *unselectColor; /**< 未选中时的颜色 **/

@property (strong, nonatomic) UIColor *underlineColor; /**< 下划线的颜色 **/

@end

HJTPagerView.m中:

#import "HJTPagerView.h"

#import "UIParameter.h"

#import "HJTBaseView.h"

#define MaxNums 10

@implementation HJTPagerView

{

HJTBaseView *pagerView;

NSArray *myArray;

NSArray *classArray;

NSArray *colorArray;

BOOL viewAlloc[MaxNums];

BOOL fontChangeColor;

}

- (instancetype)initWithTitles:(NSArray *)titles WithVCs:(NSArray *)childVCs WithColorArrays:(NSArray *)colors {

if (self = [super init]) {

//Need You Edit,title for the toptabbar

self.frame = CGRectMake(0, 0, FUll_VIEW_WIDTH, FUll_CONTENT_HEIGHT);

myArray = titles;

classArray = childVCs;

colorArray = colors;

[self createPagerView:myArray WithVCs:classArray WithColors:colorArray];

}

return self;

}

#pragma mark - CreateView

- (void)createPagerView:(NSArray *)titles WithVCs:(NSArray *)childVCs WithColors:(NSArray *)colors {

//No Need to edit

if (colors.count > 0) {

for (NSInteger i = 0; i < colors.count; i++) {

switch (i) {

case 0:

_selectColor = colors[0];

break;

case 1:

_unselectColor = colors[1];

break;

case 2:

_underlineColor = colors[2];

break;

default:

break;

}

if (titles.count > 0 && childVCs.count > 0) {

pagerView = [[HJTBaseView alloc] initWithFrame:CGRectMake(0, 0, FUll_VIEW_WIDTH, FUll_CONTENT_HEIGHT) WithSelectColor:_selectColor WithUnselectorColor:_unselectColor WithUnderLineColor:_underlineColor];

pagerView.titleArray = myArray;

[pagerView addObserver:self forKeyPath:@"currentPage" options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew context:nil];

[self addSubview:pagerView];

//First ViewController present to the screen

if (classArray.count > 0 && myArray.count > 0) {

NSString *className = classArray[0];

Class class = NSClassFromString(className);

if (class) {

UIViewController *ctrl = class.new;

ctrl.view.frame = CGRectMake(FUll_VIEW_WIDTH * 0, 0, FUll_VIEW_WIDTH, FUll_CONTENT_HEIGHT - PageBtn);

[pagerView.scrollView addSubview:ctrl.view];

viewAlloc[0] = YES;

}

}else {

}

#pragma mark - KVO

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {

if ([keyPath isEqualToString:@"currentPage"]) {

NSInteger page = [change[@"new"] integerValue];

if (myArray.count > 5) {

CGFloat topTabOffsetX = 0;

if (page >= 2) {

if (page <= myArray.count - 3) {

topTabOffsetX = (page - 2) * More5LineWidth;

}

else {

if (page == myArray.count - 2) {

topTabOffsetX = (page - 3) * More5LineWidth;

}else {

topTabOffsetX = (page - 4) * More5LineWidth;

}

else {

if (page == 1) {

topTabOffsetX = 0 * More5LineWidth;

}else {

topTabOffsetX = page * More5LineWidth;

}

[pagerView.topTab setContentOffset:CGPointMake(topTabOffsetX, 0) animated:YES];

}

for (NSInteger i = 0; i < myArray.count; i++) {

if (page == i && i <= classArray.count - 1) {

NSString *className = classArray[i];

Class class = NSClassFromString(className);

if (class && viewAlloc[i] == NO) {

UIViewController *ctrl = class.new;

ctrl.view.frame = CGRectMake(FUll_VIEW_WIDTH * i, 0, FUll_VIEW_WIDTH, FUll_CONTENT_HEIGHT - PageBtn);

[pagerView.scrollView addSubview:ctrl.view];

viewAlloc[i] = YES;

}else if (!class) {

}

}else if (page == i && i > classArray.count - 1) {

}

- (void)dealloc {

[pagerView removeObserver:self forKeyPath:@"currentPage"];

}

@end

TopTabView.h中：

#import

@interface TopTabView : UIView

- (instancetype)initWithFrame:(CGRect)frame withTitle:(NSString *)title withTitleColor:(UIColor *)titleColor withUnselectedImage:(NSString *)unselectedImage withSelectedImage:(NSString *)selectedImage ;

@property (nonatomic, strong) UIImageView *unselectedImage; /**< 未被选中时的图片 **/

@property (nonatomic, strong) UIImageView *selectedImage; /**< 被选中时的图片 **/

@property (nonatomic, strong) UILabel *title; /**< 按钮中间的标题 **/

@end

TopTabView.m中：

#import "TopTabView.h"

#import "UIParameter.h"

@implementation TopTabView {

CGFloat pageBtnHeight;

}

if (self = [super initWithFrame:frame]) {

self.frame = frame;

//传入的title内容和颜色

self.title.text = title;

self.title.textColor = titleColor;

//传入选中和未选中的图片

self.unselectedImage.image = [UIImage imageNamed:unselectedImage];

self.selectedImage.image = [UIImage imageNamed:selectedImage];

[self addSubview:self.unselectedImage];

[self addSubview:self.selectedImage];

[self addSubview:self.title];

}

return self;

}

- (UIImageView *)unselectedImage {

if (!_unselectedImage) {

_unselectedImage = [[UIImageView alloc] init];

}

return _unselectedImage;

}

- (UIImageView *)selectedImage {

if (!_selectedImage) {

_selectedImage = [[UIImageView alloc] init];

}

return _selectedImage;

}

- (UILabel *)title {

if (!_title) {

_title = [[UILabel alloc] init];

_title.font = [UIFont systemFontOfSize:15];

_title.textAlignment = NSTextAlignmentCenter;

}

return _title;

}

- (void)layoutSubviews {

[super layoutSubviews];

[self initUI];

}

- (void)initUI {

_unselectedImage.frame = CGRectMake((.12 * self.frame.size.width), TotalY, LeftLength, LeftLength);

_selectedImage.frame = CGRectMake((.12 * self.frame.size.width), TotalY, LeftLength, LeftLength);

_title.frame = CGRectMake((.12 * self.frame.size.width) + LeftLength + 4, 0, TitleWidth, PageBtn);

}

@end

举例：

比如你下面有3个选择的菜单，我需要在一个视图控制器中这样写：

#import "ViewController.h"

#import "UIParameter.h"

#import "HJTPagerView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

self.title = @"hello";

self.navigationController.navigationBar.translucent = NO;

NSArray *titleArray = @[

@"第一个",

@"第二个",

@"第三个",

];

NSArray *vcsArray = @[@"oneViewController",@"twoViewController",@"threeViewController"];

NSArray *colorArray = @[

[UIColor brownColor], /**< 选中的标题颜色 Title SelectColor **/

[UIColor grayColor], /**< 未选中的标题颜色 Title UnselectColor **/

[UIColor redColor], /**< 下划线颜色 Underline Color **/

];

HJTPagerView *hjtPagerView = [[HJTPagerView alloc] initWithTitles:titleArray WithVCs:vcsArray WithColorArrays:colorArray];

[self.view addSubview:hjtPagerView];

}

@end

最后

以上就是朴实小刺猬为你收集整理的ios 顶部tab滑动实现_iOS导航栏下滑动菜单的全部内容，希望文章能够帮你解决ios 顶部tab滑动实现_iOS导航栏下滑动菜单所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：ios 顶部tab滑动实现
浏览次数：90 次浏览
发布日期：2023-10-07 05:36:05
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzokfw_13_z_2_1.html

ios 顶部tab滑动实现_iOS导航栏下滑动菜单

概述

最后

评论列表共有 0 条评论

发表评论取消回复

ios 顶部tab滑动实现_iOS导航栏下滑动菜单

概述

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复