一款简单的面包屑导航栏

这个Demo是在日常开发中的一个需求抽出来的,每个项目都要自己的需求,所以本文只是提供一些思路,如果你的项目也有类似的需求,你也可以直接用我的方法来做。

Demo的GitHub地址:[GitHub](https://github.com/attackFromCat/LXBreadcrumbNavigation)

项目效果:


Breadcrumb.gif

首先谈谈我的项目需求是怎样的,我们的项目是一款办公协同App,需要管理公司的部门结构或者是行政机构,所以我们的项目提供自行创建部门,例如,一个公司分几个机构,一个机构又分为几个部门,部门里面又有不同的小组等。那么面包屑导航就能在相关管理者管理层级结构,或者公司员工查找人员就能起到导向作用。

现在来谈谈实现的思路,导航栏可以继承UIView或者UITableViewCell都可以,不过如果继承UITableViewCell可能就会在以后UITableView的显示带来一些小麻烦,需要判断cell的展示,所以就采用继承UIView,然后把它设置为UITableView的HeaderView,这样也能到达我们的效果。

#import <UIKit/UIKit.h>

@interface LXBreadcrumbView : UIView

/**
 面包屑导航展示的数组
 */
@property (nonatomic, strong) NSMutableArray *crumbs;

/**
 点击面包屑导航传出被点击的按钮的Tag值,可以在block中进行其他操作
 */
@property (nonatomic, strong) void(^clickBlock)(NSInteger);
@end

通过传入的数组去创建需要多少个按钮,由于我们服务器会帮我们传回每个点击后的父子层级关系,所以就采用数组来记录点击的路径。

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        // 给面包屑View添加一个内容滚动视图,以满足超过屏幕宽度的情况下可以左右滑动
        UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScrollViewHeight)];
        scrollView.showsHorizontalScrollIndicator = NO;
        [self addSubview:scrollView];
        _scrollView = scrollView;
        self.backgroundColor = [UIColor colorWithRed:0.922 green:0.929 blue:0.941 alpha:1.000];
        
        _btnArray = [NSMutableArray array];
    }
    return self;
}

剩下就是根据外界传入的数组来创建标题按钮并进行相应的初始化,比较常规就不多说了,就是在计算它们的x值得时候。

    //利用此方法获得前一个空间的最大x值
    maxX = CGRectGetMaxX(btn.frame) + margin;

来说说在这个Demo中的是如何使用的这个小部件的,首先我的头文件中定义了个属性,方便重用这个控制器。

@interface ViewController : UIViewController

@property (nonatomic, strong) NSString *titleStr;  // 传入进来的主题

@end

点击cell进入这个方法,因为没有服务器给我传值,所以我就在这个方法弄了一点假数据,然后点击后随机产生主题传入准备push的控制器。

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSArray *crumbList = @[
                           @"新闻",@"体育",@"足球",@"国际足球",@"西甲",@"皇家马德里"
                           ];
    ViewController *vc = [[ViewController alloc] init];
    int value = arc4random_uniform(6);
    vc.titleStr = crumbList[value];
    
    // 记录面包路径数组,存入沙盒,模拟从服务器获取数据
    _crumbList = [self getCrumbListData];
    [_crumbList addObject:vc.titleStr];
    [self saveCrumbListData];
    
    [self.navigationController pushViewController:vc animated:YES];
}

最后就是实现面包屑的block就完成了,请看下面的代码。

    __weak __typeof(self) weakSelf  = self;
    [_crumView setClickBlock:^(NSInteger btnTag) {
        // 将导航控制器栈的控制拷贝下来
        NSMutableArray *arr = weakSelf.navigationController.viewControllers.mutableCopy;
        // 根据按钮传回来的Tag值找到该Tag对应的控制器,然后把之后的控制器删除
        [arr removeObjectsInRange:NSMakeRange(btnTag + 1, arr.count - btnTag - 1)];
        
        // 删除数组多余的数据
        weakSelf.crumbList = [weakSelf getCrumbListData];
        [weakSelf.crumbList removeObjectsInRange:NSMakeRange(btnTag + 1, weakSelf.crumbList.count - btnTag - 1)];
        [weakSelf saveCrumbListData];

        // push或pop到栈顶控制器
        [weakSelf.navigationController setViewControllers:arr animated:YES];
        
    }];

如果你们服务器兄弟帮你解决了关系层级问题,那就可轻松多了。我也不知道还要说些什么,第一次写这种文章,还有很多不知道怎么去说,有问题可以在GitHub上push我或者在这给我留言,我会尽力去解决,也希望大家相互学习。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,614评论 4 59
  • 1.属性readwrite,readonly,assign,retain,copy,nonatomic 各是什么作...
    曾令伟阅读 1,011评论 0 10
  • 世间万事万物,绝大多数人,都鲜有时间回顾往事,酸甜苦辣都是人生的一种体验,少了哪一样,都不足够完整。 经...
    宋孜CGB阅读 767评论 1 4
  • 想必在银行扎堆招聘的十月 十一月 十二月,你一定拿了好几家银行的offer了吧 你最后选择了哪家?出于什么原因呢...
    慧鱼阅读 820评论 0 1
  • 游戏规则:每度代表不一样的速度。其中三度代表正常速度,1-5度速度依次递增。游戏者根据指令调整速度,自由行走。注意...
    JennyHua阅读 464评论 0 0