UITableView-Trennlinie


78

Wie kann ich die Trennlinie ändern, die am Ende jeder Zelle in UITableView angezeigt wird? Ich möchte ein Bild haben, das ein Linienbild vom Typ eines dünnen Trennzeichens ist.

Antworten:


93

Stellen Sie separatorStyledie Tabellenansicht auf ein UITableViewCellSeparatorStyleNone. Fügen Sie Ihr Trennbild als Unteransicht zu jeder Zelle hinzu und stellen Sie den Rahmen richtig ein.


1
Wirst du mir bitte ein Beispiel geben?
Mobile Entwickler iOS Android

[separatorImageView setFrame: CGRectMake (0, 0, cell.frame.size.width, separatorImageView.image.size.height)];
Felix

[cell.imageView setFrame: CGRectMake (0, 0, cell.frame.size.width, cell.frame.size.height)]; war dazu nicht in der Lage :(
cV2

Und was ist mit denen, die das normale UITableView zeichnet, wenn die Zellen den Bildschirm nicht ausfüllen?
Christian Schnorr

4
Es ist traurig, dass diese Antwort aufgrund von Fehlern in der Trennlinie immer noch die beste ist.
Eonil

61

Versuche dies

Ziel c

  [TableView setSeparatorStyle:UITableViewCellSeparatorStyleSingleLine];

  [TableView setSeparatorColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"Divider_line@2x.png"]]];

Schnell

    tableView.separatorStyle = UITableViewCellSeparatorStyle.SingleLine
    tableView.separatorColor = UIColor(patternImage: UIImage(named: "YOUR_IMAGE_NAME")!)

1
Super Antwort Danke!
Septronic

Danke @ Sakshi - Ich habe die Trennfarbe anstelle eines Bildes festgelegt und es sieht auch gut aus. table.separatorStyle = UITableViewCellSeparatorStyle.SingleLine table.separatorColor = UIColor(red: 245/255, green: 245/255, blue: 245/255, alpha: 1.0)
fs_tigre

29

Zuerst können Sie den Code schreiben:

{    [self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];}

danach

{    #define cellHeight 80 // You can change according to your req.<br>
     #define cellWidth 320 // You can change according to your req.<br>

    -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath  *)indexPath
    {
         UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"seprater_line.png"]];
        imgView.frame = CGRectMake(0, cellHeight, cellWidth, 1);
        [customCell.contentView addSubview:imgView];
         return  customCell;

     }
}

3
Das Problem bei Lösungen wie diesen, bei denen der Zelle in nur eine Unteransicht hinzugefügt wird, tableView:cellForRowAtIndexPath:besteht darin, dass jedes Mal, wenn die Zelle wiederverwendet wird, eine neue hinzugefügt wird, ohne die alten zu entfernen. Es sollte nur einmal hinzugefügt werden, damit Sie es in einer UITableViewCellUnterklasse tun können .
Gavin

7

Stellen Sie die Farbe des Trennzeichens ein, das mit Ihrem Bild gemustert werden soll.

in viewDidLoad:

self.tableView.separatorColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"mySeparatorImage"]];

5

Mein Projekt basiert auf iOS 7 Das hilft mir

[self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];

Dann setzen Sie eine Unteransicht als Trennzeichen in die Zelle!


1
Das beantwortet die Frage nicht.
König-Zauberer

4

Versuche dies:

UIImageView *separator = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"separator.png"]];
[cell.contentView addSubview: separator];

Das ist ein Beispiel dafür, wie ich es ziemlich gut zum Laufen gebracht habe.

Denken Sie daran, den Trennzeichenstil für die Tabellenansicht auf "Keine" zu setzen.


4

Sie können eine UIImageView hinzufügen, die beispielsweise 1 Punkt hoch und so breit wie der Rahmen der Zelle ist, und dann ihren Ursprung in der unteren linken Ecke der Zelle festlegen.


6
Vergessen Sie nicht, den Standardtrennzeichenstil für die Tabellenansicht zu [self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
deaktivieren

Kannst du mir groben Code geben, damit ich anfangen kann? Wie kann ich seinen Ursprung auf die untere linke Ecke der Zelle setzen?
Mobile Entwickler iOS Android

4

Hier ist die Möglichkeit, dies über das Storyboard in XCode 10.2.1 zu tun. Der Standardwert für defaultdas Trennzeichen ist die Zeile. Stellen Sie es ein none, um die Linie zu entfernen.

tableview_separator


2

Das ist definitiv Hilfe. Arbeiten. Setzen Sie jedoch das Trennzeichen "none" im Attributinspektor. Schreiben Sie den folgenden Code in die cellForRowAtIndexPath- Methode

 UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0,           
 cell.contentView.frame.size.height - 1.0,      
 cell.contentView.frame.size.width, 1)];

    lineView.backgroundColor = [UIColor blackColor];
    [cell.contentView addSubview:lineView];

Ich habe es sogar mit versucht [cell.contentView bringSubviewToFront:lineView];und es wird meistens nur auf der rechten und linken Seite angezeigt.
Timothy Swan

2

Swift 3/4

Fügen Sie diesen Code in eine benutzerdefinierte Zelle ein, die eine Unterklasse von UITableViewCell ist (oder in CellForRow oder WillDisplay TableViewDelegates für nicht benutzerdefinierte Zellen):

let separatorLine = UIView.init(frame: CGRect(x: 8, y: 64, width: cell.frame.width - 16, height: 2))
separatorLine.backgroundColor = .blue
addSubview(separatorLine)

in der viewDidLoad-Methode:

tableView.separatorStyle = .none

0

Sie haben zwei Möglichkeiten, um den Trennzeichenstil einer geeigneten Ansicht zu ändern, wenn Sie die Standardoptionen ändern möchten, bei denen es sich nicht um Trennzeichen, durchgezogene Linien oder geätzte Linien handelt.

  1. Am einfachsten ist es, jeder Zellenansicht ein Hintergrundbild mit Trennlinie hinzuzufügen. Sie können dann in der Tabellenansicht überprüfen, wo sich Ihre Zelle befindet, um das richtige Hintergrundbild anzuwenden, mit dem Sie entweder eine Trennlinie oben auf der Zelle oder unten in der Zelle erhalten.

    Setzen Sie den Trennzeichenstil in viewDidLoad Ihrer Tabellenansicht auf none:

    [self.tableView setSeparatorStyle: UITableViewCellSeparatorStyleNone];

    Legen Sie Ihr Hintergrundbild in der Funktion (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath fest

     UIImage* yourBgImg = [[UIImage imageNamed:@"bgImage.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(5, 5, 5, 5)];
    

    cell.backgroundView = [[UIImageView alloc] initWithImage: yourBgImg];

    Überprüfen Sie die Position Ihrer Zelle im Abschnitt wie folgt:

    NSInteger sectionRows = [tableView numberOfRowsInSection: [indexPathsection]]; NSInteger row = [indexPath row];

  2. Fügen Sie die Trennlinie als Zelle hinzu. Ich finde kürzlich einen Beitrag dazu hier: http://www.dimzzy.com/blog/2012/01/separator-cells-for-uitableview/#disqus_thread

0

Sie können unten versuchen:

UIView *separator = [[UIView alloc] initWithFrame:CGRectMake(0, cell.contentView.frame.size.height - 1.0, cell.contentView.frame.size.width, 1)];
separator.backgroundColor = myColor;
[cell.contentView addSubview:separator];

oder

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
   UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"separator.png"]];
   imageView.frame = CGRectMake(0, 100, 320, 1);
   [customCell.contentView addSubview:imageView];

   return customCell;
}

0

Hier ist eine alternative Möglichkeit, eine benutzerdefinierte Trennlinie zu a hinzuzufügen UITableView indem Sie ein CALayerfür das Bild erstellen und diese als Trennlinie verwenden.

// Erstelle einen CALayer für das Bild für die Trennlinie

CALayer *separator = [CALayer layer];
separator.contents = (id)[UIImage imageNamed:@"myImage.png"].CGImage;
separator.frame = CGRectMake(0, 54, self.view.frame.size.width, 2);
[cell.layer addSublayer:separator];

0

Der einfachste Weg, eine Trennlinie unter jeder Tabellenansichtszelle hinzuzufügen, ist im Storyboard selbst. Wählen Sie zuerst die Tabellenansicht aus und wählen Sie dann im Attributinspektor die Eigenschaft der Trennlinie als einzelne Zeile aus. Wählen Sie anschließend den benutzerdefinierten Trenneinsatz aus und aktualisieren Sie den linken Einschub von links auf 0.

Beispiel

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.