it-swarm.com.de

Wie gebe ich zwischen zwei Zellen in der Tabellenansicht Platz?

Ich möchte ein Leerzeichen zwischen zwei Zellen in der Tabellenansicht,

Ich möchte eine Zelle wie diese,

enter image description here

Wie kann ich das machen?

46
Ankit Chauhan

Sie können einen TableView-Abschnitt auch in UITableView erstellen. Diese Methoden sind obligatorisch. Erstellen Sie also Abschnitte und in jedem Abschnitt können Sie einzelne Zellen wie in Ihrem Bild erstellen.

22
DShah

sie können den Abstand zwischen den Zellen nicht direkt festlegen. Sie können jedoch die Höhe für die Kopfzeile im Abschnitt einstellen, um dasselbe Ergebnis zu erzielen.

1.Stellen Sie die Anzahl der benötigten Zellen als Abschnitte ein:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView 
{
    return 3; // in your case, there are 3 cells
}

2.zurück zu jeder Sektion nur 1 Zelle

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 1;
}

3.Stellen Sie die Höhe für den Header im Abschnitt ein, um den Abstand zwischen den Zellen festzulegen

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 10.; // you can have your own choice, of course
}

4.Stellen Sie die Hintergrundfarbe der Kopfzeile auf "Farbe", damit sie nicht seltsam aussieht

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *headerView = [[UIView alloc] init];
    headerView.backgroundColor = [UIColor clearColor];
    return headerView;
}
119
Brian

Die beste Möglichkeit, um Platz zwischen zwei Zellen in TableView zu erhalten, deklarieren Sie auf diese Weise die Anzahl der Abschnitte, die Sie in der Delegiermethode für die Anzahl der Sektionen möchten

Zum Beispiel haben Sie ein Array von 10 Objekten

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
  return [array count]; //array count returns 10
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {


    return 1;// this should be one because it will create space between two cells if you want space between 4 cells you can modify it.
}

Dann ist der wichtige Punkt in der Delegatenmethode cellForRowAtIndexPath, die Sie verwenden müssen, um indexpath.section zu verwenden, nicht jedoch indexpath.row

cell.textLabel.text=[NSString stringWithFormat:@"%@",[array objectAtIndex:indexPath.section]];

Überprüfen Sie Ihre Tabellenansicht auf den Abstand zwischen zwei Zellen. Genießen!

25
obaid

Die Antwort auf mehrere Abschnitte würde funktionieren, aber sie ist extrem spröde und lässt keine actual - Abschnitte zu. Stattdessen sollten Sie eine benutzerdefinierte Zelle oder einen Prototyp einer benutzerdefinierten Zelle erstellen, der ganz unten und/oder oben eine Lücke aufweist.

Verwenden Sie Ihre Streben und Federn in IB, um diese gleichmäßige Lücke beizubehalten, und verwenden Sie heightForRowAtIndexPath, um eine Höhe zurückzugeben, die die Lücke enthält. 

16
averydev

Ziel c

 UIView* separatorLineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 3)];/// change size as you need.       
 separatorLineView.backgroundColor = [UIColor whiteColor];// you can also put image here
 [cell.contentView addSubview:separatorLineView];

Swift 3 (Das gleiche gilt auch für Swift 4)

var separatorLineView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 3))
/// change size as you need.       
separatorLineView.backgroundColor = UIColor.white
// you can also put image here
cell.contentView.addSubview(separatorLineView)

Es hat für mich funktioniert.

12
Pradumna Patil

Wenn jemand nach Swift Version sucht. Bitte schön.

func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 10; // space b/w cells
}

func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return items.count // count of items
}

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let header = UIView()
    header.backgroundColor = UIColor.clearColor()
    return header
}

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 1
}
10
Adnan

Für Benutzer, die nach einer alternativen Methode suchen, um Lücken zwischen Zellen anzuzeigen, ohne Abschnitte zu verwenden, möchten Sie möglicherweise alternative Farben und Höhen wie unten gezeigt anzeigen. Verwenden Sie clearColor für den Abstand.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

    if (indexPath.row % 2 == 1)
    {
        static NSString *CellIdentifier = @"cellID1";
        UITableViewCell *cell = (UITableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        if (cell == nil) {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                            reuseIdentifier:CellIdentifier];
        }

        cell.backgroundColor = [UIColor colorWhite];

        return cell;

    } else {

        static NSString *CellIdentifier2 = @"cellID2";
        UITableViewCell *cell2 = (UITableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier2];
        if (cell2 == nil) {
            cell2 = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                            reuseIdentifier:CellIdentifier2];
        }
        cell2.backgroundColor = [UIColor clearColor];

        return cell2;
    }

}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.row % 2 == 1) {
        return 40.0;
    } else {
        return 2.0;
    }
}
6

Fügen Sie diese Zeilen in die cellForRowAtIndexPathUITableViewDelegate-Methode ein, bevor Sie die Zelle zurückgeben.

let separator = UIView(frame: CGRectMake(0, 0, cell!.bounds.size.width, 1))
separator.backgroundColor = UIColor.whiteColor()
cell.contentView.addSubview(separator)
5
PAC

Manchmal möchten Sie vielleicht die Tabellenansicht wirklich in Zeilen unterteilt lassen und einen Abschnitt haben. Dies kann beispielsweise der Fall sein, wenn Sie eine benutzerdefinierte Kopfzeile für diese Tabellenansicht anzeigen müssen, die beim Blättern durch den Abschnitt beibehalten wird.

Was ich in diesem Fall empfehlen würde, ist die Rückgabe eines größeren Floats als die normale Höhe einer Zelle in:

- (float)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

stellen Sie dann sicher, dass der Tabellenstil "Normal" und das Zellentrennzeichen "Keine" ist. Sie können dies in der XIB-Datei selbst oder im Code tun:

self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone; self.tableView.style = UITableViewStylePlain;

Fügen Sie möglicherweise auch den Auswahlstil der Zelle zu "Keine" hinzu (ansonsten sehen Sie so aus, als würden Sie mehr als nur den sichtbaren Teil der Zelle auswählen).

cell.selectionStyle = UITableViewCellSelectionStyleNone;

Dadurch entsteht der Eindruck eines Raums zwischen den Zellen, während sie gleichzeitig als Zeilen in einem Abschnitt bleiben (was manchmal gewünscht wird).

4
Andrei

Ich habe einen einfachen und schnellen Ansatz dafür verwendet (mit Storyboard)

  • Fügen Sie UITableView in Ihrem Controller hinzu
  • Setzen Sie den Trennstil auf "none" (aus dem Attribut-Inspector).
  • Stellen Sie die Höhe der Reihe um 5 Punkte von oben und unten von der gewünschten Höhe ein 
  • Fügen Sie nun ein Bild in die Zelle ein, stecken Sie es von links und rechts fest, lassen Sie jedoch einen Abstand von 5 Punkten (für das Auffüllen wie ein Gefühl) und stellen Sie den Hintergrund des Bildes auf den gewünschten Hintergrund für die Zelle ein

Wenn die Tabellenansicht geladen wird, werden Leerzeichen zwischen den Zellen angezeigt. 

4
Abdullah Saeed

Für den Abstand zwischen den Zellen wie in Ihrem Screenshot sind keine benutzerdefinierten Zellen erforderlich (für ihr Aussehen wie den Farbverlauf bkg usw. ist dies auf jeden Fall eine gute Idee, aber dies hilft nicht für den Abstand zwischen den Zellen.) Zellen)

Um diese Art von Abstand zu erreichen, verwenden Sie einfach verschiedene Abschnitte in Ihrem UITableView.

[BEARBEITEN] Alles wird erklärt In Apples TableView-Programmierhandbuch (und es lohnt sich, es zu lesen, da es eine Menge Dinge enthält, die Sie über Tabellenansichten wissen sollten)

3
AliSoftware

Was Sie visuell erreichen möchten, ist dasselbe, als würden Sie den Inhalt jeder Zelle in einer Containeransicht mit grauem Hintergrund hinzufügen und diese Ansicht in der Zelle haben. Ich glaube nicht, dass es notwendig ist, Leerzeichen zwischen den Zellen hinzuzufügen.

2
jacklehamster

Meine einfache Lösung mit Swift

// Inside UITableViewCell subclass
override func layoutSubviews() {
    let f = contentView.frame
    let fr = UIEdgeInsetsInsetRect(f, UIEdgeInsetsMake(10, 10, 10, 10))
    contentView.frame = fr
}

oder einzeiliger Code 

override func layoutSubviews() {
    contentView.frame = UIEdgeInsetsInsetRect(contentView.frame, UIEdgeInsetsMake(10, 10, 10, 10))
}

Ergebnis enter image description here

2
Husam

* ARBEITEN MIT IOS 9 XCODE 7.3 *

Der einfachste Weg, dies zu erreichen, besteht darin, diesen Code einfach zu Ihrer cellForRowAtIndexPath-Methode hinzuzufügen.

    cell.separatorInset.left = 20.0
    cell.separatorInset.right = 20.0
    cell.separatorInset.top = 20.0
    cell.separatorInset.bottom = 20.0
    cell.layer.borderWidth = 3
    cell.layer.cornerRadius = 20.0
    cell.layer.borderColor = UIColor.flatSkyBlueColorDark().CGColor

Gehen Sie dann zu Ihrem Storyboard und klicken Sie auf die Tabellenansicht. Gehen Sie zum Identitätsinspektor und ändern Sie die Hintergrundfarbe der Ansicht in die Rahmenfarbe, die in der Methode festgelegt wurde. Voila! Spielen Sie mit den Werten, um die gewünschte Ausgabe zu erhalten. Hoffe das hilft!

Hinweis: Wenn Sie die Chameleon-Bibliothek verwenden, müssen Sie die Hintergrundfarbe für die Ansicht im Code festlegen, nicht über das Storyboard-Plugin. Aus irgendeinem Grund scheint die Farbe von einer Schattierung abzulenken. 

2
Craig

Ich weiß nicht, warum all die Antworten so kompliziert sind. KIS, nur mit Storyboard habe ich eine UIView in die tableCell Content View eingefügt; Jetzt ist die UIView-Höhe geringer als die Höhe der Inhaltsansicht, und das ist es!

Spielen Sie mit der Farbe der Inhaltsansicht und der UIView-Farbe, um das gewünschte Ergebnis zu erhalten.

2
Yizhar

Nun, ich habe einfach den Raum simuliert, indem ich eine einfache benutzerdefinierte Zelle erstellt habe, die etwas größer ist als ich möchte (Zelle + Lücke/2), und dann den gesamten Inhalt meiner Zelle in eine Innenansicht stellen.

Stellen Sie dann die oberste Ansicht Ihrer Zelle als Farbe des Hintergrunds und die Innenansicht als Ihre tatsächliche Zelle ein. Und Sie haben die Illusion, zwischen den Zellen Platz zu haben, wenn es sich eigentlich nur um eine größere Zelle mit Grenzen handelt.

1
Gil Sand

1) Erstellen Sie zuerst 2 Abschnitte in der Tabellensicht . 2) Erstellen Sie eine leere Zelle . 3) Erstellen Sie die Zelle mit den Daten, die Sie anzeigen möchten . 4) Verwenden Sie die Methode 

  • (CGFloat) tableView: (UITableView *) tableView heightForRowAtIndexPath: (NSIndexPath *) Indexpfad { If (indexPath.section == 0) {

    if (indexPath.row% 2! = 1) { return 15.0; } else { return 100; }}sonst

    if (indexPath.row % 2 != 1) {
        return 100.0;
    } else {
        return 15.0;
    }
    

}

Dadurch wird Platz zwischen den Zellen hinzugefügt. Es hat für mich funktioniert.

0
Mohit Bhakre

Hier ist meine Methode mit Swift 3:

Fügen Sie in ViewDidLoad () Folgendes hinzu:

self.tableView.rowHeight = 500.0

Fügen Sie in der Tabellenansicht "CellForRowAt" Folgendes hinzu:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)

    // Configure the cell...
    var actualContentView = UIView()
    actualContentView.frame = CGRect(x: 10, y: 10, width: cell.contentView.frame.width - 20, height: cell.contentView.frame.height - 20)
    actualContentView.backgroundColor = UIColor.blue
    cell.contentView.addSubview(actualContentView)

    return cell
}
0
Raymond Yip

In der Tabellensicht DataSource gibt es zwei Methoden mit der Bezeichnung Anzahl der Abschnitte und Anzahl der Zeilen.__Im Abschnitt return 3; In Zeilen Rückkehr 1; 

0
kiran kumar
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{

    return __titlesArray.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 1;
}
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 10;
}
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *header = [[UIView alloc]init];
    header.backgroundColor = [UIColor clearColor];
    return header;

}
0
Ahmed Abdallah

Ich benutze wie:

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    return 194.0;
}

override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
    cell.contentView.backgroundColor = UIColor.clearColor()
    let whiteRoundedView : UIView = UIView(frame: CGRectMake(0, 0, self.view.frame.size.width, 185))

    whiteRoundedView.backgroundColor = UIColor( red: CGFloat(61.0/255.0), green: CGFloat(117.0/255.0), blue: CGFloat(147.0/255.0), alpha: CGFloat(1.0))

    whiteRoundedView.layer.masksToBounds = false
    whiteRoundedView.layer.cornerRadius = 3.0
    whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1)
    whiteRoundedView.layer.shadowOpacity = 0.5
    cell.contentView.addSubview(whiteRoundedView)
    cell.contentView.sendSubviewToBack(whiteRoundedView)
}

Holen Sie sich Farbcode-RGB-Werte von:

 enter image description here

0
Mannam Brahmam

Sie müssen nicht für jede Zelle jeden Abschnitt zuweisen. Erstellen Sie einfach einen UIView (Container) in Ihrer Zelle, umranden Sie ihn mit der Zellansicht. Und wir gestalten Komponenten wie Beschriftung, Text und Bild in diesem Container.

0
Gintama

Ich empfehle, eine benutzerdefinierte UITableViewCell-Basisklasse zu erstellen und diese Klasse wie folgt zu verwenden:

  1. Erstellen Sie eine benutzerdefinierte UITableViewCell-Klasse
  2. Erstellen Sie eine UIView in einer neuen Klasse. Diese fungiert als 'baseContentView' und ist unmittelbar untergeordnetes Element von 'UITableViewCell.contentView'. 
  3. Passen Sie die oberste 'Füllung' von 'baseContentView' (dies ist das Trennzeichen/die Lücke) in der übergeordneten Ansicht an (UITableViewCell.contentView)
  4. Übernehmen Sie alle Ihre benutzerdefinierten Klassen von dieser Klasse anstelle von UITableViewCell
  5. Fügen Sie alle Inhalte/Unteransichten zu 'baseContentView' statt zu 'self.contentView' hinzu.

Sie können nach Belieben mit dem "Padding" spielen.

0
infiniteLoop