ios-滚动导航条页面

//  ViewController.m

#import "ViewController.h"
#import "ScrollSliderView.h"
@interface ViewController ()
{
    NSArray *titleArray;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
     NSArray *arr = @[@"家电",@"生鲜",@"小饰品",@"Apple全场",@"水果",@"疯狂折扣中",@"Hot美味零食",@"分期优惠",@"特卖专柜衣服",@"日常用品大集合",@"母婴海外"];
    self.view.backgroundColor=[UIColor orangeColor];
    self.automaticallyAdjustsScrollViewInsets=NO;
    ScrollSliderView *scrollSliderView = [[ScrollSliderView alloc]initWithController:self withTitleArray:arr];
    [self.view addSubview:scrollSliderView];
}
//
//  ScrollSliderView.h

#import <UIKit/UIKit.h>

@interface ScrollSliderView : UIView<UIScrollViewDelegate>
#define VIEWWIDTH [UIScreen mainScreen].bounds.size.width
#define VIEWHEIGHT [UIScreen mainScreen].bounds.size.height
#define RAN_COLOR(CUS_RGB) [UIColor colorWithRed:((float)((CUS_RGB & 0xFF0000) >> 16))/255.0 green:((float)((CUS_RGB & 0xFF00) >> 8))/255.0 blue:((float)(CUS_RGB & 0xFF))/255.0 alpha:1.0f]
/*
 *
 *初始化数据
 */
-(id)initWithController:(UIViewController *)controller withTitleArray:(NSArray *)titleArray;
/*
 *底部ScrollView
 */
@property (nonatomic,strong)UIScrollView *mainScrollView;
/*
 *滑块ScrollView
 */
@property (nonatomic,strong)UIScrollView *sliderScrollView;
/*
 *存放title的数组
 */
@property (nonatomic,copy)NSArray *dataArray;
/*
 *点击或滑动后选中的位置
 */
@property (nonatomic, assign) NSInteger selectIndex;
/*
 *所在的控制器
 */
@property (nonatomic,weak)UIViewController *fatherController;
@end
//
//  ScrollSliderView.m
#import "ScrollSliderView.h"
#import "SubViewController.h"
#import "Cache.h"

@implementation ScrollSliderView
{
    Cache *cache;
}
/*
 *初始化底部ScrollView
 */
-(UIScrollView *)mainScrollView{

    if (!_mainScrollView) {
        _mainScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 100, VIEWWIDTH, VIEWHEIGHT-100)];
        _mainScrollView.bounces = NO;
        _mainScrollView.showsVerticalScrollIndicator = NO;
        _mainScrollView.showsHorizontalScrollIndicator = NO;
        _mainScrollView.pagingEnabled = YES;
        _mainScrollView.backgroundColor = [UIColor lightGrayColor];
        _mainScrollView.delegate = self;
    }

    return _mainScrollView;
}
/*
 *初始化self所有的控件
 */
-(id)initWithController:(UIViewController *)controller withTitleArray:(NSArray *)titleArray
{
    if (self = [super initWithFrame:[UIScreen mainScreen].bounds]) {
        cache = [[Cache alloc]init];
        _dataArray = [NSArray arrayWithArray:titleArray];
        _fatherController = controller;

        [self mainScrollView];
        [self addSubview:_mainScrollView];

        [self creatSliderScrollView:titleArray];
        _mainScrollView.contentSize = CGSizeMake(titleArray.count*VIEWWIDTH, VIEWHEIGHT - 64 - 36);
        SubViewController *subVC = [SubViewController new];
        subVC.index = 0;
        subVC.tilte = _dataArray[0];
        subVC.view.frame = CGRectMake(0,0, VIEWWIDTH,_mainScrollView.frame.size.height);
        subVC.view.backgroundColor = [UIColor colorWithHue:(arc4random() % 256 / 256.0) saturation:(arc4random() % 128 / 256.0) + 0.5 brightness:(arc4random() % 128) + 0.5 alpha:1];
        [_mainScrollView addSubview:subVC.view];
        [controller addChildViewController:subVC];
        [cache addCacheSelectIndex:0];
    }
    return self;

}
/*
 *创建滑块
 */
- (void)creatSliderScrollView:(NSArray *)array{
    _sliderScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0,64, VIEWWIDTH, 36)];
    _sliderScrollView.backgroundColor = [UIColor whiteColor];
    _sliderScrollView.bounces = NO;
    _sliderScrollView.showsHorizontalScrollIndicator = NO;
    _sliderScrollView.showsVerticalScrollIndicator = NO;
    [self addSubview:_sliderScrollView];
    CGFloat spaceWidth = 6;
    CGFloat widthContentSize = 0;
    for (NSInteger i = 0; i < array.count; i++) {
        NSString *titleName = self.dataArray[i];
        NSInteger strWidth = [self sizeforWidthWithString:titleName];
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        UIView *sliderSign = [[UIView alloc]initWithFrame:CGRectMake(spaceWidth + widthContentSize,33,strWidth + 10,2)];
        sliderSign.backgroundColor = RAN_COLOR(0xE43494);
        sliderSign.tag = 10000 + i;
        btn.frame = CGRectMake(spaceWidth+widthContentSize,2,strWidth + 10,32);
        [btn setTitle:titleName forState:UIControlStateNormal];
        [btn setTitleColor:RAN_COLOR(0xE43494) forState:UIControlStateSelected];
        [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        btn.titleLabel.font = [UIFont systemFontOfSize:14];
        [_sliderScrollView addSubview:btn];
        [_sliderScrollView addSubview:sliderSign];
        btn.tag = 20000 + i;
        if (i == 0) {
            btn.selected = YES;
            sliderSign.hidden = NO;
        }else{

            sliderSign.hidden = YES;

        }
        widthContentSize = strWidth+10+spaceWidth+widthContentSize;
        [btn addTarget:self action:@selector(selectIndexTableViewAndCollectionView:) forControlEvents:UIControlEventTouchUpInside];
    }
    self.sliderScrollView.contentSize = CGSizeMake(widthContentSize + 6, 36);
}
/*
 *计算title的长度
 */
-(NSInteger)sizeforWidthWithString:(NSString *)str
{
    NSDictionary *attribute = @{NSFontAttributeName: [UIFont systemFontOfSize:14]};
    CGSize size = [str boundingRectWithSize:CGSizeMake(VIEWWIDTH - 10, 0) options: NSStringDrawingTruncatesLastVisibleLine | NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading attributes:attribute context:nil].size;
    return size.width;
}
/*
 *点击滑块按钮响应事件
 */
- (void)selectIndexTableViewAndCollectionView:(UIButton *)sender{
    //按钮点击 先把所有的按钮都不选中 滑动条View隐藏
    for (NSInteger i = 0; i < _dataArray.count; i++) {
        UIButton *btn = (UIButton *)[self viewWithTag:20000 + i];
        UIView *sliderSign = (UIView *)[self viewWithTag:10000 + i];
        sliderSign.hidden = YES;
        btn.selected = NO;
    }
    NSInteger index = sender.tag - 20000;
    self.selectIndex = index;
    //选中 为选中状态
    sender.selected = YES;
    UIView *View = (UIView *)[self viewWithTag:index + 10000];
    View.hidden = NO;

    UIButton *btnRight = [_sliderScrollView viewWithTag:sender.tag + 1];
    UIButton *btnLeft = [_sliderScrollView viewWithTag:sender.tag - 1];
    //分页 显示哪个控制器
    _mainScrollView.contentOffset = CGPointMake(index*VIEWWIDTH,0);
    if ((sender.frame.origin.x + sender.frame.size.width) > VIEWWIDTH - 10){
        if (sender.tag != (20000 + _dataArray.count - 1)) {
            [UIView animateWithDuration:0.3f animations:^{
                self.sliderScrollView.contentOffset = CGPointMake(btnRight.frame.origin.x + btnRight.frame.size.width - VIEWWIDTH, 0);
            }];
        }
    }
    else
    {
        [UIView animateWithDuration:0.3f animations:^{
            self.sliderScrollView.contentOffset = CGPointMake(btnLeft.frame.origin.x, 0);
        }];
    }

    if (![cache hasCacheIndex:_selectIndex]) {
        [self addSubController];
    }
}
/*
 *创建未创建的滑块对应控制器
 */
-(void)addSubController
{
    SubViewController *subVC = [SubViewController new];
    subVC.index = _selectIndex;
    subVC.tilte = _dataArray[_selectIndex];
    [_mainScrollView addSubview:subVC.view];
    subVC.view.frame = CGRectMake(_selectIndex*VIEWWIDTH,0, VIEWWIDTH,_mainScrollView.frame.size.height);
    subVC.view.backgroundColor = [UIColor colorWithHue:(arc4random() % 256 / 256.0) saturation:(arc4random() % 128 / 256.0) + 0.5 brightness:(arc4random() % 128) + 0.5 alpha:1];
    [_mainScrollView addSubview:subVC.view];

    [_fatherController addChildViewController:subVC];
}
/*
 *UIScrollViewDelegate，控制滑动后变化
 */
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    NSInteger index = scrollView.contentOffset.x/VIEWWIDTH;
    _selectIndex = index;
    for (NSInteger i = 0; i < _dataArray.count; i++) {
        UIButton *btn = (UIButton *)[self viewWithTag:20000 + i];
        UIView *downSliderView = (UIView *)[self viewWithTag:10000 + i];
        if (index == i) {
            downSliderView.hidden = NO;
            btn.selected = YES;

        }else{

            downSliderView.hidden = YES;
            btn.selected = NO;
        }

    }
    UIButton *btnRight = [_sliderScrollView viewWithTag:index + 1 + 20000];
    UIButton *btnCenter = [_sliderScrollView viewWithTag:index + 20000];
    UIButton *btnLeft = [_sliderScrollView viewWithTag:index - 1 + 20000];
    //分页 显示哪个控制器
    _mainScrollView.contentOffset = CGPointMake(index * VIEWWIDTH,0);
    if ((btnCenter.frame.origin.x + btnCenter.frame.size.width) > VIEWWIDTH - 10){
        if (btnCenter.tag != (20000 + _dataArray.count - 1)) {
            [UIView animateWithDuration:0.3f animations:^{
                _sliderScrollView.contentOffset = CGPointMake(btnRight.frame.origin.x + btnRight.frame.size.width - VIEWWIDTH, 0);
            }];
        }
    }
    else
    {
        [UIView animateWithDuration:0.3f animations:^{
            _sliderScrollView.contentOffset = CGPointMake(btnLeft.frame.origin.x, 0);
        }];
    }

    if (![cache hasCacheIndex:_selectIndex]) {
        [self addSubController];

    }
}

@end
//  Cache.h

#import <Foundation/Foundation.h>

@interface Cache : NSObject
@property(nonatomic ,strong)NSMutableArray *cacheArray;
- (instancetype)init;
-(void)addCacheSelectIndex:(NSInteger)index;
-(BOOL)hasCacheIndex:(NSInteger)index;

@end
//
//  Cache.m

#import "Cache.h"

@implementation Cache

- (instancetype)init
{
    self = [super init];
    if (self) {
        _cacheArray = [[NSMutableArray alloc]init];
    }
    return self;
}
-(void)addCacheSelectIndex:(NSInteger)index
{
    [_cacheArray addObject:[NSString stringWithFormat:@"%ld",index]];
}

-(BOOL)hasCacheIndex:(NSInteger)index
{
    BOOL hasIndex = [_cacheArray containsObject:[NSString stringWithFormat:@"%ld",index]];
    if (!hasIndex) {
        [self addCacheSelectIndex:index];
    }

    return hasIndex;
}

@end
//
//  SubViewController.h

#import <UIKit/UIKit.h>

@interface SubViewController : UIViewController
@property(nonatomic,assign)NSInteger index;
@property(nonatomic,strong)NSString *tilte;

@end
//
//  SubViewController.m
#import "SubViewController.h"
#define VIEWWIDTH [UIScreen mainScreen].bounds.size.width
#define VIEWHEIGHT [UIScreen mainScreen].bounds.size.height
#define RAN_COLOR(CUS_RGB) [UIColor colorWithRed:((float)((CUS_RGB & 0xFF0000) >> 16))/255.0 green:((float)((CUS_RGB & 0xFF00) >> 8))/255.0 blue:((float)(CUS_RGB & 0xFF))/255.0 alpha:1.0f]

@interface SubViewController ()

@end

@implementation SubViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(100, 100, 200, 50)];
    label.layer.borderColor = [UIColor whiteColor].CGColor;
    label.layer.borderWidth = 1;
    label.text = [NSString stringWithFormat:@"%ld:%@",_index,_tilte];
    label.center = self.view.center;
    label.textColor = [UIColor orangeColor];
    label.font = [UIFont systemFontOfSize:16];
    label.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:label];

}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end
时间： 2024-10-23 11:19:11

ios-滚动导航条页面的相关文章

iOS：导航条滚动透明度随着tableView的滚动而变化

来源:HelloYeah 链接:http://www.jianshu.com/p/b8b70afeda81 下面这个界面有没有觉得很眼熟.打开你手里的App仔细观察,你会发现很多都有实现这个功能.比如美团外卖的首页模块,新浪微博的个人详情页面.要怎么样才能快速的实现这个功能呢!那下面由笔者来告诉你如何三行代码,集成这个功能... 原理介绍: 要想把一个view设计成透明的我们一下子就会想到两种方案,设置view的alpha值为0,或者设置view的backgroundColor为clearCol

Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条

本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也就是手机上,我们页面的宽度并不像PC端那样大,可以显示很长的导航项,但对于我们移动端来说,由于功能的拓展,或者业务的细分,往往导航项也会随之增多,一旦超过移动端在一行的页面显示宽度,那便会出现导航项换行的现象,虽说也有这样布局,但一旦导航项增多到一定程度的时候,我们的页面(首页)将均被导航项霸占,这

navigationcontroller pop回到隐藏导航条页面出现黑块问题

如果隐藏导航条的页面使用无动画模式隐藏导航条 [self.navigationController setNavigationBarHidden:YES animated:NO];在导航pop回来时就会出现黑块问题. 将隐藏导航条设置为动画模式:[self.navigationController setNavigationBarHidden:YES animated:YES]; 就能解决这个问题.

iOS隐藏导航条1px的底部横线

默认情况下会有这条线 第一种方法: UINavigationBar *navigationBar = self.navigationController.navigationBar; // white.png图片自己下载个纯白色的色块,或者自己ps做一个 [navigationBar setBackgroundImage:[UIImage imageNamed:@"white.png"]                    forBarPosition:UIBarPositionAn

【转】iOS隐藏导航条1px的底部横线

默认情况下会有这条线 第一种方法: 1 2 3 4 5 6 UINavigationBar *navigationBar = self.navigationController.navigationBar; // white.png图片自己下载个纯白色的色块,或者自己ps做一个 [navigationBar setBackgroundImage:[UIImage imageNamed:@"white.png"]                    forBarPosition:UIB

iOS开发之自定义SearchBar导航条右侧显示放大镜

ios中导航条SearchBar控件虽然说很好用,但是有的时候控件的样式不能达到我们的需要,比如我们需要导航条的右侧有个放大镜,系统提供的控件没有这样的,这就需要我们自定义一个这样的searchBar了. 1,因为searchBar控件输入的时候和textField想似,所以我们自定义的控件继承与textField,起名字为searchView 我们可以看一下searchView.h里面的内容 1 #import <UIKit/UIKit.h> 2 3 @interface searchVie

H5页面导航跟随页面滚动而联动

项目开发过程中遇到一个主页,实现功能: 需要页面在滚动到导航时导航吸顶: 导航随页面滚动高亮选中:点击导航页面滚动到固定位置: 在导航项过多时导航横向滚动: 最后一个面板底部补白且兼容iphoneX. 页面区域划分: 头部数字显示(在页面上拉后隐藏) 导航部分 面板部分(所有的面板放在一个大div里) 效果如下图:           一:页面在滚动到导航时导航吸顶(sticky粘性布局) <!--头部数字--><div class="head-number">

【iOS开发-22】navigationBar导航条和navigationItem设置：基本搞定导航条上的文字和按钮以及各种跳转

(1)navigationBar导航条可以看做是self.navigationController导航控制器的一个属性,可以直接用点来表示self.navigationController.navigationBar,当然navigationBar自己还有很多属性,比如样式barStyle.背景backgroundColor.frame属性(可以获取宽高这些信息),还可以用setBackgroundImage方法设置背景图片,当然图片多了可以使用clipsToBounds剪裁. (2)但,nav

【AmazeUI】手机版页面的顶部导航条Header与侧边导航栏offCanvas

顶部导航条如果你细心留意下现在的页面,实在是太常见了.这个组件在手机端的页面中,同样可以借助AmazeUI这个前端框架实现.与此同时,可以在导航栏的最右方加一个触发侧边导航栏offCanvas.不要再使用BootStrap那种,一旦点击就大幅度下拉的导航了,反正我个人觉得很蛋疼的.一个导航活活地占据了页面大量位置.这个侧边导航栏offCanvas曾经是php方面的WorkPress的优秀设计来的. 使用AmazeUI做出来的效果如下: 首先是顶部导航栏的代码: <!--这里的顶部导航栏与Boot