Есть ли способ добавить расстояние между UITableViewCell?

Я создал таблицу, и каждая ячейка содержит только изображение. Изображение присваивается ячейке следующим образом:

cell.imageView.image = [myImages objectAtIndex:indexPath.row];

но это делает изображение увеличенным и вписывается во всю ячейку, и между изображениями нет промежутков.

Или, скажем, таким образом, высота изображения, например, 50, и я хочу добавить 20 интервалов между изображениями. Есть ли способ сделать это?

Swift Version

Обновлено для Swift 3

Этот ответ несколько более общий, чем первоначальный вопрос для будущих зрителей. Это дополнительный пример к базовому примеру UITableView для Swift .

обзор

Основная идея заключается в создании нового раздела (а не новой строки) для каждого элемента массива. Разделы могут быть разнесены с использованием высоты заголовка раздела.

Как это сделать

• Настройте ваш проект, как описано в примере UITableView для Swift . (То есть добавьте UITableViewи подключите tableViewвыход к контроллеру вида).

• В Интерфейсном Разработчике измените цвет фона основного вида на голубой, а UITableViewцвет фона очистите.

• Замените код ViewController.swift следующим.

ViewController.swift

import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    // These strings will be the data for the table view cells
    let animals: [String] = ["Horse", "Cow", "Camel", "Sheep", "Goat"]
    
    let cellReuseIdentifier = "cell"
    let cellSpacingHeight: CGFloat = 5
    
    @IBOutlet var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // These tasks can also be done in IB if you prefer.
        self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellReuseIdentifier)
        tableView.delegate = self
        tableView.dataSource = self
    }
    
    // MARK: - Table View delegate methods
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return self.animals.count
    }
    
    // There is just one row in every section
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
    
    // Set the spacing between sections
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return cellSpacingHeight
    }
    
    // Make the background color show through
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerView = UIView()
        headerView.backgroundColor = UIColor.clear
        return headerView
    }
    
    // create a cell for each table view row
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell:UITableViewCell = self.tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as UITableViewCell!
        
        // note that indexPath.section is used rather than indexPath.row
        cell.textLabel?.text = self.animals[indexPath.section]
        
        // add border and color
        cell.backgroundColor = UIColor.white
        cell.layer.borderColor = UIColor.black.cgColor
        cell.layer.borderWidth = 1
        cell.layer.cornerRadius = 8
        cell.clipsToBounds = true
        
        return cell
    }
    
    // method to run when table view cell is tapped
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        // note that indexPath.section is used rather than indexPath.row
        print("You tapped cell number \(indexPath.section).")
    }
}

Обратите внимание, что indexPath.sectionэто используется, а не indexPath.rowдля того, чтобы получить правильные значения для элементов массива и позиций касания.

Как вы получили дополнительные отступы справа и слева?

Я получил это так же, как вы добавляете интервал к любому виду. Я использовал автоматические ограничения макета. Просто используйте инструмент булавки в Интерфейсном Разработчике, чтобы добавить интервал для ведущих и конечных ограничений.

Мое простое решение с использованием Swift :

// Inside UITableViewCell subclass

override func layoutSubviews() {
    super.layoutSubviews()

    contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))
}

результат

Способ, которым я добавляю интервал между ячейками, состоит в том, чтобы сделать numberOfSections = "Your array count" и сделать, чтобы каждый раздел содержал только одну строку. А затем определите headerView и его высоту.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return yourArry.count;
}

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

-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return cellSpacingHeight;
}

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *v = [UIView new];
    [v setBackgroundColor:[UIColor clearColor]];
    return v;
}

Мне нужно было сделать ту же концепцию, чтобы UITableCells имели «пробел» между ними. Поскольку вы не можете буквально добавить пространство между ячейками, вы можете имитировать его, манипулируя высотой ячейки UITableView, а затем добавляя UIView в contentView вашей ячейки. Вот скриншот прототипа, который я сделал в другом тестовом проекте, когда симулировал это:

Вот некоторый код (Примечание: есть много жестко закодированных значений для демонстрационных целей)

Во-первых, мне нужно было установить heightForRowAtIndexPathразличные значения высоты для UITableViewCell.

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{

    NSString *text = [self.newsArray  objectAtIndex:[indexPath row]];
    if ([text isEqual:@"December 2012"])
    {
        return 25.0;
    }

    return 80.0;
}

Далее я хочу манипулировать внешним видом UITableViewCells, поэтому я делаю это в willDisplayCell:(NewsUITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPathметоде.

- (void)tableView:(UITableView *)tableView willDisplayCell:(NewsUITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (cell.IsMonth)
    {
        UIImageView *av = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, 20, 20)];
        av.backgroundColor = [UIColor clearColor];
        av.opaque = NO;
        av.image = [UIImage imageNamed:@"month-bar-bkgd.png"];
        UILabel *monthTextLabel = [[UILabel alloc] init];
        CGFloat font = 11.0f;
        monthTextLabel.font = [BVFont HelveticaNeue:&font];

        cell.backgroundView = av;
        cell.textLabel.font = [BVFont HelveticaNeue:&font];
        cell.textLabel.textColor = [BVFont WebGrey];
    }


    if (indexPath.row != 0)
    {
        cell.contentView.backgroundColor = [UIColor clearColor];
        UIView *whiteRoundedCornerView = [[UIView alloc] initWithFrame:CGRectMake(10,10,300,70)];
        whiteRoundedCornerView.backgroundColor = [UIColor whiteColor];
        whiteRoundedCornerView.layer.masksToBounds = NO;
        whiteRoundedCornerView.layer.cornerRadius = 3.0;
        whiteRoundedCornerView.layer.shadowOffset = CGSizeMake(-1, 1);
        whiteRoundedCornerView.layer.shadowOpacity = 0.5;
        [cell.contentView addSubview:whiteRoundedCornerView];
        [cell.contentView sendSubviewToBack:whiteRoundedCornerView];

    }
}

Обратите внимание, что я сделал whiteRoundedCornerView height 70.0, и это вызывает симулированное пространство, потому что высота ячейки на самом деле равна 80.0, а мой contentView равен 70.0, что придает ей вид.

Могут быть и другие способы сделать это еще лучше, но я просто нашел, как это сделать. Я надеюсь, что это может помочь кому-то еще.

Вам нужно будет установить рамку для вашего изображения. Не проверенный код

cell.imageView.frame = CGRectOffset(cell.frame, 10, 10);

Я был в одной лодке. Сначала я попытался переключиться на разделы, но в моем случае это было больше головной болью, чем я думал, поэтому я искал альтернативу. Чтобы продолжать использовать строки (и не связываться с доступом к данным модели), вот что сработало для меня, просто используя маску :

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath)
{
    let verticalPadding: CGFloat = 8

    let maskLayer = CALayer()
    maskLayer.cornerRadius = 10    //if you want round edges
    maskLayer.backgroundColor = UIColor.black.cgColor
    maskLayer.frame = CGRect(x: cell.bounds.origin.x, y: cell.bounds.origin.y, width: cell.bounds.width, height: cell.bounds.height).insetBy(dx: 0, dy: verticalPadding/2)
    cell.layer.mask = maskLayer
}

Все, что вам осталось сделать, - это увеличить высоту ячейки на то же значение, что и вы verticalPadding, а затем изменить внутреннюю компоновку, чтобы у всех видов, которые имели расстояние до краев ячейки, такой же интервал увеличивался verticalPadding/2. Небольшой недостаток: вы получаете verticalPadding/2заполнение как сверху, так и снизу tableView, но вы можете быстро это исправить, установив tableView.contentInset.bottom = -verticalPadding/2и tableView.contentInset.top = -verticalPadding/2. Надеюсь, это кому-нибудь поможет!

Я думаю, что самое простое решение, если вы просто ищете немного места и, возможно, наименее затратно, это просто установить цвет границы ячейки на цвет фона таблицы, а затем установить ширину границы, чтобы получить желаемый результат!

    cell.layer.borderColor = blueColor.CGColor
    cell.layer.borderWidth = 3

Если вы еще не используете заголовки разделов (или нижние колонтитулы), вы можете использовать их, чтобы добавить произвольный интервал в ячейки таблицы. Вместо того, чтобы иметь один раздел с n строками, создайте таблицу с n разделами по одной строке в каждом.

Реализуйте tableView:heightForHeaderInSection:метод управления расстоянием.

Вы также можете захотеть реализовать tableView:viewForHeaderInSection:контроль за тем, как выглядит интервал.

Я решил это так в Swift 4.

Я создаю расширение UITableViewCell и включаю этот код:

override open var frame: CGRect {
    get {
        return super.frame
    }
    set (newFrame) {
        var frame =  newFrame
        frame.origin.y += 10
        frame.origin.x += 10
        frame.size.height -= 15
        frame.size.width -= 2 * 10
        super.frame = frame
    }
}

override open func awakeFromNib() {
    super.awakeFromNib()
    layer.cornerRadius = 15
    layer.masksToBounds = false
}

Я надеюсь, что это поможет вам.

Пример в Свифте 3 ..

1. Создайте одно приложение для просмотра
2. добавить просмотр таблицы в контроллере представления
3. добавить пользовательскую ячейку для ячейки tablview

4. Посмотреть код контроллера ниже

      class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
   
      @IBOutlet weak var tableView: UITableView!
   
   
       var arraytable = [[String:Any]]()
        override func viewDidLoad() {
        super.viewDidLoad()
   
        arraytable = [
        ["title":"About Us","detail":"RA-InfoTech Ltd -A Joint Venture IT Company formed by Bank Asia Ltd"],
        ["title":"Contact","detail":"Bengal Center (4th & 6th Floor), 28, Topkhana Road, Dhaka - 1000, Bangladesh"]
   ]
   
   
   
   
   
   
      tableView.delegate = self
      tableView.dataSource = self
   
      //For Auto Resize Table View Cell;
     tableView.estimatedRowHeight = 44
      tableView.rowHeight = UITableViewAutomaticDimension
   
      //Detault Background clear
      tableView.backgroundColor = UIColor.clear
   }

   func numberOfSections (в tableView: UITableView) -> Int {return arraytable.count}

      func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 1
    }
   
   // Set the spacing between sections
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
   return 10
   }
   
   // Make the background color show through
     func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
   let headerView = UIView()
   headerView.backgroundColor = UIColor.clear
   
   return headerView
   }
   
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
   
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell")! as! CustomCell
   
        cell.tv_title.text = arraytable[indexPath.section]["title"] as! String?
       cell.tv_details.text = arraytable[indexPath.section]["detail"] as! String?
   
      //label height dynamically increase
      cell.tv_details.numberOfLines = 0
   
   
   
   
      //For bottom border to tv_title;
      let frame =  cell.tv_title.frame
       let bottomLayer = CALayer()
      bottomLayer.frame = CGRect(x: 0, y: frame.height - 1, width: frame.width, height: 1)
       bottomLayer.backgroundColor = UIColor.black.cgColor
      cell.tv_title.layer.addSublayer(bottomLayer)
   
     //borderColor,borderWidth, cornerRadius
     cell.backgroundColor = UIColor.lightGray
     cell.layer.borderColor = UIColor.red.cgColor
     cell.layer.borderWidth = 1
     cell.layer.cornerRadius = 8
     cell.clipsToBounds = true
   
     return cell
     }
   
      }

5. Скачать полный исходный код на Github: ссылка

   https://github.com/enamul95/CustomSectionTable

Три подхода, которые я могу придумать:

1. Создайте пользовательскую ячейку таблицы, которая отображает вид всей ячейки так, как вы хотите

2. Вместо добавления изображения в представление изображения, очистите подпредставления представления изображения, создайте пользовательское представление, которое добавляет UIImageView для изображения и другое представление, возможно, простой UIView, который обеспечивает желаемый интервал, и добавьте его в качестве подпредставления просмотр изображения.

3. Я хочу предложить вам манипулировать UIImageView напрямую, чтобы установить фиксированный размер / заполнение, но я не близко к Xcode, поэтому я не могу подтвердить, будет ли / как это работать.

Имеет ли это смысл?

Да, вы можете увеличить или уменьшить интервал (заполнение) между двумя ячейками, создав одно базовое представление для представления содержимого в ячейке. Установите прозрачный цвет для фона представления содержимого, и вы можете отрегулировать высоту основного представления, чтобы создать пространство между ячейками.

Основано на ответе Хусама: использование слоя с ячейками вместо представления содержимого позволяет при необходимости добавлять границы вокруг всей ячейки и аксессуара. Этот метод требует тщательной корректировки нижних ограничений ячейки, а также вставок, в противном случае вид будет неправильным.

@implementation TableViewCell

- (void)awakeFromNib { 
    ... 
}

- (void) layoutSubviews {
    [super layoutSubviews];

    CGRect newFrame = UIEdgeInsetsInsetRect(self.layer.frame, UIEdgeInsetsMake(4, 0, 4, 0));
    self.layer.frame = newFrame;
}

@end

Измените количество строк в секции на 1. Вы изменили количество секций вместо количества строк.

 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        1
    }

    func numberOfSections(in tableView: UITableView) -> Int {
        return 2
    }

Здесь вы положили расстояние между рядами

 func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 50
    }

Я думаю, что это самое чистое решение:

class MyTableViewCell: UITableViewCell {
    override func awakeFromNib() {
        super.awakeFromNib()
        layoutMargins = UIEdgeInsetsMake(8, 0, 8, 0)
    }
}

Эта статья помогла, это в значительной степени то, что сказали другие ответы, но суммировать и кратко

https://medium.com/@andersongusmao/left-and-right-margins-on-uitableviewcell-595f0ba5f5e6

В нем он применяет их только к левой и правой сторонам, но UIEdgeInsetsMakeinit позволяет добавлять отступы ко всем четырем точкам.

func UIEdgeInsetsMake (_ вверху: CGFloat, _ слева: CGFloat, _ внизу: CGFloat, _ справа: CGFloat) -> UIEdgeInsets

Описание
Создает вставку края для кнопки или вида. Вставка - это поле вокруг прямоугольника. Положительные значения представляют поля ближе к центру прямоугольника, а отрицательные значения представляют поля дальше от центра.

Параметры
top: вставка вверху объекта.
слева: вставка слева от
нижней части объекта : вставка в нижней части объекта.
справа: вставка справа от объекта.

Возвращает
вкладку для кнопки или представления

Обратите внимание, что UIEdgeInsets также может быть использован для достижения того же.

Xcode 9.3 / Swift 4

Использование множества разных разделов не нужно. Другие ответы используют вставки рамки и CGRect и слои и ... BLAH. Не хорошо; использовать автоматическое расположение и пользовательский UITableViewCell. В этом UITableViewCell вместо дополнительного просмотра вашего контента внутри contentView создайте новый контейнерный вид (UIView), подпредставьте представление контейнера внутри contentView, а затем подпишите все ваши представления внутри представления контейнера.

Чтобы сделать интервал сейчас, просто отредактируйте поля макета представления контейнера, например, так:

class CustomTableViewCell: UITableViewCell {
    let containerView = UIView()
    let imageView = UIImageView()

    required init?(coder aDecoder: NSCoder) {super.init(coder: aDecoder)}

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        containerView.translatesAutoResizingMaskIntoConstraints = false
        imageView.translatesAutoResizingMaskIntoConstraints = false
        contentView.addSubview(containerView)
        containerView.addSubview(imageView)

        contentView.layoutMargins = UIEdgeInsets(top: 15, left: 3, bottom: 15, right: 3)
        containerView.layoutMargins = UIEdgeInsets(top: 15, left: 17, bottom: 15, right: 17) // It isn't really necessary unless you've got an extremely complex table view cell. Otherwise, you could just write e.g. containerView.topAnchor

        let cg = contentView.layoutMarginsGuide
        let lg = containerView.layoutMarginsGuide
        NSLayoutConstraint.activate([
            containerView.topAnchor.constraint(equalTo: cg.topAnchor),
            containerView.leadingAnchor.constraint(equalTo: cg.leadingAnchor),
            containerView.trailingAnchor.constraint(equalTo: cg.trailingAnchor),
            containerView.bottomAnchor.constraint(equalTo: cg.bottomAnchor),
            imageView.topAnchor.constraint(equalTo: lg.topAnchor),
            imageView.leadingAnchor.constraint(equalTo: lg.leadingAnchor),
            imageView.trailingAnchor.constraint(equalTo: lg.trailingAnchor),
            imageView.bottomAnchor.constraint(equalTo: lg.bottomAnchor)
        ])
    }
}

Попробуйте посмотреть - (UIEdgeInsets) layoutMargins; на камеру

Моя ситуация была в том, что я использовал пользовательский UIView для viewForHeader в разделе, а также heightForHeader в разделе, возвращающем постоянную высоту, скажем, 40, проблема заключалась в том, что при отсутствии данных все представления заголовка были связаны друг с другом. поэтому я хотел сделать интервал между разделами при отсутствии данных, поэтому я исправил это, просто изменив плоскость «стиль табличного представления» на «Группу». И это сработало для меня.

Ознакомьтесь с моим решением на GitHub с использованием подклассов UITableViewи использованием функций времени выполнения Objective-C.
Он в основном использует частную структуру данных Apple, UITableViewRowDataкоторую я нашел при поиске частного заголовка среды выполнения UITableView:

https://github.com/JaviSoto/iOS10-Runtime-Headers/blob/master/Frameworks/UIKit.framework/UITableView.h ,

и вот желаемый приватный класс, который содержит все, что вам нужно для разметки пространств между вашими ячейками, как вы хотите, не устанавливая его в классах ячеек:

https://github.com/JaviSoto/iOS10-Runtime-Headers/blob/master/Frameworks/UIKit.framework/UITableViewRowData.h

У меня были проблемы с тем, чтобы заставить это работать вместе с фоновыми цветами и дополнительными видами в камере. Закончилось тем, что:

1) Установите свойство представления фона ячеек с UIView, установленным с цветом фона.

let view = UIView()
view.backgroundColor = UIColor.white
self.backgroundView = view

2) Переместите этот вид в layoutSubviews, чтобы добавить идею разнесения

override func layoutSubviews() {
    super.layoutSubviews()
    backgroundView?.frame = backgroundView?.frame.inset(by: UIEdgeInsets(top: 2, left: 0, bottom: 0, right: 0)) ?? CGRect.zero
}

Использование заголовков в качестве интервала будет работать нормально, я думаю, если вы не хотите использовать какие-либо заголовки. В противном случае, вероятно, не самая лучшая идея. Я думаю о том, чтобы создать собственный вид ячейки.

Примеры:

• Используя Nib
• В коде

В пользовательской ячейке создайте фоновое представление с ограничениями, чтобы оно не заполняло всю ячейку, добавьте ему отступы.

Затем сделайте фон таблицы невидимым и удалите разделители:

// Make the background invisible
tableView.backgroundView = UIView()
tableView.backgroundColor = .clear

// Remove the separators
tableview.separatorStyle = .none

Если вы не хотите изменять номер раздела и строки вашего табличного представления (как я сделал), вот что вы делаете:

1) Добавьте ImageView в нижней части вашего представления ячейки таблицы.

2) Сделайте тот же цвет, что и цвет фона представления таблицы.

Я сделал это в моем приложении, и это работает отлично. Ура! : D

SWift-5, расстояние между UITableViewCell

    1. use sections instead of rows
    2. each section should return one row
    3. assign your cell data like this e.g [indexPath.section], instead of row
    4. use UITableView Method "heightForHeader" and return your desired spacing
    5. Do rest things as you were doing it

    Thanks!

Вы можете просто использовать ограничение в коде так:

class viewCell : UITableViewCell 
{

@IBOutlet weak var container: UIView!



func setShape() {
    self.container.backgroundColor = .blue
    self.container.layer.cornerRadius = 20
    container.translatesAutoresizingMaskIntoConstraints = false
    self.container.widthAnchor.constraint(equalTo:contentView.widthAnchor , constant: -40).isActive = true
           self.container.heightAnchor.constraint(equalTo: contentView.heightAnchor,constant: -20).isActive = true
           self.container.centerXAnchor.constraint(equalTo: contentView.centerXAnchor).isActive = true
           self.container.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true

    }
}

важно добавить подпредставление (контейнер) и поместить в него другие элементы.

добавьте внутренний вид к ячейке, затем добавьте свои собственные представления к ней.

Решение Swift 5.0

Внутри UITableViewCell подкласс

override func layoutSubviews() {
    super.layoutSubviews()
    let padding = UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
    bounds = UIEdgeInsetsInsetRect(bounds, padding)
}

Используйте UITableViewDelegate heightForRowAtIndexPathи верните высоту строки.

 (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
 return 100.0f ;
}