美文网首页
一款简单的面包屑导航栏

一款简单的面包屑导航栏

作者: 进击的猫 | 来源:发表于2016-12-21 22:21 被阅读0次

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

    相关文章

      网友评论

          本文标题:一款简单的面包屑导航栏

          本文链接:https://www.haomeiwen.com/subject/ptxcvttx.html