Festlegen einer Zelldimension in UICollectionView mithilfe des automatischen Layouts

In iOS 8 UICollectionViewFlowLayoutunterstützt die Unterstützung die automatische Größenänderung von Zellen basierend auf ihrer eigenen Inhaltsgröße. Dadurch wird die Größe der Zellen in Breite und Höhe entsprechend ihrem Inhalt geändert.

Ist es möglich, einen festen Wert für die Breite (oder Höhe) aller Zellen anzugeben und die Größe der anderen Dimensionen zu ändern?

Betrachten Sie für ein einfaches Beispiel eine mehrzeilige Beschriftung in einer Zelle mit Einschränkungen, die sie an den Seiten der Zelle positionieren. Die Größe der mehrzeiligen Beschriftung kann auf verschiedene Arten geändert werden, um den Text aufzunehmen. Die Zelle sollte die Breite der Sammlungsansicht ausfüllen und ihre Höhe entsprechend anpassen. Stattdessen haben die Zellen eine zufällige Größe und es kommt sogar zu einem Absturz, wenn die Zellengröße größer als die nicht scrollbare Dimension der Sammlungsansicht ist.

iOS 8 führt die Methode ein systemLayoutSizeFittingSize: withHorizontalFittingPriority: verticalFittingPriority:Für jede Zelle in der Sammlungsansicht ruft das Layout diese Methode für die Zelle auf und übergibt die geschätzte Größe. Für mich wäre es sinnvoll, diese Methode für die Zelle zu überschreiben, die angegebene Größe zu übergeben und die horizontale Einschränkung auf erforderlich und die vertikale Einschränkung auf eine niedrige Priorität zu setzen. Auf diese Weise wird die horizontale Größe auf den im Layout festgelegten Wert festgelegt und die vertikale Größe kann flexibel sein.

Etwas wie das:

- (UICollectionViewLayoutAttributes *)preferredLayoutAttributesFittingAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes {
    UICollectionViewLayoutAttributes *attributes = [super preferredLayoutAttributesFittingAttributes:layoutAttributes];
    attributes.size = [self systemLayoutSizeFittingSize:layoutAttributes.size withHorizontalFittingPriority:UILayoutPriorityRequired verticalFittingPriority:UILayoutPriorityFittingSizeLevel];
    return attributes;
}

Die durch diese Methode zurückgegebenen Größen sind jedoch völlig seltsam. Die Dokumentation zu dieser Methode ist für mich sehr unklar und erwähnt die Verwendung der Konstanten, UILayoutFittingCompressedSize UILayoutFittingExpandedSizedie nur eine Nullgröße und eine ziemlich große darstellen.

Ist der sizeParameter dieser Methode wirklich nur eine Möglichkeit, zwei Konstanten zu übergeben? Gibt es keine Möglichkeit, das Verhalten zu erreichen, das ich erwarte, um die richtige Höhe für eine bestimmte Größe zu erreichen?

Alternative Lösungen

1) Durch Hinzufügen von Einschränkungen, die eine bestimmte Breite für die Zelle angeben, wird das richtige Layout erzielt. Dies ist eine schlechte Lösung, da diese Einschränkung auf die Größe der Sammlungsansicht der Zelle festgelegt werden sollte, auf die sie keinen sicheren Verweis hat. Der Wert für diese Einschränkung könnte übergeben werden, wenn die Zelle konfiguriert wird, aber das scheint auch völlig uninteressant zu sein. Dies ist auch umständlich, da das Hinzufügen von Einschränkungen direkt zu einer Zelle oder ihrer Inhaltsansicht viele Probleme verursacht.

2) Verwenden Sie eine Tabellenansicht. Tabellenansichten funktionieren sofort, da Zellen eine feste Breite haben. Dies würde jedoch andere Situationen wie ein iPad-Layout mit Zellen mit fester Breite in mehreren Spalten nicht berücksichtigen.

Es hört sich so an, als ob Sie nach einer Möglichkeit suchen, mit UICollectionView ein Layout wie UITableView zu erstellen. Wenn Sie das wirklich möchten, können Sie dies mit einer benutzerdefinierten UICollectionViewLayout-Unterklasse (möglicherweise mit SBTableLayout ) tun .

Auf der anderen Seite, wenn Sie wirklich fragen, ob es einen sauberen Weg gibt, dies mit dem Standard-UICollectionViewFlowLayout zu tun, dann glaube ich, dass es keinen Weg gibt. Selbst mit den selbstformatierenden Zellen von iOS8 ist dies nicht einfach. Wie Sie sagen, besteht das grundlegende Problem darin, dass die Maschinen des Flusslayouts keine Möglichkeit bieten, eine Dimension zu fixieren und eine andere reagieren zu lassen. (Selbst wenn Sie dies könnten, wäre die Notwendigkeit, zwei Layoutdurchläufe für die Größe der mehrzeiligen Beschriftungen zu benötigen, zusätzlich komplex. Dies passt möglicherweise nicht dazu, wie Zellen mit Selbstgröße die gesamte Größe über einen Aufruf von systemLayoutSizeFittingSize berechnen möchten.)

Wenn Sie jedoch weiterhin ein tabellenansichtähnliches Layout mit einem Ablauflayout erstellen möchten, dessen Zellen ihre eigene Größe bestimmen und natürlich auf die Breite der Sammlungsansicht reagieren, ist dies natürlich möglich. Es gibt immer noch den chaotischen Weg. Ich habe es mit einer "Größenzelle" gemacht, dh einer nicht angezeigten UICollectionViewCell, die der Controller nur zur Berechnung der Zellengrößen aufbewahrt.

Dieser Ansatz besteht aus zwei Teilen. Der erste Teil besteht darin, dass der Delegierte der Sammlungsansicht die richtige Zellengröße berechnet, indem er die Breite der Sammlungsansicht berücksichtigt und die Größe der Zelle mithilfe der Größenzelle berechnet.

In Ihrem UICollectionViewDelegateFlowLayout implementieren Sie eine Methode wie die folgende:

func collectionView(collectionView: UICollectionView,
  layout collectionViewLayout: UICollectionViewLayout,
  sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
{
  // NOTE: here is where we say we want cells to use the width of the collection view
   let requiredWidth = collectionView.bounds.size.width

   // NOTE: here is where we ask our sizing cell to compute what height it needs
  let targetSize = CGSize(width: requiredWidth, height: 0)
  /// NOTE: populate the sizing cell's contents so it can compute accurately
  self.sizingCell.label.text = items[indexPath.row]
  let adequateSize = self.sizingCell.preferredLayoutSizeFittingSize(targetSize)
  return adequateSize
}

Dadurch wird in der Sammlungsansicht die Breite der Zelle basierend auf der umschließenden Sammlungsansicht festgelegt. Anschließend wird die Größenzelle aufgefordert, die Höhe zu berechnen.

Der zweite Teil besteht darin, die Größenzelle dazu zu bringen, ihre eigenen AL-Einschränkungen zur Berechnung der Höhe zu verwenden. Dies kann schwieriger sein als es sein sollte, da mehrzeilige UILabels effektiv einen zweistufigen Layoutprozess erfordern. Die Arbeit wird in der Methode erledigt preferredLayoutSizeFittingSize, die so ist:

 /*
 Computes the size the cell will need to be to fit within targetSize.

 targetSize should be used to pass in a width.

 the returned size will have the same width, and the height which is
 calculated by Auto Layout so that the contents of the cell (i.e., text in the label)
 can fit within that width.

 */
 func preferredLayoutSizeFittingSize(targetSize:CGSize) -> CGSize {

   // save original frame and preferredMaxLayoutWidth
   let originalFrame = self.frame
   let originalPreferredMaxLayoutWidth = self.label.preferredMaxLayoutWidth

   // assert: targetSize.width has the required width of the cell

   // step1: set the cell.frame to use that width
   var frame = self.frame
   frame.size = targetSize
   self.frame = frame

   // step2: layout the cell
   self.setNeedsLayout()
   self.layoutIfNeeded()
   self.label.preferredMaxLayoutWidth = self.label.bounds.size.width

   // assert: the label's bounds and preferredMaxLayoutWidth are set to the width required by the cell's width

   // step3: compute how tall the cell needs to be

   // this causes the cell to compute the height it needs, which it does by asking the 
   // label what height it needs to wrap within its current bounds (which we just set).
   let computedSize = self.systemLayoutSizeFittingSize(UILayoutFittingCompressedSize)

   // assert: computedSize has the needed height for the cell

   // Apple: "Only consider the height for cells, because the contentView isn't anchored correctly sometimes."
   let newSize = CGSize(width:targetSize.width,height:computedSize.height)

   // restore old frame and preferredMaxLayoutWidth
   self.frame = originalFrame
   self.label.preferredMaxLayoutWidth = originalPreferredMaxLayoutWidth

   return newSize
 }

(Dieser Code wurde aus dem Apple-Beispielcode aus dem Beispielcode der WWDC2014-Sitzung in "Advanced Collection View" angepasst.)

Ein paar Punkte zu beachten. Mit layoutIfNeeded () wird das Layout der gesamten Zelle erzwungen, um die Breite des Etiketts zu berechnen und festzulegen. Das reicht aber nicht. Ich glaube, Sie müssen auch festlegen preferredMaxLayoutWidth, dass das Etikett diese Breite mit dem automatischen Layout verwendet. Und nur dann können Sie verwenden systemLayoutSizeFittingSize, um die Zelle dazu zu bringen, ihre Höhe unter Berücksichtigung des Etiketts zu berechnen.

Mag ich diesen Ansatz? Nein!! Es fühlt sich viel zu komplex an und das Layout wird zweimal ausgeführt. Solange die Leistung kein Problem darstellt, möchte ich das Layout zur Laufzeit lieber zweimal ausführen, als es zweimal im Code definieren zu müssen. Dies scheint die einzige andere Alternative zu sein.

Ich hoffe, dass Zellen mit Selbstgröße irgendwann anders funktionieren und dies alles viel einfacher wird.

Beispielprojekt, das es bei der Arbeit zeigt.

Aber warum nicht einfach selbstleuchtende Zellen verwenden?

Theoretisch sollten die neuen Funktionen von iOS8 für "Zellen mit Selbstgröße" dies unnötig machen. Wenn Sie eine Zelle mit Auto Layout (AL) definiert haben, sollte die Sammlungsansicht so intelligent sein, dass sie sich selbst dimensionieren und korrekt anordnen kann. In der Praxis habe ich keine Beispiele gesehen, die dazu geführt haben, dass dies mit mehrzeiligen Etiketten funktioniert. Ich denke, das liegt zum Teil daran, dass der selbstgrößende Zellmechanismus immer noch fehlerhaft ist.

Aber ich wette, es liegt hauptsächlich an der üblichen Schwierigkeit des automatischen Layouts und der Beschriftungen, dass UILabels einen grundsätzlich zweistufigen Layoutprozess erfordern. Mir ist nicht klar, wie Sie beide Schritte mit Zellen mit Selbstgröße ausführen können.

Und wie gesagt, das ist wirklich ein Job für ein anderes Layout. Es gehört zum Kern des Flow-Layouts, Dinge mit einer Größe zu positionieren, anstatt eine Breite festzulegen, und sie können ihre Höhe auswählen.

Und was ist mit PreferredLayoutAttributesFittingAttributes :?

Die preferredLayoutAttributesFittingAttributes:Methode ist ein roter Hering, denke ich. Dies kann nur mit dem neuen selbstleimenden Zellmechanismus verwendet werden. Dies ist also nicht die Antwort, solange dieser Mechanismus unzuverlässig ist.

Und was ist los mit systemlayoutSizeFittingSize:?

Sie haben Recht, die Dokumente sind verwirrend.

Die Dokumente auf systemLayoutSizeFittingSize:und systemLayoutSizeFittingSize:withHorizontalFittingPriority:verticalFittingPriority:beide schlagen vor, dass Sie nur UILayoutFittingCompressedSizeund UILayoutFittingExpandedSizeals die übergeben sollten targetSize. Die Methodensignatur selbst, die Header-Kommentare und das Verhalten der Funktionen zeigen jedoch an, dass sie auf den genauen Wert des targetSizeParameters reagieren .

Wenn Sie die festlegen UICollectionViewFlowLayoutDelegate.estimatedItemSize, um den neuen Mechanismus für Zellen mit Selbstgröße zu aktivieren, scheint dieser Wert tatsächlich als targetSize übergeben zu werden. Und UILabel.systemLayoutSizeFittingSizescheint genau die gleichen Werte wie zurückzugeben UILabel.sizeThatFits. Dies ist verdächtig, da das Argument to systemLayoutSizeFittingSizeein grobes Ziel und das Argument to sizeThatFits:eine maximale Umschreibungsgröße sein soll.

Mehr Ressourcen

Es ist zwar traurig zu glauben, dass eine solche Routineanforderung "Forschungsressourcen" erfordern sollte, aber ich denke, dass dies der Fall ist. Gute Beispiele und Diskussionen sind:

• http://www.objc.io/issue-3/advanced-auto-layout-toolbox.html
• http://devetc.org/code/2014/07/07/auto-layout-and-views-that-wrap.html
• Code für WWDC2014-Sitzung 232, "Erweiterte Benutzeroberflächen mit Sammlungsansichten"

Es gibt einen saubereren Weg, dies zu tun als einige der anderen Antworten hier, und es funktioniert gut. Es sollte performant sein (Sammlungsansichten werden schnell geladen, keine unnötigen automatischen Layoutdurchläufe usw.) und keine magischen Zahlen wie eine feste Breite der Sammlungsansicht haben. Das Ändern der Größe der Sammlungsansicht, z. B. beim Drehen, und das anschließende Ungültigmachen des Layouts sollten ebenfalls hervorragend funktionieren.

1. Erstellen Sie die folgende Unterklasse für das Flusslayout

class HorizontallyFlushCollectionViewFlowLayout: UICollectionViewFlowLayout {

    // Don't forget to use this class in your storyboard (or code, .xib etc)

    override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? {
        let attributes = super.layoutAttributesForItemAtIndexPath(indexPath)?.copy() as? UICollectionViewLayoutAttributes
        guard let collectionView = collectionView else { return attributes }
        attributes?.bounds.size.width = collectionView.bounds.width - sectionInset.left - sectionInset.right
        return attributes
    }

    override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let allAttributes = super.layoutAttributesForElementsInRect(rect)
        return allAttributes?.flatMap { attributes in
            switch attributes.representedElementCategory {
            case .Cell: return layoutAttributesForItemAtIndexPath(attributes.indexPath)
            default: return attributes
            }
        }
    }
}

2. Registrieren Sie Ihre Sammlungsansicht für die automatische Größenanpassung

// The provided size should be a plausible estimate of the actual
// size. You can set your item size in your storyboard
// to a good estimate and use the code below. Otherwise,
// you can provide it manually too, e.g. CGSize(width: 100, height: 100)

flowLayout.estimatedItemSize = flowLayout.itemSize

3. Verwenden Sie die vordefinierte Breite + benutzerdefinierte Höhe in Ihrer Zellenunterklasse

override func preferredLayoutAttributesFittingAttributes(layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
    layoutAttributes.bounds.size.height = systemLayoutSizeFittingSize(UILayoutFittingCompressedSize).height
    return layoutAttributes
}

Eine einfache Möglichkeit, dies in iOS 9 in wenigen Codezeilen zu tun - beispielsweise die horizontale Vorgehensweise (Festlegen der Höhe an die Höhe der Sammlungsansicht):

Initialisieren Sie Ihr Flow-Layout estimatedItemSizefür die Sammlungsansicht mit einer Zelle, um die Größe selbst zu bestimmen:

self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
self.estimatedItemSize = CGSizeMake(1, 1);

Implementieren Sie den Delegaten für das Sammlungsansichtslayout (die meiste Zeit in Ihrem View Controller) collectionView:layout:sizeForItemAtIndexPath:. Ziel ist es, die feste Höhe (oder Breite) auf die Dimension "Sammlungsansicht" festzulegen. Der Wert 10 kann beliebig sein, aber Sie sollten ihn auf einen Wert setzen, der keine Einschränkungen verletzt:

- (CGSize)collectionView:(UICollectionView *)collectionView
                  layout:(UICollectionViewLayout *)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(10, CGRectGetHeight(collectionView.bounds));
}

Wenn Sie Ihre benutzerdefinierte Zellenmethode preferredLayoutAttributesFittingAttributes:überschreiben, berechnet dieser Teil tatsächlich Ihre dynamische Zellenbreite basierend auf Ihren Einschränkungen für das automatische Layout und der gerade festgelegten Höhe:

- (UICollectionViewLayoutAttributes *)preferredLayoutAttributesFittingAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes
{
    UICollectionViewLayoutAttributes *attributes = [layoutAttributes copy];
    float desiredWidth = [self.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].width;
    CGRect frame = attributes.frame;
    frame.size.width = desiredWidth;
    attributes.frame = frame;
    return attributes;
}

Versuchen Sie, Ihre Breite in den bevorzugten Layoutattributen festzulegen:

- (UICollectionViewLayoutAttributes *)preferredLayoutAttributesFittingAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes {
    UICollectionViewLayoutAttributes *attributes = [[super preferredLayoutAttributesFittingAttributes:layoutAttributes] copy];
    CGSize newSize = [self systemLayoutSizeFittingSize:CGSizeMake(FIXED_WIDTH,layoutAttributes.size) withHorizontalFittingPriority:UILayoutPriorityRequired verticalFittingPriority:UILayoutPriorityFittingSizeLevel];
    CGRect newFrame = attr.frame;
    newFrame.size.height = size.height;
    attr.frame = newFrame;
    return attr;
}

Natürlich möchten Sie auch sicherstellen, dass Sie Ihr Layout korrekt einrichten, um:

UICollectionViewFlowLayout *flowLayout = (UICollectionViewFlowLayout *) self.collectionView.collectionViewLayout;
flowLayout.estimatedItemSize = CGSizeMake(FIXED_WIDTH, estimatedHeight)];

Hier ist etwas, das ich auf Github gesetzt habe , das Zellen mit konstanter Breite verwendet und dynamischen Typ unterstützt, sodass die Höhe der Zellen aktualisiert wird, wenn sich die Schriftgröße des Systems ändert.

JA, dies kann mithilfe des automatischen Layouts programmgesteuert und durch Festlegen von Einschränkungen im Storyboard oder in xib erfolgen. Sie müssen eine Einschränkung hinzufügen, damit die Breitengröße konstant bleibt und die Höhe größer oder gleich festgelegt wird.
http://www.thinkandbuild.it/learn-to-love-auto-layout-programmatically/

http://www.cocoanetics.com/2013/08/variable-sized-items-in-uicollectionview/
Hope this wird hilfreich und lösen Sie Ihr Problem.