it-roy-ru.com

расстояние между UITableViewCells

Я создаю приложение ios в Swift и хочу добавить интервал между ячейками, такими как Facebook (рис. Ниже).

Я использую нестандартный кончик для постов. Я знаю, чтобы использовать UITableViewController. Я полагаю, что я использовал бы стиль разделителя, но он не достигает эффекта. Я часами смотрел в глаза и не могу найти ни одного учебника в Swift, который имеет смысл! Может кто-нибудь объяснить, как они сделали это в приложении, используя Swift? Спасибо!

enter image description here

24
Now2407

Это мое решение с результатом: (основываясь на ответе Хорхе Касариего)

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
}

высота строки таблицы: 165 баллов

высота секции заголовка, высота секции нижнего колонтитула: 10 баллов

и результат

 enter image description here

Редактировать для Swift 3 Синтаксис:

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
}

Вот новый способ отображения видов в виде карточки материала:

Создать CardView.Swift

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

Теперь просто добавьте класс CardView в ваш UIView.

31
ibrahimyilmaz

С Swift 2 вы можете делать интервалы между UITableViewCells следующим образом:

В вашем 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)
    }

Это результат:

 enter image description here

27
Jorge Casariego

Я потратил как минимум час на изучение темы. Наконец, мне пришла в голову идея использовать прозрачную рамку:

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
}

Это прекрасно работает в Swift 3/Xcode 8.

Изображение: Вот так это выглядит на моей стороне

9
Nick Ivanov

Если вы хотите иметь правильный/законный интервал, а не хитрость, вы можете попробовать UICollectionView вместо UITableView.

UICollectionView является более универсальным, чем UITableView, и вы можете настроить его практически на любой вкус.

2
Huy Le

Здесь много правильных ответов. 

Самым простым способом, который я нашел, было создание представления контейнера внутри contentView ячейки в Интерфейсном Разработчике. Затем поместите все свои содержательные материалы в это и ограничитесь этим представлением.

Ограничьте вид контейнера в соответствии с вашими требованиями.

Что-то вроде:

 enter image description here

 enter image description here

Затем в вашем tableViewCellForRow добавьте следующее (при условии, что ваш вывод представления контейнера называется containerView).

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

// Добавить границы, тени и т.д., Если хотите.

Похоже 

 rounder corners

2
Ron Holmes

Версия Objective-C для кода Хорхе Касариего Свифта:


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

Я сделал подкласс UITableViewCell и nib-файл, чтобы пойти с ним. Перетащите UIView в contentView ячейки и, для начала, сделайте его такого же размера, как и contentView. Это будет действовать как контейнер и станет «новым» contentView. Вы можете поместить туда то, что вам нужно, так же, как вы это обычно делаете в contentView UITableViewCell. 

Теперь вы можете отрегулировать высоту вида контейнера, чтобы оставить желаемый интервал в нижней части ячейки. Наконец, измените цвет фона contentView на clearColor , что завершит эффект.

1
doraemon

код для 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