一款简单的面包屑导航栏

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

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

项目效果:


一款简单的面包屑导航栏_第1张图片
Breadcrumb.gif

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

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

#import 

@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我或者在这给我留言,我会尽力去解决,也希望大家相互学习。

你可能感兴趣的:(一款简单的面包屑导航栏)