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

热门标签

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

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

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

面包屑导航的百科:

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

iOS-还在纠结面包屑导航?一个横向UITableview搞定!
三、来实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哦!

收工,吃个盒饭!

 

标签:

未经允许不得转载:作者:SheaYang, 转载或复制请以 超链接形式 并注明出处 技术Dog|博客
原文地址:《iOS-还在纠结面包屑导航?一个横向UITableview搞定!》 发布于2019-10-17

分享到:
赞(0)

评论 抢沙发

6 + 7 =


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

长按图片转发给朋友

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录