打造一款灵活的导航栏

栏目: IOS · 发布时间: 6年前

内容简介:前言:项目中经常会遇到功能样式各种各样的导航栏,使用系统的也能达到需求,但是改动方面比较麻烦,特别是对于改动的时机把控问题较多,所以很多情况下都是隐藏系统的导航栏,自定义一个view区代替导航栏,导航栏的样式无非以下几种:文字,图片,与图文混合,这几种的组合那么如何打造一款适用的导航栏呢?笔者在项目中的需求,导航栏风格迥异,还牵扯到一些控件的渐变和隐藏效果,下面就来具体讲解下封装的过程。

前言:项目中经常会遇到功能样式各种各样的导航栏,使用系统的也能达到需求,但是改动方面比较麻烦,特别是对于改动的时机把控问题较多,所以很多情况下都是隐藏系统的导航栏,自定义一个view区代替导航栏,导航栏的样式无非以下几种:

文字,图片,与图文混合,这几种的组合

那么如何打造一款适用的导航栏呢?笔者在项目中的需求,导航栏风格迥异,还牵扯到一些控件的渐变和隐藏效果,下面就来具体讲解下封装的过程。

笔者想到的封装结构如下图所示:

打造一款灵活的导航栏
打造一款灵活的导航栏
打造一款灵活的导航栏

总体设计如上图所示, LWNavigationBarItem 主要是对单体 item 的相关设置,包括item样式,文字,图片和其相关样式的定制等 LWNavigationBar 是承载 LWNavigationBarItem 的容器,对外提供增加,修改相关 item 的接口,内部实现对 item 的布局,下面我截取相关样式的图片:

1.标题渐变

打造一款灵活的导航栏
打造一款灵活的导航栏
打造一款灵活的导航栏

2.带下划线的item

打造一款灵活的导航栏

3.动态修改item的隐藏显示和内容

打造一款灵活的导航栏
打造一款灵活的导航栏
打造一款灵活的导航栏

还有其他组合这里就不一一列举,可以自行下载尝试

4.使用方面

这层封装仅仅是对导航栏的定制进行设置的,如果想要和业务结合,生成不同的导航栏,最好进行二次封装一次,我这里仅仅截取一个二次封装的方法,如下:

/*左右皆为图片,中间标题为文字,图片文字皆可为空
 */
+ (LWNavigationBar *)yg_createNavigationBarWithBarStyle:(YGNavigationBarStyle)style
                                              target:(UIViewController *)target
                                              leftImage:(UIImage * _Nullable)leftImage
                                              titleText:(NSString * _Nullable )titleText
                                             rightImage:(UIImage * _Nullable )rightImage
                                              barHeight:(CGFloat)barHeight {
    
    LWNavigationBarItem *leftItem = [[LWNavigationBarItem alloc] initWithItemType:LWNavigationBarItemOnlyImage];
    [leftItem setItemImage:leftImage];
    [leftItem setItemImageSize:CGSizeMake(20 * kXX, 20 * kXX)];
    if ([target respondsToSelector:@selector(p_didClickLeftItemAction)]) {
        [leftItem addTarget:target action:@selector(p_didClickLeftItemAction) forControlEvents:UIControlEventTouchUpInside];
    }
    
    LWNavigationBarItem *rightItem = [[LWNavigationBarItem alloc] initWithItemType:LWNavigationBarItemOnlyImage];
    [rightItem setItemImage:rightImage];
    [rightItem setItemImageSize:CGSizeMake(20 * kXX, 20 * kXX)];
    if ([target respondsToSelector:@selector(p_didClickRightItemAction)]) {
        [rightItem addTarget:target action:@selector(p_didClickRightItemAction) forControlEvents:UIControlEventTouchUpInside];
    }
    
    LWNavigationBarItem *titleItem = [[LWNavigationBarItem alloc] initWithItemType:LWNavigationBarItemOnlyText];
    [titleItem setItemTitleColor:(style == YGNavigationBarStyleDefault ? [UIColor convertHexValueToColor:@"#2f2f2f"] : [UIColor whiteColor])];
    [titleItem setItemTitle:titleText];
    [titleItem setItemTitleFont:[UIFont fifteenOfSystem]];
    
    LWNavigationBar *bar = [[LWNavigationBar alloc] init];
    bar.backgroundColor = (style == YGNavigationBarStyleDefault ? [UIColor whiteColor] : [UIColor createNavigationColor]);
    [bar setBarContentInset:15 * kXX];
    [bar addItemToTitle:titleItem];
    [bar addItemToRight:rightItem];
    [bar addItemToLeft:leftItem];
    [bar setItemLineViewColor:YGViews_RGBA(182, 182, 182, 1.0)];
    bar.frame = CGRectMake(0, 0, kScreenW, barHeight);
    [bar reloadItems];
    [target.view addSubview:bar];
    return bar;
}
复制代码

总体而言,这些已经能满足大多数需求,这里我附上 Github链接 ,如果感兴趣,可以通过上述传送门下载看一下,此外, LWNavigationBar 也支持pod,使用方式 pod 'LWNavigationBar' 即可,如果觉得满足你的需求,还望不吝一颗:sparkles: ,谢谢


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

翻转课堂的可汗学院

翻转课堂的可汗学院

萨尔曼·可汗(Salman Khan) / 刘婧 / 浙江人民出版社 / 2014-4-1 / 49.00元

MIT和哈佛毕业的高材生缘何放弃金融分析师工作投身教育事业?YouTube上的“可汗学院频道”至今共吸引了163.3万订阅者,观看次数超过3.55亿次,它为什么如此大受欢迎?创始人萨尔曼·可汗阐述属于未来的教育理念——让地球上的任何人都能随时随地享受世界一流的免费教育! 现行教育模式已有200余年历史,可汗认为,在互联网蓬勃发展、社交网络盛况空前的时代,免费、灵活、适合个体、全球共享的教育才......一起来看看 《翻转课堂的可汗学院》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

SHA 加密
SHA 加密

SHA 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器