So fügen Sie einen Abstand zwischen UITableViewCell hinzu
Gibt es eine Möglichkeit, einen Abstand zwischen UITableViewCell hinzuzufügen?
Ich habe eine Tabelle erstellt und jede Zelle enthält nur ein Bild. Das Bild wird der Zelle folgendermaßen zugewiesen:
cell.imageView.image = [myImages objectAtIndex:indexPath.row];
dadurch wird das Bild jedoch vergrößert und passt in die gesamte Zelle. Zwischen den Bildern gibt es keinen Abstand.
Oder sagen wir auf diese Weise, dass die Bildhöhe z. 50, und ich möchte 20 Abstände zwischen den Bildern hinzufügen. Gibt es eine Möglichkeit, dies zu erreichen?
Auf diese Weise füge ich einen Abstand zwischen den Zellen hinzu, um numberOfSections = "Your array count" zu machen und jeden Abschnitt nur eine Zeile enthalten zu lassen. Und definieren Sie dann headerView und seine Höhe.
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return yourArry.count;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 1;
}
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return cellSpacingHeight;
}
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *v = [UIView new];
[v setBackgroundColor:[UIColor clearColor]];
return v;
}
Schnelle Version
Aktualisiert für Swift 3
Diese Antwort ist etwas allgemeiner als die ursprüngliche Frage für zukünftige Zuschauer. Dies ist ein ergänzendes Beispiel für das grundlegende UITableView-Beispiel für Swift .
Überblick
Die Grundidee besteht darin, für jedes Array-Element einen neuen Abschnitt (anstatt einer neuen Zeile) zu erstellen. Die Abschnitte können dann mithilfe der Höhe des Abschnittskopfs beabstandet werden.
Wie es geht
Richten Sie Ihr Projekt wie in UITableView-Beispiel für Swift beschrieben ein. _. (Fügen Sie also eine Variable
UITableViewhinzu und verbinden Sie den AusgangtableViewmit dem View Controller).Ändern Sie im Interface Builder die Hintergrundfarbe der Hauptansicht in hellblau und die Hintergrundfarbe
UITableViewin clear.Ersetzen Sie den ViewController.Swift-Code durch Folgendes.
ViewController.Swift
import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
// These strings will be the data for the table view cells
let animals: [String] = ["Horse", "Cow", "Camel", "Sheep", "Goat"]
let cellReuseIdentifier = "cell"
let cellSpacingHeight: CGFloat = 5
@IBOutlet var tableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
// These tasks can also be done in IB if you prefer.
self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellReuseIdentifier)
tableView.delegate = self
tableView.dataSource = self
}
// MARK: - Table View delegate methods
func numberOfSections(in tableView: UITableView) -> Int {
return self.animals.count
}
// There is just one row in every section
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1
}
// Set the spacing between sections
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return cellSpacingHeight
}
// Make the background color show through
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView = UIView()
headerView.backgroundColor = UIColor.clear
return headerView
}
// create a cell for each table view row
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell:UITableViewCell = self.tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as UITableViewCell!
// note that indexPath.section is used rather than indexPath.row
cell.textLabel?.text = self.animals[indexPath.section]
// add border and color
cell.backgroundColor = UIColor.white
cell.layer.borderColor = UIColor.black.cgColor
cell.layer.borderWidth = 1
cell.layer.cornerRadius = 8
cell.clipsToBounds = true
return cell
}
// method to run when table view cell is tapped
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
// note that indexPath.section is used rather than indexPath.row
print("You tapped cell number \(indexPath.section).")
}
}
Beachten Sie, dass indexPath.section anstelle von indexPath.row verwendet wird, um die richtigen Werte für die Array-Elemente und die Tap-Positionen zu erhalten.
Wie haben Sie die zusätzliche Polsterung/Platz rechts und links erhalten?
Ich habe es auf dieselbe Weise erhalten, wie Sie jeder Ansicht Abstand hinzufügen. Ich habe Auto-Layout-Einschränkungen verwendet. Verwenden Sie einfach das Stiftwerkzeug im Interface Builder, um Abstand für die führenden und nachlaufenden Abhängigkeiten hinzuzufügen.
Meine einfache Lösung mit Swift:
// Inside UITableViewCell subclass
override func layoutSubviews() {
super.layoutSubviews()
contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))
}
Ergebnis 
Ich musste das gleiche Konzept machen, dass UITableCells einen "Abstand" zwischen sich haben. Da Sie keinen Leerraum zwischen Zellen hinzufügen können, können Sie ihn fälschen, indem Sie die Zellenhöhe der UITableView bearbeiten und dann eine UIView zur contentView Ihrer Zelle hinzufügen. Hier ist ein Screenshot eines Prototyps, den ich in einem anderen Testprojekt gemacht habe, als ich das simulierte:
Hier ist etwas Code (Hinweis: Es gibt viele hartcodierte Werte zu Demonstrationszwecken)
Zuerst musste ich die Variable heightForRowAtIndexPath einstellen, um unterschiedliche Höhen auf der UITableViewCell zu berücksichtigen.
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString *text = [self.newsArray objectAtIndex:[indexPath row]];
if ([text isEqual:@"December 2012"])
{
return 25.0;
}
return 80.0;
}
Als Nächstes möchte ich das Aussehen und Verhalten der UITableViewCells so ändern, dass ich dies in der willDisplayCell:(NewsUITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath-Methode mache.
- (void)tableView:(UITableView *)tableView willDisplayCell:(NewsUITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
if (cell.IsMonth)
{
UIImageView *av = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, 20, 20)];
av.backgroundColor = [UIColor clearColor];
av.opaque = NO;
av.image = [UIImage imageNamed:@"month-bar-bkgd.png"];
UILabel *monthTextLabel = [[UILabel alloc] init];
CGFloat font = 11.0f;
monthTextLabel.font = [BVFont HelveticaNeue:&font];
cell.backgroundView = av;
cell.textLabel.font = [BVFont HelveticaNeue:&font];
cell.textLabel.textColor = [BVFont WebGrey];
}
if (indexPath.row != 0)
{
cell.contentView.backgroundColor = [UIColor clearColor];
UIView *whiteRoundedCornerView = [[UIView alloc] initWithFrame:CGRectMake(10,10,300,70)];
whiteRoundedCornerView.backgroundColor = [UIColor whiteColor];
whiteRoundedCornerView.layer.masksToBounds = NO;
whiteRoundedCornerView.layer.cornerRadius = 3.0;
whiteRoundedCornerView.layer.shadowOffset = CGSizeMake(-1, 1);
whiteRoundedCornerView.layer.shadowOpacity = 0.5;
[cell.contentView addSubview:whiteRoundedCornerView];
[cell.contentView sendSubviewToBack:whiteRoundedCornerView];
}
}
Beachten Sie, dass ich meine whiteRoundedCornerView-Höhe 70.0 erstellt habe. Dies ist der Grund für den simulierten Speicherplatz, da die Höhe der Zelle 80.0 beträgt. Mein contentView ist jedoch 70.0, was der Darstellung das Aussehen verleiht.
Es könnte andere Wege geben, um dies noch besser zu erreichen, aber so habe ich es auch gefunden. Ich hoffe es kann jemand anderem helfen.
Sie müssen Ihrem Bild einen Rahmen geben. Nicht getesteter Code lautet
cell.imageView.frame = CGRectOffset(cell.frame, 10, 10);
Wenn Sie bereits keine Abschnittskopfzeilen (oder Fußzeilen) verwenden, können Sie sie verwenden, um den Tabellenzellen beliebige Abstände hinzuzufügen. Erstellen Sie anstelle eines Abschnitts mit n Zeilen eine Tabelle mit n Abschnitten mit jeweils einer Zeile.
Implementieren Sie die tableView:heightForHeaderInSection:-Methode, um den Abstand zu steuern.
Sie können auch tableView:viewForHeaderInSection: implementieren, um zu steuern, wie der Abstand aussieht.
Ich denke, die einfachste Lösung, wenn Sie nur ein wenig Platz suchen und wahrscheinlich am wenigsten teuer wären, einfach die Zellrandfarbe auf die Hintergrundfarbe Ihrer Tabellen setzen und dann die Randbreite einstellen, um das gewünschte Ergebnis zu erhalten!
cell.layer.borderColor = blueColor.CGColor
cell.layer.borderWidth = 3
Ja, Sie können den Abstand (Abstand) zwischen zwei Zellen vergrößern oder verkleinern, indem Sie eine Basisansicht für die Inhaltsansicht in der Zelle erstellen. Legen Sie eine klare Farbe für den Hintergrund der Inhaltsansicht fest, und Sie können die Höhe der Basisansicht anpassen, um einen Abstand zwischen den Zellen zu schaffen.
Ich kann mir drei Ansätze vorstellen:
Erstellen Sie eine benutzerdefinierte Tabellenzelle, die die Ansicht der gesamten Zelle in der gewünschten Weise darstellt
Löschen Sie die Unteransichten von Der Bildansicht, anstatt das Bild zur Bildansicht hinzuzufügen. Erstellen Sie eine benutzerdefinierte Ansicht, die eine UIImageView für das Bild und eine andere Ansicht hinzufügt, möglicherweise eine einfache UIView, die die gewünschte Ansicht liefert Abstand und fügen Sie es als Unteransicht der Bildansicht hinzu.
- Ich möchte vorschlagen, dass Sie UIImageView direkt manipulieren, um eine feste Größe/Polsterung festzulegen, aber ich bin nirgends in der Nähe von Xcode, sodass ich nicht feststellen kann, ob/wie dies funktionieren würde.
Ist das sinnvoll?
Swift 4.2 Lösung
// Inside UITableViewCell subclass
override func layoutSubviews() {
super.layoutSubviews()
contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8))
}
Beispiel in Swift 3 ..
- Falten Sie eine einzelne Ansichtsanwendung
- fügen Sie TableView in View Controller hinzu
- fügen Sie eine benutzerdefinierte Zelle für eine Tablview-Zelle hinzu
view Controller-Code ist wie folgt
class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource { @IBOutlet weak var tableView: UITableView! var arraytable = [[String:Any]]() override func viewDidLoad() { super.viewDidLoad() arraytable = [ ["title":"About Us","detail":"RA-InfoTech Ltd -A Joint Venture IT Company formed by Bank Asia Ltd"], ["title":"Contact","detail":"Bengal Center (4th & 6th Floor), 28, Topkhana Road, Dhaka - 1000, Bangladesh"] ] tableView.delegate = self tableView.dataSource = self //For Auto Resize Table View Cell; tableView.estimatedRowHeight = 44 tableView.rowHeight = UITableViewAutomaticDimension //Detault Background clear tableView.backgroundColor = UIColor.clear }func numberOfSections (in tableView: UITableView) -> Int { return arraytable.count }
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 1 } // Set the spacing between sections func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat { return 10 } // Make the background color show through func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? { let headerView = UIView() headerView.backgroundColor = UIColor.clear return headerView } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "cell")! as! CustomCell cell.tv_title.text = arraytable[indexPath.section]["title"] as! String? cell.tv_details.text = arraytable[indexPath.section]["detail"] as! String? //label height dynamically increase cell.tv_details.numberOfLines = 0 //For bottom border to tv_title; let frame = cell.tv_title.frame let bottomLayer = CALayer() bottomLayer.frame = CGRect(x: 0, y: frame.height - 1, width: frame.width, height: 1) bottomLayer.backgroundColor = UIColor.black.cgColor cell.tv_title.layer.addSublayer(bottomLayer) //borderColor,borderWidth, cornerRadius cell.backgroundColor = UIColor.lightGray cell.layer.borderColor = UIColor.red.cgColor cell.layer.borderWidth = 1 cell.layer.cornerRadius = 8 cell.clipsToBounds = true return cell } }Laden Sie die vollständige Quelle zu Github herunter: Link
Ich denke, das ist die sauberste Lösung:
class MyTableViewCell: UITableViewCell {
override func awakeFromNib() {
super.awakeFromNib()
layoutMargins = UIEdgeInsetsMake(8, 0, 8, 0)
}
}
Dieser Artikel hat geholfen, es ist so ziemlich das, was die anderen Antworten sagten, aber zusammenfassend und prägnant
https://medium.com/@andersongusmao/left-and-right-margins-on-uitableviewcell-595f0ba5f5e6
In diesem Fall wendet er sie nur auf die linke und rechte Seite an, aber mit der UIEdgeInsetsMake-Init können alle vier Punkte aufgefüllt werden.
func UIEdgeInsetsMake (_ oben: CGFloat, _ links: CGFloat, _ unten: CGFloat, _ rechts: CGFloat) -> UIEdgeInsets
Beschreibung
Erzeugt eine Edge-Einfügung für eine Schaltfläche oder Ansicht . Ein Einschub ist ein Rand um ein Rechteck. Positive Werte stehen für Ränder, die näher an der Mitte des Rechtecks liegen, während negative Werte Ränder darstellen, die weiter vom Mittelpunkt entfernt sind.Parameter
top: Der obere Teil eines Objekts.
left: Der Einschub links von einem Objekt
bottom: Der Einschub am unteren Rand eines Objekts.
right: Der Einsatz rechts von einem Objekt.Kehrt zurück
Ein Einschub für eine Schaltfläche oder Ansicht
Beachten Sie, dass auch UIEdgeInsets verwendet werden können, um dies zu erreichen.
Xcode 9.3/Swift 4
Ich habe es in Swift 4 so gelöst.
Ich erstelle eine Erweiterung von UITableViewCell und füge folgenden Code hinzu:
override open var frame: CGRect {
get {
return super.frame
}
set (newFrame) {
var frame = newFrame
frame.Origin.y += 10
frame.Origin.x += 10
frame.size.height -= 15
frame.size.width -= 2 * 10
super.frame = frame
}
}
override open func awakeFromNib() {
super.awakeFromNib()
layer.cornerRadius = 15
layer.masksToBounds = false
}
Ich hoffe es hilft dir.
Basierend auf Husams Antwort: Wenn Sie die Zellenebene anstelle der Inhaltsansicht verwenden, können Sie bei Bedarf einen Rahmen um die gesamte Zelle und das Zubehör hinzufügen. Diese Methode erfordert eine sorgfältige Anpassung der unteren Randbedingungen der Zelle sowie der Einfügungen, da sonst die Ansicht nicht korrekt ist.
@implementation TableViewCell
- (void)awakeFromNib {
...
}
- (void) layoutSubviews {
[super layoutSubviews];
CGRect newFrame = UIEdgeInsetsInsetRect(self.layer.frame, UIEdgeInsetsMake(4, 0, 4, 0));
self.layer.frame = newFrame;
}
@end
Schauen Sie in - (UIEdgeInsets) layoutMargins; In der Zelle
Ich war im selben Boot. Zuerst habe ich versucht, zu Abschnitten zu wechseln, aber in meinem Fall waren es mehr Kopfschmerzen als ich dachte, also habe ich nach einer Alternative gesucht. Um weiterhin Zeilen verwenden (und verwirren Sie sich nicht damit, wie Sie auf Ihre Modelldaten zugreifen), hier ist das, was für mich nur funktioniert, indem Sie mit einer Maske :
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath)
{
let verticalPadding: CGFloat = 8
let maskLayer = CALayer()
maskLayer.cornerRadius = 10 //if you want round edges
maskLayer.backgroundColor = UIColor.black.cgColor
maskLayer.frame = CGRect(x: cell.bounds.Origin.x, y: cell.bounds.Origin.y, width: cell.bounds.width, height: cell.bounds.height).insetBy(dx: 0, dy: verticalPadding/2)
cell.layer.mask = maskLayer
}
Alles, was Sie noch tun müssen, ist die Zellenhöhe um den gleichen Wert wie Ihre gewünschte verticalPadding erhöhen und dann Ihr inneres Layout so ändern, dass alle Ansichten, die einen Abstand zu den Rändern der Zelle hatten, den gleichen Abstand haben verticalPadding/2. Kleiner Nachteil: Sie erhalten verticalPadding/2-Abstand sowohl oben als auch unten in der tableView. Sie können dies jedoch schnell beheben, indem Sie tableView.contentInset.bottom = -verticalPadding/2 und tableView.contentInset.top = -verticalPadding/2 einstellen. Hoffe das hilft jemandem!
Meine Situation war, dass ich benutzerdefinierte UIView verwendet habe, um viewForHeader in section auch heightForHeader in section zu verwenden, mit konstanter Höhe, sagen wir 40. Das Problem war, wenn keine Daten vorhanden waren, die alle Header-Ansichten miteinander berührten. Also wollte ich zwischen den Abschnitten ohne Daten ein Leerzeichen setzen, also habe ich das Problem behoben, indem ich einfach die Ebene "tableview style" in "Group" geändert habe. Und es funktionierte für mich.
Ich hatte Probleme damit, dies neben den Hintergrundfarben und den zusätzlichen Ansichten in der Zelle zum Laufen zu bringen. Am Ende musste:
1) Legen Sie die Eigenschaften der Zellenhintergrundansicht mit einem UIView-Satz mit Hintergrundfarbe fest.
let view = UIView()
view.backgroundColor = UIColor.white
self.backgroundView = view
2) Positionieren Sie diese Ansicht in layoutSubviews neu, um die Idee des Abstandes hinzuzufügen
override func layoutSubviews() {
super.layoutSubviews()
backgroundView?.frame = backgroundView?.frame.inset(by: UIEdgeInsets(top: 2, left: 0, bottom: 0, right: 0)) ?? CGRect.zero
}
Die Verwendung der Überschriften als Abstand würde gut funktionieren, wenn Sie keine Überschriften verwenden möchten. Ansonsten wohl nicht die beste Idee. Was ich denke, ist eine benutzerdefinierte Zellansicht zu erstellen.
Beispiele:
Erstellen Sie in der benutzerdefinierten Zelle eine Hintergrundansicht mit Einschränkungen, damit nicht die gesamte Zelle ausgefüllt wird.
Machen Sie dann den Hintergrund der Tabellenansicht unsichtbar und entfernen Sie die Trennzeichen:
// Make the background invisible
tableView.backgroundView = UIView()
tableView.backgroundColor = .clear
// Remove the separators
tableview.separatorStyle = .none
Wenn Sie die Schnitt- und Zeilennummer Ihrer Tabellenansicht nicht ändern möchten (wie ich es getan habe), gehen Sie wie folgt vor:
1) Fügen Sie eine ImageView am unteren Rand Ihrer Tabellenzellenansicht hinzu.
2) Stellen Sie die gleiche Farbe wie die Hintergrundfarbe der Tabellenansicht ein.
Ich habe dies in meiner Anwendung getan und es funktioniert einwandfrei. Prost! : D
Schauen Sie sich meine -Lösung auf GitHub an, mit Unterklassen von UITableView und Laufzeitfunktionen von Objective-C.
Es verwendet im Wesentlichen die private Datenstruktur von Apple UITableViewRowData, die ich gefunden habe, um den privaten Laufzeitheader von UITableView zu durchsuchen:
und hier ist die gewünschte private Klasse, die alles enthält, was Sie benötigen, um die Abstände Ihrer Zellen so zu gestalten, wie Sie möchten, ohne sie in Zellklassen zu setzen: