Wie man Abstand zwischen UITableViewCell hinzufügt

Swift Version

Aktualisiert Swift 3

Diese Antwort ist etwas allgemeiner als die ursprüngliche Frage im Interesse der zukünftigen Zuschauer. Es ist ein ergänzendes Beispiel, um die grundlegenden UITableView Beispiel für Swift.

Übersicht

Die grundlegende Idee ist, erstellen Sie einen neuen Abschnitt (anstatt eine neue Zeile) für jedes array-Element. Die Abschnitte können dann werden in Abständen über die Abschnittsüberschriften der Höhe.

Wie es zu tun

• Einrichten Ihres Projekts, wie beschrieben, in UITableView Beispiel für Swift. (Das ist, fügen Sie ein UITableView und Haken bis die tableView Steckdose, um den View-Controller).

• In den Interface Builder, ändern Sie die main-view die Hintergrundfarbe auf hellblau und die UITableView Hintergrundfarbe zu deaktivieren.

• Ersetzen Sie die ViewController.swift-code durch den folgenden.

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 ist eher als indexPath.row um die richtigen Werte für die array-Elemente und Tippen Sie auf Positionen.

Wie bist du auf die extra-Polsterung/Raum auf der rechten und linken Seite?

Ich habe es auf die gleiche Weise fügen Sie Abstand zu einer beliebigen Ansicht. Ich benutzte auto layout constraints. Verwenden Sie einfach die pin-Werkzeug in Interface Builder hinzufügen, um den Abstand für die führende und nachfolgende Einschränkungen.

InformationsquelleAutor der Antwort Suragch

Ich musste das tun, das gleiche Konzept mit UITableCells haben einen "Raum" zwischen Ihnen. Da kann man nicht buchstäblich, fügen Sie ein Leerzeichen zwischen den Zellen Sie können gefälschte es durch die Manipulation der UITableView die Zelle Höhe und fügt dann einen UIView der contentView Ihrer Zelle. Hier ist ein Bild von einem Prototypen, den ich in einem anderen Projekt testen wenn ich die Simulation:

Hier ist ein code (Hinweis: es gibt viele hart codierten Werte für Demo-Zwecke)

Erste, die ich brauchte, um die heightForRowAtIndexPath um unterschiedliche Höhen auf der UITableViewCell.

- (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;
}

Weiter, ich will manipulieren Sie das Aussehen und das Gefühl des UITableViewCells also ich weiß, dass in der willDisplayCell:(NewsUITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath Methode.

- (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 aus meinem whiteRoundedCornerView Höhe 70,0 und das ist, was bewirkt, dass die simulierten Raum, weil die Zelle die Höhe ist eigentlich 80.0 aber meine contentView ist 70.0, die es gibt das Aussehen.

Möglicherweise gibt es andere Möglichkeiten der Bewältigung dieser sogar noch besser, aber es ist nur, wie ich gefunden, wie es zu tun. Ich hoffe, es kann jemand anderes helfen.

InformationsquelleAutor der Antwort Flea

Wenn Sie nicht den Abschnitt Header (oder Fußzeile) bereits haben, können Sie verwenden Sie zum hinzufügen von beliebigen Abstand um die Zellen der Tabelle. Anstatt einen Abschnitt mit n Zeilen, erstellen Sie eine Tabelle mit n Abschnitten mit einer Zeile je.

Umsetzung der tableView:heightForHeaderInSection: Methode zur Steuerung der Abstände.

Möglicherweise möchten Sie auch zu implementieren tableView:viewForHeaderInSection: zu kontrollieren, was den Abstand aussieht.

InformationsquelleAutor der Antwort Ferruccio

Drei Ansätze, die ich mir denken kann:

1. Erstellen einer benutzerdefinierten Tabelle die Zelle, die aus legt die Sicht auf die gesamte Zelle in der Weise, dass Sie den Wunsch

2. Anstatt das Bild
   Bild-Ansicht, löschen Sie die Untersichten von
   das Bild anzuzeigen, erstellen Sie eine benutzerdefinierte
   anzeigen, die fügt eine UIImageView für das Bild und eine andere Sichtweise, vielleicht eine einfache UIView, die den gewünschten Abstand ein, und fügen Sie es als Untersicht
   Bild-Ansicht.

3. Möchte ich vorschlagen, dass Sie manipulieren die UIImageView direkt zum festlegen einer bestimmten Größe/Polsterung, aber ich bin nirgendwo in der Nähe von Xcode also ich kann nicht bestätigen, ob/wie das funktionieren würde.

Macht das Sinn?

InformationsquelleAutor der Antwort csano

Beispiel in swift 3..

1. Falte eine single view application
2. fügen Sie in der Ansicht tableview-controller
3. hinzufügen customcell für tablview Zelle

4. view-controller-code ist Balg wie

      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(tableView: UITableView) -> Int {
   zurück arraytable.zählen
   }

      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
     }
   
      }

5. Download full source auf Github : link

   https://github.com/enamul95/CustomSectionTable

InformationsquelleAutor der Antwort Enamul Haque

Ich denke, das ist die sauberste Lösung:

class MyTableViewCell: UITableViewCell {
    override func awakeFromNib() {
        super.awakeFromNib()
        layoutMargins = UIEdgeInsetsMake(8, 0, 8, 0)
    }
}

InformationsquelleAutor der Antwort Aviel Gross

Meiner situation war, dass ich custom-UIView zu viewForHeader in Abschnitt heightForHeader in Abschnitt zurück konstanter Höhe, sagen wir 40, Problem war, wenn keine Daten vorhanden alle header-Ansichten wurden berührt einander. also ich wollte den Raum zwischen dem Abschnitt, in fehlenden Daten, damit ich behoben, indem nur die änderung "tableview " Stil" Flugzeug "Gruppe".und es funktionierte für mich.

InformationsquelleAutor der Antwort Avijit Nagare

Check out my Lösung auf GitHub mit Unterklassen von UITableView und mit runtime-features von Objective-C.

Es ist im Grunde verwendet Apple eigenes Daten-Struktur UITableViewRowData dass ich auf der Suche eigenes runtime-header UITableView:

https://github.com/JaviSoto/iOS10-Runtime-Headers/blob/master/Frameworks/UIKit.framework/UITableView.h

und hier ist gewünschten privaten Klasse, enthält alles, was Sie brauchen, um das layout Ihrer Zellen Abständen, aber Sie wollen, ohne es in den Zellen' Klassen:

https://github.com/JaviSoto/iOS10-Runtime-Headers/blob/master/Frameworks/UIKit.framework/UITableViewRowData.h

InformationsquelleAutor der Antwort Gleb Linnik

Ich war im selben Boot. Zuerst habe ich versucht Umstellung auf Sektionen, aber in meinem Fall endete es als eher Kopfschmerzen, als ich ursprünglich dachte, so habe ich nach einer alternative. Zu halten die Verwendung von Zeilen (und nicht Durcheinander mit, wie Sie den Zugriff auf Ihre Modell-Daten), hier ist was für mich gearbeitet nur durch 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 zu tun haben, ist die Zelle ist die Höhe, die größer durch den gleichen Wert wie Ihre gewünschte verticalPaddingund dann ändern Sie Ihre innere layout, so dass alle Ansichten, hatte Abstand zu den Rändern der Zelle haben, die gleiche Abstände erhöht verticalPadding/2. Kleine Nachteil: Sie bekommen verticalPadding/2 Polsterung sowohl auf der Ober-und Unterseite des tableView, aber Sie können schnell zu beheben, indem tableView.contentInset.bottom = -verticalPadding/2 und tableView.contentInset.top = -verticalPadding/2. Hoffe, das hilft jemand!

InformationsquelleAutor der Antwort Raimondo Previdi

fügen Sie eine innere Sicht auf die Zelle, fügen Sie dann Ihre eigene Ansichten.

InformationsquelleAutor der Antwort user3812138