FTYGuideTableView

Posted on | In | | Visitors:

一个有趣的TableView

今天看到一个人的文章说美团的订单表格很好看，看了一下他的代码，具体不知道在哪里里，然后自己去美团看了一下结果是这样的

大家看了这个，估计难点在与cell这一块吧。其实也不是很难，估计是计算控件的frame的时候难一点。以为有些控件的高度是根据内容的来变化的。
下面我就简单的实现一下，可能稍微有点不一样。

  • 来个展示图look一look先

  • 其实这个效果也是很简单的（怪我咯，技术渣渣/(ㄒoㄒ)/~~）

  • 好吧，废话不多说，说说怎样实现的

  • 上干货

第一步：创建cell

  • 有两种方式
  • 第一种可能很多人用吧，用xib。加载就完事，不用计算它的frame，而且* 拖拖控件就行

  • 第二种就是纯属代码了，而我就是用这一种
1
2
3
4
5
6
7
8
9
10
// 左边
@property (weak, nonatomic) UIImageView *guideIcon; // 左边图标
@property (weak, nonatomic) UIView *leftBgView; // 左边父视图
@property (weak, nonatomic) UILabel *topLine; // 左边图标上线
@property (weak, nonatomic) UILabel *bottomLine; // 左边图标下线
// 右边
@property (weak, nonatomic) UIImageView *bubbleImgeView; // 右边背景图
@property (weak, nonatomic) UILabel *titleLabel; // 右边标题
@property (weak, nonatomic) UILabel *contentLabel; // 右边内容
@property (weak, nonatomic) UIView *rightBgView; // 右边父视图
  • 然后就是计算各种的frame了，这里的控件不多，其实也可以不像我那样添加那么多，父视图可有可无。

第二步就是创建tableview了

  • 实现代理和数据源之后，我们尝试赋值给cell
1
2
3
4
5
6
7
8
9
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    FTYGuideCell *cell = [FTYGuideCell cellWithTableView:tableView];
    cell.lineColor = self.lineColor;
    if (self.objectModelArr.count > indexPath.row) {
        FTYObjectModel *object = self.objectModelArr[indexPath.row];
        [cell setDataWithLeftIcon:self.leftIconArr[indexPath.row] title:[NSString stringWithFormat:@"%@%@", object.title, @(indexPath.row)] content:[NSString stringWithFormat:@"%@%@", object.content, @(indexPath.row)]];
    }
    return cell;
}
  • 出来的效果就是这个了

  • 当然也可以传个下标，让第一个cell的上面那一条线不显示,最后一个cell的下一条线不显示

  • 好了，美团那个基本实现了，但是想不想额外加一下功能呢，像刚开始的时候，每一次拖动，就上下有一条线在跟随者tableview的滚动。

  • 下面就实现以下吧

  • 首先每条横线是label也可以是view

1
2
3
4
// tableview上面的线
@property (weak, nonatomic) UIView *topLine;
// tableview下面的线
@property (weak, nonatomic) UIView *bottomLine;
  • 核心代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 *  当cell将要出现的时候获取cell线的frame，因为x和width都一样的，所以取一个就行了
 */
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
    if ([cell isKindOfClass:[FTYGuideCell class]]) {
        FTYGuideCell *_cell = (FTYGuideCell *)cell;
        self.lineFrame = _cell.topLine.frame;
    }
    // 取到frame后，模拟滚动，设置跟着滚动线的frame
    [self scrollViewDidScroll:tableView];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    // 计算滚动的幅度，设置两条线的frame
    CGFloat lineWidth = self.lineFrame.size.width;
    CGFloat lineX = self.lineFrame.origin.x;
    self.topLine.frame = CGRectMake(lineX, 0, lineWidth, -scrollView.contentOffset.y);
    CGFloat yOffset = scrollView.frame.size.height - scrollView.contentSize.height + scrollView.contentOffset.y;
    self.bottomLine.frame = CGRectMake(lineX, self.frame.size.height-yOffset, lineWidth, self.frame.size.height);
}
  • 然后结果就变成这样了

代码

DEMO