Интервал между UITableViewCells

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

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

enter image description here

Ответ 1

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

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.

Ответ 2

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

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

введите описание изображения здесь

Ответ 3

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

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.

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

Ответ 4

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

Самый простой способ, который я нашел, - создать представление контейнера внутри содержимого cellView в Interface Builder. Затем поместите в свой контент все содержащиеся в нем контент и ограничьте его.

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

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

введите описание изображения здесь

введите описание изображения здесь

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

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

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

Похож на

круговые углы

Ответ 5

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

UICollectionView является более общим, чем UITableView, и вы можете настраивать почти все на нем.

Ответ 6

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

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

Ответ 7

Objective-C версия для кода Jorge Casariego Swift:


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

Ответ 8

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

Ответ 9

Эти методы помогут вам достичь интервала: -

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

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
UIView *invisibleView=[[UIView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds .size.width, 15)];
[invisibleView setBackgroundColor:[UIColor clearColor]];
return invisibleView;

}

Ответ 10

Есть 2 возможных решения:
1) Используйте UICollectionView с вертикальной компоновкой. Это действительно гибкое решение, вы можете написать свой собственный макет для коллекции. Некоторые потрясающие результаты с пользовательским макетом
2) Как @sikhapol прокомментировал. Но у вас будут проблемы с подсветкой ячейки. В моем проекте я создаю общую ячейку с представлением content, ведьма содержит весь контент.

class ShadowContentCell: UITableViewCell {
    @IBOutlet var content: UIView!
    private var contentBg: UIImageView!
    private var contentOverlay: UIImageView!

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.frame = super.frame
    }

    override func awakeFromNib() {
        super.awakeFromNib()

        // custom higlight color
        selectedBackgroundView = UIView()
        selectedBackgroundView.backgroundColor = nil
        contentBg = UIImageView(frame: content.bounds)
        contentBg.autoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth
        contentBg.image = UIImage(color: content.backgroundColor)
        content.addSubview(contentBg)
        content.sendSubviewToBack(contentBg)

        contentOverlay = UIImageView(frame: content.bounds)
        contentOverlay.autoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth
        contentOverlay.highlightedImage = UIImage(color: UIColor(white: 0.000, alpha: 0.2))
        content.addSubview(contentOverlay)
    }

    override func setHighlighted(highlighted: Bool, animated: Bool) {
        contentOverlay.highlighted = highlighted
        if animated {
            let transition = CATransition()
            transition.duration = 0.3
            transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
            transition.type = kCATransitionFade

            contentBg.layer.addAnimation(transition, forKey: nil)
        }
    }
    override func setSelected(selected: Bool, animated: Bool) {
    }
}