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

释放双眼,带上耳机,听听看~!

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

设计图:

面包屑导航的百科:

面包屑导航(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实现,方便快速!
如图:

三、来实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哦!

收工,吃个盒饭!

 

人已赞赏
iOS文章

iOS 消息转发

2019-10-17 15:21:39

iOS文章

iOS13 开发适配

2019-10-17 16:47:35

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索