iOS-还在纠结面包屑导航？一个横向UITableview搞定！

公司项目里有用到面包屑导航，我利用了一个横向滚动的tableView实现了功能，现在记录下，有需要的小伙伴可以参考下！

设计图：

屏幕快照 2019-08-09 上午8.44.10.png

面包屑导航的百科：

面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"[汉赛尔]和[格莱特]"，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。所以，面包屑导航的作用是告诉[访问者]他们目前在网站中的位置以及如何返回。

实现的思路：

1、想办法让表视图横过来；
2、viewForFooterInSection里面放箭头图片；cell里放title。
3、finish

一、懒加载一个UITableView

注意点
1、style 为 Grouped；
2、transform 把表横过来；

#pragma mark ----- 横向tableView
-(UITableView *)horTableView {
    if(!_horTableView){
        _horTableView = [[UITableView alloc] initWithFrame:self.bounds style:UITableViewStyleGrouped];
        _horTableView.delegate = self;
        _horTableView.dataSource = self;
        _horTableView.showsVerticalScrollIndicator = NO;
        _horTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
        _horTableView.backgroundColor = [UIColor colorWithHexStr:@"#FFFFFF" alpha:1.0f];
        [_horTableView registerNib:[UINib nibWithNibName:[NSString stringWithUTF8String:object_getClassName([DXHorListTableCell class])] bundle:nil] forCellReuseIdentifier:[NSString stringWithUTF8String:object_getClassName([DXHorListTableCell class])]];
        
        _horTableView.transform = CGAffineTransformMakeRotation(-M_PI_2);
    }
    return _horTableView;
}

二、自定义的cell

自定义的cell用来显示title，我用的xib实现，方便快速！
如图：

屏幕快照 2019-08-09 上午9.03.34.png

三、来实Delegate和DataSource方法吧

每个section放一个cell；

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
        //横向
        return self.titleDataArray.count;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
      return 1;
}

cell的contentView记得transform

#pragma mark ----******************----cell for row
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    if ([tableView isEqual:self.horTableView]) {
        //横向
        DXHorListTableCell * cell = [tableView dequeueReusableCellWithIdentifier:[NSString stringWithUTF8String:object_getClassName([DXHorListTableCell class])]];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
        cell.contentView.transform = CGAffineTransformMakeRotation(M_PI_2);
        
        DXContactTitleListModel * titleModel = [DXContactTitleListModel mj_objectWithKeyValues:self.titleDataArray[indexPath.section]];
        
        cell.titleLabel.text = titleModel.name;
        cell.titleLabel.font = [UIFont systemFontOfSize:14 weight:UIFontWeightRegular];
        if (indexPath.section == self.titleDataArray.count-1) {
            cell.titleLabel.font = [UIFont systemFontOfSize:14 weight:UIFontWeightBold];
            cell.titleLabel.textColor = [UIColor colorWithHexStr:@"#222222" alpha:1.0f];
        }
        return cell;
        
    }
}

重点：cell的高度变宽度了

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    if ([tableView isEqual:self.horTableView]) {
        //高度变宽度
        // 根据字体得到NSString的尺寸
        DXContactTitleListModel * titleModel = [DXContactTitleListModel mj_objectWithKeyValues:self.titleDataArray[indexPath.section]];
        CGSize size = [titleModel.name sizeWithAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIFont systemFontOfSize:14],NSFontAttributeName,nil]];
        // 名字的宽度
        CGFloat nameW = size.width + 25;
        return nameW;
    }
}

viewForFooterInSection里可以根据需要看着写（我是添加一个箭头图片）。
还有就是didSelected小伙伴们自己实现吧，注意我这边是一个section里面一个cell哦！

收工，吃个盒饭！