簡體   English   中英

使用“自動布局”更新集合視圖高度以適合表視圖單元格中的所有單元格

[英]Update collection view height to fit all cells within a table view cell using Auto Layout

我想利用iOS 8中動態的UITableViewCell高度。我需要在UITableViewCell放置一個UICollectionView 我想確保集合視圖中的所有單元格都在屏幕上可見,因此表格單元格的高度應該增加以適合集合視圖。 我幾乎有這個工作。 我只是無法使表格單元格大小合適 - 它的長度太長或太短,並且在我與表格交互之前可以看到一些布局問題(下面有更多內容)。

我已經將集合視圖的自動布局約束設置為表格單元格的contentView :leading,trailing,top和bottom。 然后我在集合視圖上創建了一個高度約束,這樣我就可以在計算適當的高度后動態更新它的constant ,以適應集合視圖中的所有單元格(因為我認為沒有辦法自動執行此操作)。

這是設置的其余部分。

viewDidLoad {
    self.tableView.rowHeight = UITableViewAutomaticDimension
    self.tableView.estimatedRowHeight = 44
}

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()

    let cellDimension = self.collectionView.frame.size.width / 7 //always 7 columns

    let flowLayout = self.collectionView.collectionViewLayout as! UICollectionViewFlowLayout
    flowLayout.itemSize = CGSizeMake(cellDimension, cellDimension)

    self.collectionViewHeightConstraint.constant = cellDimension * 4 //always 4 rows
}

我還沒有實現heightForRowAtIndexPath

此設置會導致沖突的垂直約束。 我已經嘗試降低約束的優先級並在一堆組合中改變關系,但沒有一個導致所需的行為。 如果我將高度約束的優先級降低到999,則表格視圖單元格最初太高,但在我向上和向下滾動表格視圖后,表格單元格高度更新為預期高度。 對於其他一些組合,結果是表格單元格太短但整個集合視圖滲出,表格單元格太短而集合視圖被切斷,或者表格單元格太高,基於什么優先級和我已經應用於約束的關系。 此外,在視圖設置為動畫時,集合視圖單元格不會以適當的大小顯示(但它們會在動畫完成時正確調整),或者如果我重新加載表格,則集合視圖單元格的大小不正確,直到我滾動桌子。

如何解決這些外觀問題以獲得動態表格視圖單元格高度,其中包含基於顯示寬度的動態單元格大小的完全可見的集合視圖?

從我可以理解你的代碼來設置collectionView單元格和大小,在我看來,你想要有方形的收集單元格,並有4行7個單元格,所有完全可見。

如果向單元格中的collectionView添加約束到所有4個邊距(頂部,底部,左側和右側),然后將7:4的縱橫比約束添加到collectionView,則tableview應該能夠自動計算單元格高度為您提供合適的尺寸。

這是我如何處理這個問題,我認為它可以在IB中完成。

首先,我為CV單元設置了最小尺寸,然后我將CV的擁抱優先級設置為盡可能緊緊地擁抱其內容。 這應該保證,除了所有外部影響之外,CV將嘗試具有使其所有細胞可見的最小可能尺寸。

接下來,我將使用TBV單元格的內容視圖和CV播放相同的游戲,也就是說,我將TBV單元格內容視圖的擁抱優先級設置為盡可能緊密地擁抱CV。 同樣,這應該強調,忽略外部影響,TBV單元應保持其需要保持的最小尺寸,以便完整地顯示CV。

看看forkingdog如何在這里解決了tableview單元動態高度的相同問題> https://github.com/forkingdog/UITableView-FDTemplateLayoutCell

你應該能夠為uicollectionview切換出imageview。 在此輸入圖像描述

在他的桌面視圖中 - 而不是使用開箱即用的估計行高 - 你需要類似的東西

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return [tableView fd_heightForCellWithIdentifier:@"FDFeedCell" configuration:^(FDFeedCell *cell) {
        cell.entity = self.feedEntities[indexPath.row];
    }];
}



#import "UITableView+FDTemplateLayoutCell.h"
#import <objc/runtime.h>

@implementation UITableView (FDTemplateLayoutCell)

- (id)fd_templateCellForReuseIdentifier:(NSString *)identifier;
{
    NSAssert(identifier.length > 0, @"Expects a valid identifier - %@", identifier);

    NSMutableDictionary *templateCellsByIdentifiers = objc_getAssociatedObject(self, _cmd);
    if (!templateCellsByIdentifiers) {
        templateCellsByIdentifiers = @{}.mutableCopy;
        objc_setAssociatedObject(self, _cmd, templateCellsByIdentifiers, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    }

    UITableViewCell *templateCell = templateCellsByIdentifiers[identifier];
    if (!templateCell) {
        templateCell = [self dequeueReusableCellWithIdentifier:identifier];
        templateCellsByIdentifiers[identifier] = templateCell;
    }

    return templateCell;
}

- (CGFloat)fd_heightForCellWithIdentifier:(NSString *)identifier configuration:(void (^)(id))configuration
{
    // Fetch a cached template cell for `identifier`.
    UITableViewCell *cell = [self fd_templateCellForReuseIdentifier:identifier];

    // Reset to initial height as first created, otherwise the cell's height wouldn't retract if it
    // had larger height before it gets reused.
    cell.contentView.bounds = CGRectMake(0, 0, CGRectGetWidth(self.frame), self.rowHeight);

    // Manually calls to ensure consistent behavior with actual cells (that are displayed on screen).
    [cell prepareForReuse];

    // Customize and provide content for our template cell.
    if (configuration) {
        configuration(cell);
    }

    // Add a hard width constraint to make dynamic content views (like labels) expand vertically instead
    // of growing horizontally, in a flow-layout manner.
    NSLayoutConstraint *tempWidthConstraint =
    [NSLayoutConstraint constraintWithItem:cell.contentView
                                 attribute:NSLayoutAttributeWidth
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:nil
                                 attribute:NSLayoutAttributeNotAnAttribute
                                multiplier:1.0
                                  constant:CGRectGetWidth(self.frame)];
    [cell.contentView addConstraint:tempWidthConstraint];

    // Auto layout does its math
    CGSize fittingSize = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];

    [cell.contentView removeConstraint:tempWidthConstraint];

    // Add 1px extra space for separator line if needed, simulating default UITableViewCell.
    if (self.separatorStyle != UITableViewCellSeparatorStyleNone) {
        fittingSize.height += 1.0 / [UIScreen mainScreen].scale;
    }

    return fittingSize.height;
}

@end

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM