it-roy-ru.com

Как дать пространство между двумя ячейками в табличном представлении?

Я хочу пространство между двумя ячейками в табличном представлении,

Я хочу такую ​​клетку,

enter image description here

Как я могу это сделать?

46
Ankit Chauhan

Вы можете создать Разделы TableView также в UITableView ... Эти методы являются обязательными, поэтому создайте разделы, и в каждом разделе вы можете создать отдельную ячейку, как на вашем рисунке.

22
DShah

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

1. установите номера нужных вам ячеек в качестве разделов:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView 
{
    return 3; // in your case, there are 3 cells
}

2. вернуть только 1 ячейку для каждого раздела

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

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

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 10.; // you can have your own choice, of course
}

4. установить цвет фона заголовка, чтобы очистить цвет, чтобы он не выглядел странно

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *headerView = [[UIView alloc] init];
    headerView.backgroundColor = [UIColor clearColor];
    return headerView;
}
119
Brian

Лучший способ получить пространство между двумя ячейками в TableView, объявить номера разделов, которые вы хотите, в методе делегата numberofsections таким образом

Например, у вас есть массив из 10 объектов

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
  return [array count]; //array count returns 10
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {


    return 1;// this should be one because it will create space between two cells if you want space between 4 cells you can modify it.
}

Тогда важным моментом является метод делегата cellForRowAtIndexPath, который необходимо использовать indexpath.section, но не indexpath.row

cell.textLabel.text=[NSString stringWithFormat:@"%@",[array objectAtIndex:indexPath.section]];

То есть проверьте ваше табличное представление на наличие пространства между двумя ячейками. Наслаждайтесь!

25
obaid

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

Используйте ваши распорки и пружины в IB, чтобы сохранить этот равномерный зазор, и используйте heightForRowAtIndexPath, чтобы возвратить высоту, включающую зазор. 

16
averydev

Цель - С

 UIView* separatorLineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 3)];/// change size as you need.       
 separatorLineView.backgroundColor = [UIColor whiteColor];// you can also put image here
 [cell.contentView addSubview:separatorLineView];

Swift 3 (то же самое будет работать и для Swift 4)

var separatorLineView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 3))
/// change size as you need.       
separatorLineView.backgroundColor = UIColor.white
// you can also put image here
cell.contentView.addSubview(separatorLineView)

Это сработало для меня.

12
Pradumna Patil

Если кто-то ищет Swift версию. Ну вот.

func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 10; // space b/w cells
}

func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return items.count // count of items
}

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let header = UIView()
    header.backgroundColor = UIColor.clearColor()
    return header
}

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 1
}
10
Adnan

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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

    if (indexPath.row % 2 == 1)
    {
        static NSString *CellIdentifier = @"cellID1";
        UITableViewCell *cell = (UITableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        if (cell == nil) {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                            reuseIdentifier:CellIdentifier];
        }

        cell.backgroundColor = [UIColor colorWhite];

        return cell;

    } else {

        static NSString *CellIdentifier2 = @"cellID2";
        UITableViewCell *cell2 = (UITableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier2];
        if (cell2 == nil) {
            cell2 = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                            reuseIdentifier:CellIdentifier2];
        }
        cell2.backgroundColor = [UIColor clearColor];

        return cell2;
    }

}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.row % 2 == 1) {
        return 40.0;
    } else {
        return 2.0;
    }
}
6
Khairulnizam Dahari

Добавьте эти строки в метод cellForRowAtIndexPathUITableViewDelegate перед возвратом ячейки.

let separator = UIView(frame: CGRectMake(0, 0, cell!.bounds.size.width, 1))
separator.backgroundColor = UIColor.whiteColor()
cell.contentView.addSubview(separator)
5
PAC

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

В этом случае я бы порекомендовал возвращать большее значение с плавающей точкой, чем нормальная высота ячейки: 

- (float)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

и затем убедитесь, что стиль таблицы - Обычный, а разделитель ячеек - нет. Вы можете сделать это в самом файле XIB или в коде:

self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone; self.tableView.style = UITableViewStylePlain;

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

cell.selectionStyle = UITableViewCellSelectionStyleNone;

Это создаст впечатление пространства между ячейками, но в то же время сохранит их в виде строк в одном разделе (что иногда является тем, что вам нужно).

4
Andrei

Я использовал простой и быстрый подход для этого (используя раскадровку)

  • Добавьте UITableView в свой контроллер
  • Установите стиль разделителя в none (из инспектора атрибутов)
  • Установите высоту ряда на 5 пунктов больше сверху и снизу от желаемой высоты 
  • Теперь добавьте изображение в ячейку, закрепите его слева и справа, но оставьте 5-тое место (для заполнения, как на ощупь) и установите фон изображения таким же, какой вы хотите для ячейки.

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

4
Abdullah Saeed

Для расстояния между ячейками, такими как на скриншоте, нет необходимости в пользовательских ячейках (для их внешнего вида в любом случае, таких как градиент bkg и т.д., Это может быть хорошей идеей, но это не поможет для расстояния между ними клетки)

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

[РЕДАКТИРОВАТЬ] Все объясняется В Руководстве по программированию Apple TableView (и это стоит прочитать, так как оно содержит много вещей, которые вы должны знать о табличных представлениях)

3
AliSoftware

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

2
jacklehamster

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

// Inside UITableViewCell subclass
override func layoutSubviews() {
    let f = contentView.frame
    let fr = UIEdgeInsetsInsetRect(f, UIEdgeInsetsMake(10, 10, 10, 10))
    contentView.frame = fr
}

или однострочный код 

override func layoutSubviews() {
    contentView.frame = UIEdgeInsetsInsetRect(contentView.frame, UIEdgeInsetsMake(10, 10, 10, 10))
}

Результат enter image description here

2
Husam

* РАБОТА С IOS 9 XCODE 7.3 *

Самый простой способ добиться этого - просто добавить этот код в метод cellForRowAtIndexPath.

    cell.separatorInset.left = 20.0
    cell.separatorInset.right = 20.0
    cell.separatorInset.top = 20.0
    cell.separatorInset.bottom = 20.0
    cell.layer.borderWidth = 3
    cell.layer.cornerRadius = 20.0
    cell.layer.borderColor = UIColor.flatSkyBlueColorDark().CGColor

Затем перейдите к доске объявлений и нажмите на стол. Перейдите в инспектор идентификации и измените цвет фона представления на любой цвет границы, который был установлен в методе. Вуаля! Поиграйте со значениями, чтобы получить желаемый результат. Надеюсь это поможет!

Примечание. При использовании библиотеки Chameleon необходимо установить цвет фона для представления в коде, а не через плагин раскадровки. По какой-то причине цвет кажется оттененным. 

2
Craig

Я не знаю, почему все ответы так сложны. KIS, только с использованием раскадровки я поместил UIView в tableCell Content View; Теперь высота UIView меньше высоты Content View, и все!

Поиграйте с цветом Content View и цветом UIView, чтобы получить желаемый результат.

2
Yizhar

Что ж, я просто симулировал пространство, создав простую пользовательскую ячейку, которая немного больше, чем я хочу (ячейка + пробел/2), а затем поместил все содержимое моей ячейки во внутренний вид.

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

1
Gil Sand

1) сначала создайте 2 раздела в табличном представлении . 2) создайте пустую ячейку . 3) создайте ячейку с данными, которые вы хотите отобразить . 4) используйте метод 

  • (CGFloat) tableView: (UITableView *) tableView heightForRowAtIndexPath: (NSIndexPath *) indexPath { If (indexPath.section == 0) {

    if (indexPath.row% 2! = 1) { возврат 15.0; } else { return 100; } } Еще

    if (indexPath.row % 2 != 1) {
        return 100.0;
    } else {
        return 15.0;
    }
    

}

Это добавит пространство между клетками. Это сработало для меня.

0
Mohit Bhakre

Вот мой метод со Swift 3:

В ViewDidLoad () добавьте:

self.tableView.rowHeight = 500.0

В табличное представление "CellForRowAt" добавьте следующее:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)

    // Configure the cell...
    var actualContentView = UIView()
    actualContentView.frame = CGRect(x: 10, y: 10, width: cell.contentView.frame.width - 20, height: cell.contentView.frame.height - 20)
    actualContentView.backgroundColor = UIColor.blue
    cell.contentView.addSubview(actualContentView)

    return cell
}
0
Raymond Yip

В Data ViewSource в табличном представлении есть два метода: количество разделов и количество строкВ разделах вернуть 3; в строках возврат 1; 

0
kiran kumar
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{

    return __titlesArray.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 1;
}
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 10;
}
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *header = [[UIView alloc]init];
    header.backgroundColor = [UIColor clearColor];
    return header;

}
0
Ahmed Abdallah

Я использую как:

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    return 194.0;
}

override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
    cell.contentView.backgroundColor = UIColor.clearColor()
    let whiteRoundedView : UIView = UIView(frame: CGRectMake(0, 0, self.view.frame.size.width, 185))

    whiteRoundedView.backgroundColor = UIColor( red: CGFloat(61.0/255.0), green: CGFloat(117.0/255.0), blue: CGFloat(147.0/255.0), alpha: CGFloat(1.0))

    whiteRoundedView.layer.masksToBounds = false
    whiteRoundedView.layer.cornerRadius = 3.0
    whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1)
    whiteRoundedView.layer.shadowOpacity = 0.5
    cell.contentView.addSubview(whiteRoundedView)
    cell.contentView.sendSubviewToBack(whiteRoundedView)
}

Получить значения цветового кода RGB из:

 enter image description here

0
Mannam Brahmam

Вам не нужно назначать каждый раздел для каждой ячейки. Просто создайте UIView (контейнер) внутри вашей ячейки, выделите его с помощью вида ячейки. И мы размещаем такие компоненты, как метка, текст, изображение в этом контейнере.

0
Gintama

Я предлагаю создать пользовательский базовый класс UITableViewCell и использовать этот класс, как показано ниже,

  1. Создать пользовательский класс UITableViewCell
  2. Создайте UIView в новом классе, он будет действовать как «baseContentView» и будет непосредственным потомком «UITableViewCell.contentView». 
  3. Отрегулируйте верхний отступ для baseContentView (это будет разделитель/пробел) из родительского представления (UITableViewCell.contentView)
  4. Унаследуйте все свои пользовательские классы от этого класса, а не UITableViewCell
  5. Добавьте все содержимое/подпредставления в «baseContentView», а не в «self.contentView»

Вы можете играть с «padding» в соответствии с вашими потребностями.

0
infiniteLoop