封装股票代码行情首页(侧滑效果)

2017-11-19  本文已影响0人  Qing学

本人因为工作需要需要做一个行情页面。需要达到的效果为TableView可以整体进行刷新。但是在每个cell上还需要左侧固定,然后右侧实现同步左右滑动。刚开始并没有思路。通过reveal查看了东方财富的布局之后找到了灵感。
实现思路:
1.可以刷新(建立一个TableView集成MJRefresh)。
2.左侧固定,右侧可以独立刷新。(我们可以具体到每个cell上。利用scollView在cell右侧加一个scrollView,左侧是一个固定的label。然后对每个cell的scrollView进行刷新的时候。将tableView所有显示的cell上的ScrollView偏移相同的偏移量即完成。话不多说。下面上布局截图
1.先创建一个tableView并且显示cell

self.tableView.delegate = self;
    self.tableView.dataSource = self;
TableView创建在在StoryBoard上

BaseTableViewCell *baseCell = [self.tableView dequeueReusableCellWithIdentifier:NSStringFromClass([BaseTableViewCell class]) forIndexPath:indexPath];
    baseCell.controller = self;
    baseCell.baseTableView = self.tableView;
复用取得cell,然后给cell的tableView指针 (weak)指向自己的tableView

2.线面是cell的布局


Snip20171119_5.png

可以看到cell左侧是label、右侧是一个可以滑动的scrollView;
然后在scrollView上添加上Label

self.qxScrollView.contentSize = CGSizeMake(500, 0);
    self.qxScrollCell = [[[NSBundle mainBundle]loadNibNamed:@"QXScrollViewCell" owner:self options:nil]firstObject];
    self.qxScrollCell.frame = CGRectMake(0, 0, 500, 50);
    [self.qxScrollView addSubview:self.qxScrollCell];
    self.qxScrollView.delegate = self;

3.cell已经可以滑动了。现在的问题只能显示单个cell的滑动。所以利用cell上weak指针取得tableView,并且给tableView所有显示的cell上的scrollView设置相同的contentOffset。

for (BaseTableViewCell *cell in self.baseTableView.visibleCells){
        cell.qxScrollView.contentOffset = scrollView.contentOffset;
        self.controller.tableViewContentOffset = scrollView.contentOffset;
    }

4.已经完成cell的同步滑动。但是tableView向下滑动的时候,新刷新出来的cell的偏移量并没有得到改变,所以还需要在tableView滑动的时候设置每个新显示的cell的偏移量。
代码如下:

baseCell.qxScrollView.contentOffset = self.tableViewContentOffset;

到此所有效果完成,每个cell左侧固定,右侧的scrollView滑动可以带动当前显示的所有cell的ScrollView同步滑动。tableView新复用的cell偏移量也OK。
githubDemo地址:
https://github.com/wangqingxue/QXScrollTableView
感谢观看。

上一篇 下一篇

猜你喜欢

热点阅读