wake-up-neo.net

abstand zwischen UITableViewCells

Ich erstelle eine ios-App in Swift und möchte einen Abstand zwischen Zellen wie Facebook hinzufügen (siehe unten).

Ich verwende eine eigene Spitze für die Beiträge. Ich weiß, UITableViewController zu verwenden. Ich denke, ich würde einen Separator-Stil verwenden, aber der Effekt wird nicht erreicht. Ich habe stundenlang herumgespielt und kann in Swift kein einziges Tutorial finden, das Sinn macht! Könnte jemand erklären, wie sie es in der App gemacht haben, und zwar schnell? Vielen Dank!

enter image description here

24
Now2407

Dies ist meine Lösung mit dem Ergebnis: (basierend auf Jorge Casariegos Antwort)

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! CustomApplicationCell

    cell.contentView.backgroundColor = UIColor.clear

    let whiteRoundedView : UIView = UIView(frame: CGRectMake(10, 8, self.view.frame.size.width - 20, 149))

    whiteRoundedView.layer.backgroundColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), [1.0, 1.0, 1.0, 0.8])
    whiteRoundedView.layer.masksToBounds = false
    whiteRoundedView.layer.cornerRadius = 2.0
    whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1)
    whiteRoundedView.layer.shadowOpacity = 0.2

    cell.contentView.addSubview(whiteRoundedView)
    cell.contentView.sendSubviewToBack(whiteRoundedView)

    return cell
}

tabellenzeilenhöhe: 165 Punkte

kopfabschnittshöhe, Fußabschnittshöhe: 10 Punkt

und Ergebnis

 enter image description here

Edit für Swift 3-Syntax:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! CustomApplicationCell

    cell.contentView.backgroundColor = UIColor.clear

    let whiteRoundedView : UIView = UIView(frame: CGRect(x: 10, y: 8, width: self.view.frame.size.width - 20, height: 120))

    whiteRoundedView.layer.backgroundColor = CGColor(colorSpace: CGColorSpaceCreateDeviceRGB(), components: [1.0, 1.0, 1.0, 0.9])
    whiteRoundedView.layer.masksToBounds = false
    whiteRoundedView.layer.cornerRadius = 2.0
    whiteRoundedView.layer.shadowOffset = CGSize(width: -1, height: 1)
    whiteRoundedView.layer.shadowOpacity = 0.2

    cell.contentView.addSubview(whiteRoundedView)
    cell.contentView.sendSubview(toBack: whiteRoundedView)

    return cell
}

Hier haben Sie eine neue Möglichkeit, Ansichten als Materialkarte anzuzeigen:

CardView.Swift erstellen

@IBDesignable
class CardView: UIView {

    @IBInspectable var cornerRadius: CGFloat? = 5

    @IBInspectable var shadowOffsetWidth: Int? = 0
    @IBInspectable var shadowOffsetHeight: Int? = 2
    @IBInspectable var shadowColor: UIColor? = .black
    @IBInspectable var shadowOpacity: Float? = 0.3

    override func layoutSubviews() {
        layer.cornerRadius = cornerRadius!
        let shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius!)

        layer.masksToBounds = false
        layer.shadowColor = shadowColor?.cgColor
        layer.shadowOffset = CGSize(width: shadowOffsetWidth!, height: shadowOffsetHeight!);
        layer.shadowOpacity = shadowOpacity!
        layer.shadowPath = shadowPath.cgPath
    }
}

Fügen Sie nun einfach die CardView-Klasse zu Ihrer UIView hinzu.

31
ibrahimyilmaz

Mit Swift 2 können Sie den Abstand zwischen UITableViewCells auf folgende Weise ausführen:

Kopieren Sie dies in Ihren TableViewController:

    // In this case I returning 140.0. You can change this value depending of your cell
    override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        return 140.0
    }

    override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {

        cell.contentView.backgroundColor = UIColor.clearColor()

        let whiteRoundedView : UIView = UIView(frame: CGRectMake(0, 10, self.view.frame.size.width, 120))

        whiteRoundedView.layer.backgroundColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), [1.0, 1.0, 1.0, 1.0])
        whiteRoundedView.layer.masksToBounds = false
        whiteRoundedView.layer.cornerRadius = 2.0
        whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1)
        whiteRoundedView.layer.shadowOpacity = 0.2

        cell.contentView.addSubview(whiteRoundedView)
        cell.contentView.sendSubviewToBack(whiteRoundedView)
    }

Das ist das Ergebnis:

 enter image description here

27
Jorge Casariego

Ich habe mindestens eine Stunde damit verbracht, das Thema zu recherchieren. Schließlich kam ich auf die Idee, eine transparente Grenze zu verwenden:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "faqCell", for: indexPath)

    // ...

    cell.layer.borderWidth = CGFloat(TABLE_CELLSPACING)
    cell.layer.borderColor = tableView.backgroundColor?.cgColor

    return cell
}

Dies funktioniert perfekt in Swift 3/Xcode 8.

Bild: So sieht es auf meiner Seite aus

9
Nick Ivanov

Wenn Sie einen rechten/rechtlichen Abstand haben möchten, keinen Trick, können Sie UICollectionView anstelle von UITableView verwenden.

UICollectionView ist generischer als UITableView und Sie können fast alles selbst anpassen.

2
Huy Le

Hier gibt es viele richtige Antworten. 

Der einfachste Weg, den ich gefunden habe, war das Erstellen einer Containeransicht innerhalb der contentView der Zelle im Interface Builder. Fügen Sie dann alle Ihre Zellen sinnvollen Inhalt hinzu und beschränken Sie sich auf diese Ansicht.

Beschränken Sie die Containeransicht entsprechend Ihren Füllanforderungen.

So etwas wie:

 enter image description here

 enter image description here

Fügen Sie dann in Ihrem tableViewCellForRow Folgendes hinzu (vorausgesetzt, Ihr Containeransicht-Auslass heißt containerView).

    currentCell.containerView?.layer.cornerRadius = 8 // Your choice here.
    currentCell.containerView?.clipsToBounds = true

// Fügen Sie Rahmen, Schatten usw. hinzu, wenn Sie möchten.

Sieht aus wie 

 rounder corners

2
Ron Holmes

Objective-C-Version für Jorge Casariego Swift-Code:


//play with the 'y' parameter of the whiteRoundedView to change the spacing 
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    cell.contentView.backgroundColor = [UIColor colorWithRed:225/255.0 green:225/255.0 blue:225/255.0 alpha:1.0];
    UIView  *whiteRoundedView = [[UIView alloc]initWithFrame:CGRectMake(5, 2, self.view.frame.size.width-10, cell.contentView.frame.size.height)];
    CGFloat colors[]={1.0,1.0,1.0,1.0};//cell color white
    whiteRoundedView.layer.backgroundColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), colors);
    whiteRoundedView.layer.masksToBounds = false;
    whiteRoundedView.layer.cornerRadius = 5.0;
    whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1);
    whiteRoundedView.layer.shadowOpacity = 0.2;
    [cell.contentView addSubview:whiteRoundedView];
    [cell.contentView sendSubviewToBack:whiteRoundedView];
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //assign the right cell identifier
    UITableViewCell *cell = [[self tableView]dequeueReusableCellWithIdentifier:CellIdentifier];
    return cell.bounds.size.height;
}
1
repoguy

Ich habe eine Unterklasse von UITableViewCell und eine Nib-Datei erstellt, die dazu passt. Ziehen Sie eine UIView in die contentView der Zelle, und legen Sie zunächst dieselbe Größe wie contentView fest. Dies wird als Container fungieren und zur "neuen" ContentView werden. Sie können das, was Sie brauchen, genau dort ablegen, wie Sie es normalerweise in der contentView einer UITableViewCell tun würden. 

Jetzt können Sie die Höhe der Containeransicht anpassen, um den gewünschten Abstand am unteren Rand der Zelle zu belassen. Ändern Sie schließlich die Hintergrundfarbe von contentView in clearColor.

1
doraemon

code für Swift 4 

override var frame: CGRect {
        get {
            return super.frame
        }
        set (newFrame) {
            var frame =  newFrame
            frame.Origin.y += 4
            frame.size.height -= 2 * 5
            super.frame = frame
        }
    }
1
Games Hub