UITableView benutzerdefinierte Kopfzeile (wie FoodSpotting App)

Der Abschnitt Header ist ein UIView wie jeder andere auch. Sie können es so schön, so komplex oder so detailliert erstellen, wie Sie möchten, mit dem Interface Builder, wenn Sie möchten, usw. Das tableView:viewForheaderInSection Ihres Tabellendelegaten ist verantwortlich für die Rückgabe, genau wie für andere Zellenzeilen.

Was das kleine Dreieck anbetrifft: Ja, das hat uns ein bisschen (wir wollten etwas Ähnliches in unserer App) bis wir entdeckt haben, dass man die Ansicht mit der Reihe überlappen kann, indem man über seine Höhe "lügt": zB tableView:heightForHeaderInSection: gibt einen Wert zurück, der geringfügig kleiner ist als er tatsächlich ist. Mag nicht der "richtige" Weg sein, hat aber sehr gut für uns funktioniert. So:

Also ist die Kopfzeile eigentlich ein perfektes Rechteck, meist unten durchsichtig, mit einem kleinen "spähenden" Dreieck:

Sagen Sie iOS, dass der Header 80px hoch ist, wie folgt:

und es fängt an, die "Essensreihe" bei 80px zu zeichnen. Da die Header oben sind und der größte Teil des Headers bis auf den Pfeil transparent ist, sollten Sie diesen Effekt erhalten.

Ich habe das gewünschte Ergebnis auf andere Weise erreicht. Anstatt tableView:viewForheaderInSection: zu verwenden (was bei mir nicht funktioniert), habe ich eine Bildansicht hinzugefügt, die das Pfeilbild als Unteransicht der Kopfansicht enthält, und den Rahmen so eingestellt, dass er direkt unter der Kopfzeile liegt:

Wenn Sie genau hinsehen, gibt es in Foodspotting.app zwei Dateien (following-captionbubble-dark.png und [email protected]), die genau wie der oben in der Frage gezeigte Pfeil aussehen. Ich nehme an, sie hätten vielleicht eine ähnliche Technik benutzt. Ein großes Lob an das Foodspotting Team.