iOS实现可以纵向横向滑动的表格实例代码

2020-01-20 23:01:12于丽

本文主要给大家介绍了关于iOS实现可以纵向横向滑动的表格的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:

效果图

ios,绘制表格,实现表格,表格样式

这个效果是今天公司项目里面遇上的,也是第一次遇见这种需求,所以记录下来,效果如上图。需求主要是可以实现上下的滑动,并且同时最左侧的“线路名称”这一列在向左滑动的时候是不能跟随滚动的。这个功能主要是实现用户可以方便查看关于一下难以看全的列表数据。下面说一下思路。

代码大体思路

由上面的GIF图和基本需求描述我们第一个想到的东西就是万能的tableview,没错,这个功能的完成当然离不开tableview,那么tableview应该怎样发挥它的功力呢,左右侧的信息需要对称,所以在这里我使用了两个tableview,也就是最左侧线路名称这一列是一个tableview,右侧的粉红色字体这些行是一个tableview。上下滑动两者关联是使用scrollview完成的。那接下来就结合代码简单说一下,也方便我以后回头看,哈哈哈。

代码解析

1、这是需要的原材料,每个变量都有注释它的功能了,一眼懂。titleTableView是最左侧的线路名称这一列。infoTableView是粉红色字体这些。contentView是titleTableView和最上方(除了“线路名称”)这一列内容的superView。


@property (nonatomic, strong) UITableView *titleTableView;//标题TableView
@property (nonatomic, strong) UITableView *infoTableView;//内容TableView
@property (nonatomic, strong) UIScrollView *contentView;//内容容器
@property (nonatomic, strong) NSArray *infoArr;//数组

@end

@implementation ViewController {
 CGFloat _kOriginX;
 CGFloat _kScreenWidth;
 CGFloat _kScreenHeight;
}

2、这是所需要的数据配置,我把里面所有需要的数据都放在数组李典里面了。我比较懒。哈哈哈哈


- (void)configData {

 _kOriginX = 120;
 _kScreenWidth = self.view.frame.size.width;
 _kScreenHeight = self.view.frame.size.height;
 _infoArr = @[@{@"title":@"出团日期", @"routeName":@"线路名称一", @"time":@"2015/11/21", @"num":@"20", @"price":@"124.0", @"code":@"DAGSDSASA"},
     @{@"title":@"余位", @"routeName":@"线路名称二", @"time":@"2015/11/21", @"num":@"34", @"price":@"234", @"code":@"TAGDFASFAF"},
     @{@"title":@"价格", @"routeName":@"线路名称三", @"time":@"2015/11/21", @"num":@"12", @"price":@"634", @"code":@"GHGASDAS"},
     @{@"title":@"团代号", @"routeName":@"线路名称四", @"time":@"2015/11/56", @"num":@"54", @"price":@"632", @"code":@"DAADSFAD"}];
}