iOS之移動中變化的cell(cell逐漸變大效果)

在開發中靈活使用cell可以省去不少麻煩, 這裡介紹如何讓cell隨著偏移量動態改變大小的效果.期間使用過重新整理固定cell, 和操作cell的座標, 整體做起來效果不佳而且非常麻煩, 這裡使用間接方法實現操作。

• 看一下效果先

cell移動效果.gif

看一下程式碼

 //設定cell的上下內邊距
self.tableV.contentInset = UIEdgeInsetsMake(SCellHeight, 0, self.view.frame.size.height - BCellHeight, 0);

• 這裡要注意tableview的初始化，需要對內邊距進行這是，這時候tableview的偏移量會是-SCellHeight的大小。裡面的資料需要自己多列印才能準確計算，這裡不做過多說明

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //在滑動過程中獲取當前顯示的所有cell, 呼叫偏移量的計算方法
        [[self.tableV visibleCells] enumerateObjectsUsingBlock:^(MoveCell * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
            
        //cell偏移設定
        [obj cellOffsetOnTabelView:self.tableV];
        
    }];
}
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    //cell第一次出現時呼叫計算偏移量
    MoveCell *getCell = (MoveCell *)cell;
    
    [getCell cellOffsetOnTabelView:tableView];

}

• 在vc控制器裡在移動cell的觸發方法中與cell將要出現的方法裡需要對cell的位置進行判斷，對滿足條件的cell進行偏移量進行設定。其他正常的正常
• 接下來進入到自定義的cell中，這裡為MoveCell看一下初始化中新增了什麼

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        
        //取消cell點選的效果
        self.selectionStyle = UITableViewCellSelectionStyleNone;
        self.imageV = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, SCellHeight)];
        [self.contentView addSubview:self.imageV];
        
        self.label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, SCellHeight)];
        self.label.numberOfLines = 0;
        self.label.font = [UIFont systemFontOfSize:FontSize];
        self.label.textAlignment =  NSTextAlignmentCenter;
        [self.contentView addSubview:self.label];
        self.label.text = @"改變字型大小";
        
        //新增點選方法
        UITapGestureRecognizer *tapG = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapAction:)];
        [self.imageV addGestureRecognizer:tapG];
        
        
    }
    return self;
}
- (void)tapAction:(UIGestureRecognizer *)gestur
{
    NSLog(@"點選了%ld", gestur.view.tag);
}
- (void)cellOffsetOnTabelView:(UITableView *)tabelView
{
    
    CGFloat currentLocation = tabelView.contentOffset.y + BCellHeight;
    
    
    //如果超出規定的位置以 ->“上”
    if (self.frame.origin.y < tabelView.contentOffset.y + BCellHeight - SCellHeight) {
        
        self.imageV.height = BCellHeight;
        
        self.imageV.y = - (BCellHeight - SCellHeight);
       
        self.label.font = [UIFont systemFontOfSize:FontSize * 4];
        
        
    }else if (self.frame.origin.y <= currentLocation && self.frame.origin.y >= tabelView.contentOffset.y) {
        //cell開始進入規定的位置
        
        //通過絕對值 取出移動的Y值
        CGFloat moveY = ABS(self.frame.origin.y - currentLocation) / SCellHeight * (BCellHeight - SCellHeight);
        
        [[self superview] bringSubviewToFront:self];
        
        //移動的值 + cell固定高度
        self.imageV.height = SCellHeight + moveY;
        self.label.height = SCellHeight + moveY;
        //設定偏移量Y值
        self.label.y = - moveY;
        self.imageV.y = - moveY;
        //通過move改變字型的大小 倍數 與起始變化位置自己定義 這裡以最大值4倍計算
        if (BCellHeight - SCellHeight > moveY && moveY > 20) {
            
            self.label.font = [UIFont systemFontOfSize:FontSize * moveY / 20];
            
        } else if (moveY <= 20)
        {
            self.label.font = [UIFont systemFontOfSize:FontSize];
        } else {
            self.label.font = [UIFont systemFontOfSize:FontSize * 4];
        }
        
        
    }else{
        //超出規定的位置以 ->“下”
        
        self.imageV.height = SCellHeight;
        
        self.imageV.y = 0;
        
        self.label.font = [UIFont systemFontOfSize:FontSize];
    }
}

Paste_Image.png

這裡這個方法取消cell的點選效果，因為改變座標的原因cell的點選方法並不準確，用手勢來替代點選方法，需要注意的就是點選時候需要知道點選的是第幾個要為imageview新增tag值，建議在返回cell中，當然也可以在cell將要出現的方法中

frame.png

• 這裡強調一下，因為本身
  self.view.frame.origin.x
  self.view.frame.origin.y
  self.view.frame.size.height
  self.view.frame.size.width
  這些屬性本身是屬於可讀不可改的，所以這裡給view新增一個類目可以方便修改尺寸與計算
  - (void)cellOffsetOnTabelView:(UITableView *)tabelView

• 主要的計算都在這個方法，首先要知道你所控制的cell什麼時候達到你的條件，
  本文設計的是始終保持一個完整的最大cell保持在螢幕上，從開始移動到移動結束路程為 2 * （BCellHeight - SCellHeight）那麼如何判斷達到這個條件可以用cell的frame中的y，y的值是固定一直保持不變的，這一個固定量就是計算的關鍵了。這裡設定的是第二個cell的y為界限， 上限是cell距離最上端距離最大值與最小值的差。這裡的計算需要自己多列印幾次進行比較就會明白。還有一點計算移動的距離同樣要進行計算，對於計算題就不進行詳細說明。大家可以參考本文的方式來調整到自己的預計效果！

這裡主要提供一個類似效果的思路，具體實踐可根據個人要求進行改進。如果有人發現更簡便的方法可以交流，希望可以幫助到你！
附上Demo僅供參考！