【iOS开发】---- tableView背景随表滚动

        最近项目中用到了“图随表动”,如下图所示:


        这是一个订单,需要add shipping insurance以上的部分随着表格的滚动而滚动,这里表格是group类型的,所以背景加在cell上是达不到效果的,在code4App上找到了一个例子(code4App中搜索“图随表动”),实现如下:

#define bgHeight table.frame.size.height
#define beginBgY -table.frame.size.height
- (void)addBgLayer{
    UIImage *img = [UIImage imageNamed:@"bgTable.png"];
    
    CGFloat imgHeight = img.size.height;
    CGFloat contentHeight = table.contentSize.height;
   
    NSInteger needNum = (contentHeight+bgHeight - beginBgY)/imgHeight + 1;
    if (needNum > alreadyAddBg) {
        for(int i = alreadyAddBg; i < needNum; i++) {
            CGRect rect = CGRectMake(0, beginBgY+i*imgHeight, table.frame.size.width,imgHeight);
            [self addLayerWithFrame:rect];
        }
        alreadyAddBg = needNum;
    }
}

- (void)addLayerWithFrame:(CGRect)frame{
    CALayer *background = [CALayer layer];
    background.zPosition = -1;
    background.frame = frame;
    background.contents = (id)([[UIImage imageNamed:@"bgTable.png"] CGImage]);
    [table.layer addSublayer:background];
}

        其中beginBgY是背景的起始位置,如果你想从y小于0的位置开始也可以,代码很简单,不多做解释,就是加了个layer到table的layer上。

       到这里初步达到了我的要求,但是,产品列表中的产品如果非常多的话,用户就必须要不停的往下翻,所以我将其弄成可以收缩的方式(之前有个收缩的demo:http://download.csdn.net/detail/sjx19871225/5086683)。

       但是弄成收缩的之后,背景的大小又要随变化,我开始直接想把layer 给remove掉,然后重新添加,当然,结果是可以预见的,程序崩溃掉了,因为layer的引用计数已经只有1了,再remove当然就崩掉了。

我想了一个办法:因为从要求来看,只有列表部分的高度在变化,其他地方不变,所以背景的大小只有两种,这样我就定义了两个layer的成员变量并初始化分配内存,将背景图分别加在两个不一样大小的layer上,然后需要用哪个的时候就将哪个加载在table的layer上,将不用的remove掉,具体代码如下:

- (void)addBgLayer
{
    
    UIImage *img0 = [UIImage imageNamed:@"tbg.png"];
    UIImage *img1 = [UIImage imageNamed:@"pbg.png"];
    UIImage *img2 = [UIImage imageNamed:@"bbg.png"];

    CGFloat imgHeight = img1.size.height;
    CGFloat contentHeightOpen = 0;;//减两个16是顶部和底部锯齿
    CGFloat contentHeightNotOpen = 0;;
    if (_order.isNewOrder)
    {
        contentHeightOpen = 90+[_order.productList count]*127+95+65+65+50*3-16-16;//减两个16是顶部和底部锯齿
        contentHeightNotOpen = 90+95+65+65+50*3-16-16;
    }else
    {
        contentHeightOpen = 90+[_order.productList count]*127+95+50*3-16-16;//减两个16是顶部和底部锯齿
        contentHeightNotOpen = 90+95+50*3-16-16;
    }
    self.layerOpen.frame = EZRECT(0, 0, 320,  contentHeightOpen);
    self.layerNotOpen.frame =EZRECT(0, 0, 320,  contentHeightOpen);


    NSInteger needNum;
    
    {//打开的layer
        [self addLayerWithFrame:EZRECT(0, 0, 320, 16) withImage:img0 toLayer:self.layerOpen];
        needNum = contentHeightOpen/imgHeight + 1+1;//为了美观,多加1个
        
        for(int i = 0; i < needNum; i++) {
            //CGRect rect = CGRectMake(0, beginBgY+i*imgHeight, 320,imgHeight);
            CGRect rect = CGRectMake(0, i*imgHeight+16, 320,imgHeight);
            [self addLayerWithFrame:rect withImage:img1 toLayer:self.layerOpen];
        }
        [self addLayerWithFrame:EZRECT(0, 16+needNum*imgHeight, 320, 16) withImage:img2 toLayer:self.layerOpen];
    }
    
    {//收起的layer
        [self addLayerWithFrame:EZRECT(0, 0, 320, 16) withImage:img0 toLayer:self.layerNotOpen];
        
        needNum = contentHeightNotOpen/imgHeight + 1+1;//为了美观,多加1个
        for(int i = 0; i < needNum; i++)
        {
            //CGRect rect = CGRectMake(0, beginBgY+i*imgHeight, 320,imgHeight);
            CGRect rect = CGRectMake(0, i*imgHeight+16, 320,imgHeight);
            [self addLayerWithFrame:rect withImage:img1 toLayer:self.layerNotOpen];
        }
        
        [self addLayerWithFrame:EZRECT(0, 16+needNum*imgHeight, 320, 16) withImage:img2 toLayer:self.layerNotOpen];
    }
    
    BOOL isOpen = [[isOpenDic objectForKey:@"sectionProductList"] boolValue];
    if (isOpen)
    {
        self.layerOpen.zPosition = -2;
        [table.layer addSublayer:self.layerOpen];
    }
    else
    {
        self.layerNotOpen.zPosition = -2;
        [table.layer addSublayer:self.layerNotOpen];
    }
}

- (void)addLayerWithFrame:(CGRect)frame withImage:(UIImage *)image toLayer:(CALayer *)layer
{
    CALayer *background = [CALayer layer];
    background.zPosition = -1;
    background.frame = frame;
    background.contents = (id)([image CGImage]);
    [layer addSublayer:background];
}


       这里我又碰到了一个问题,就是

       self.layerOpen.zPosition = -2;

       图层的层次问题,注意到添加到table上的layer与添加到layerOpen(添加到table上的layer)层次是不同的。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iOS 开发中,TableView 是一个非常重要的视图控件,用于展示大量数据。而 TableView 中的 HeaderView 和 FooterView 也是非常重要的组件,可以用于展示一些额外的信息或者操作按钮。在 TableView 中,我们可以通过注册重用标识符来复用 Cell,但是对于 HeaderView 和 FooterView 却没有提供类似的注册方法。本文将介绍如何在 TableView 中循环利用 HeaderView,并且还会介绍如何自定义 HeaderView。 ## 循环利用 TableView 中的 HeaderView 在 TableView 中,我们可以通过以下方法来设置 HeaderView: ``` - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 44)]; headerView.backgroundColor = [UIColor grayColor]; return headerView; } - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section { return 44; } ``` 上面的代码中,我们通过实现 `tableView:viewForHeaderInSection:` 方法来设置 HeaderView 的内容和样式,通过实现 `tableView:heightForHeaderInSection:` 方法来设置 HeaderView 的高度。但是如果我们在 TableView 中有很多组数据,每次都创建一个新的 HeaderView 会非常消耗性能,因此我们需要对 HeaderView 进行循环利用。 循环利用 HeaderView 的实现方法非常简单,我们只需要在 TableView 的代理方法中通过 `dequeueReusableHeaderFooterViewWithIdentifier:` 方法来获取 HeaderView,如果获取到的 HeaderView 为 nil,就创建一个新的 HeaderView,否则就返回重用的 HeaderView。 ``` - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { static NSString *headerIdentifier = @"headerIdentifier"; UITableViewHeaderFooterView *headerView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:headerIdentifier]; if (!headerView) { headerView = [[UITableViewHeaderFooterView alloc] initWithReuseIdentifier:headerIdentifier]; headerView.contentView.backgroundColor = [UIColor grayColor]; } return headerView; } ``` 上面的代码中,我们首先定义一个静态的重用标识符 `headerIdentifier`,然后通过 `dequeueReusableHeaderFooterViewWithIdentifier:` 方法获取重用的 HeaderView。如果获取到的 HeaderView 为 nil,我们就创建一个新的 HeaderView,并且设置它的重用标识符为 `headerIdentifier`。最后,我们设置 HeaderView 的背景颜色,并且返回 HeaderView。 ## 自定义 TableView 中的 HeaderView 除了循环利用 HeaderView,我们还可以自定义 HeaderView。自定义 HeaderView 的方法与自定义 Cell 的方法类似,我们需要在 XIB 或者代码中创建一个自定义的 HeaderView,然后在 TableView 的代理方法中返回它。 ### 在 XIB 中创建自定义 HeaderView 在 XIB 中创建自定义 HeaderView 的方法非常简单,我们只需要创建一个新的 XIB 文件,然后在 XIB 中添加一个 UIView,将它的 Class 设置为 UITableViewHeaderFooterView,接着就可以在 XIB 中自定义 HeaderView 的内容和样式了。 创建完成后,我们需要在代码中注册这个 XIB 文件,并且设置它的重用标识符。在 TableView 的初始化方法中,我们可以通过以下方法来注册 XIB 文件: ``` UINib *headerNib = [UINib nibWithNibName:@"HeaderView" bundle:nil]; [tableView registerNib:headerNib forHeaderFooterViewReuseIdentifier:@"headerIdentifier"]; ``` 上面的代码中,我们首先通过 `nibWithNibName:bundle:` 方法加载 XIB 文件,然后通过 `registerNib:forHeaderFooterViewReuseIdentifier:` 方法注册 XIB 文件,并且设置它的重用标识符为 `headerIdentifier`。 最后,在 TableView 的代理方法中,我们可以通过以下方法来获取自定义的 HeaderView: ``` - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { static NSString *headerIdentifier = @"headerIdentifier"; UITableViewHeaderFooterView *headerView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:headerIdentifier]; return headerView; } ``` ### 在代码中创建自定义 HeaderView 在代码中创建自定义 HeaderView 的方法也非常简单,我们只需要创建一个继承自 UITableViewHeaderFooterView 的类,然后在这个类中实现自定义 HeaderView 的内容和样式。 ``` @interface CustomHeaderView : UITableViewHeaderFooterView @property (nonatomic, strong) UILabel *titleLabel; @end @implementation CustomHeaderView - (instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier { if (self = [super initWithReuseIdentifier:reuseIdentifier]) { self.contentView.backgroundColor = [UIColor grayColor]; self.titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 0, self.contentView.bounds.size.width - 20, self.contentView.bounds.size.height)]; self.titleLabel.font = [UIFont systemFontOfSize:16]; self.titleLabel.textColor = [UIColor whiteColor]; [self.contentView addSubview:self.titleLabel]; } return self; } @end ``` 上面的代码中,我们创建了一个名为 `CustomHeaderView` 的类,继承自 UITableViewHeaderFooterView。在这个类的初始化方法中,我们设置了 HeaderView 的背景颜色,并且创建了一个 UILabel 来显示标题,最后将它添加到 HeaderView 的 contentView 上。 创建完成后,我们需要在代码中注册这个自定义 HeaderView,并且设置它的重用标识符。在 TableView 的初始化方法中,我们可以通过以下方法来注册自定义 HeaderView: ``` [tableView registerClass:[CustomHeaderView class] forHeaderFooterViewReuseIdentifier:@"headerIdentifier"]; ``` 上面的代码中,我们通过 `registerClass:forHeaderFooterViewReuseIdentifier:` 方法注册自定义 HeaderView,并且设置它的重用标识符为 `headerIdentifier`。 最后,在 TableView 的代理方法中,我们可以通过以下方法来获取自定义的 HeaderView: ``` - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { static NSString *headerIdentifier = @"headerIdentifier"; CustomHeaderView *headerView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:headerIdentifier]; headerView.titleLabel.text = [NSString stringWithFormat:@"Header %ld", section]; return headerView; } ``` 上面的代码中,我们首先定义一个静态的重用标识符 `headerIdentifier`,然后通过 `dequeueReusableHeaderFooterViewWithIdentifier:` 方法获取自定义的 HeaderView,并且设置它的标题为 `Header section`。最后,我们返回自定义的 HeaderView。 总结 在本文中,我们介绍了如何在 TableView 中循环利用 HeaderView,并且还介绍了如何自定义 HeaderView。循环利用 HeaderView 可以提高 TableView 的性能,自定义 HeaderView 可以让我们更加灵活地控制 HeaderView 的样式和内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值