Закругленные углы на UITableView

Question

Каков наилучший способ закруглить углы на всем UITableView, как это видно в Stocks и Spotlight? Сгруппированный стиль не решает проблему, потому что закругленные углы прокручиваются вместе с ячейкой. Я пытаюсь обрезать вид, чтобы углы всегда были круглыми, независимо от положения прокрутки.

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

Answer 1

Это старый вопрос, но, возможно, вы все еще хотите знать, как это сделать.

Я воспроизвел tableView, как в Stocks / Spotlight. Хитрость

view.layer.cornerRadius = 10; 

Чтобы это работало, вам нужно включить QuartzCore в класс, который вы называете этим свойством:

#import <QuartzCore/QuartzCore.h>

Я слышал, что это работает только с OS 3.0. Но так как мое приложение использует основные данные, это не было проблемой, потому что оно уже было для OS 3.0 и выше.

Я создал пользовательский UIView с подпредставлением с cornerRadius 10 и с

view.backgroundColor = [UIColor clearColor];

Затем вы должны поместить сгруппированный стиль UITableView в это подпредставление. Вам нужно установить backgroundColor на clearColor, а separatorColor - clearColor. Затем вы должны расположить табличное представление внутри скругленного углового представления, это делается путем установки размера и источника кадра. Мой класс loadView моего пользовательского UIView выглядит так:

self.view = [[UIView alloc] init];
self.view.backgroundColor = [UIColor clearColor];

CustomUIViewClass *scherm = [[CustomUIViewClass alloc] init];

CGRect frame;
frame.origin.x = 10;
frame.origin.y = 50;
frame.size.width = 300;
frame.size.height = 380;

scherm.frame = frame;
scherm.clipsToBounds = YES;
scherm.layer.cornerRadius = 10;

[self.view addSubview:scherm];

CustomUITableViewClass *table = [[CustomUITableViewClass alloc] initWithStyle:UITableViewStyleGrouped];

frame.origin.y = -10;
frame.origin.x = -10;
frame.size.width = 320;
frame.size.height = 400;

table.tableView.frame = frame;
[scherm addSubview:table.tableView];

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

Answer 2

Более простой способ сделать это - просто импортировать инфраструктуру QuartzCore в ваш проект. #import <QuartzCore/QuartzCore.h> к вашему tableViewController и просто установите

myTableView.layer.cornerRadius=5;

Это даст вам закругленные углы без необходимости добавления таблицы к суперпросмотру или ее отсечения.

Answer 3

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

В Интерфейсном Разработчике:

• Установите для стиля UITableView значение Plain и создайте кадр с некоторыми отступами слева и справа, возможно, с x = 10 и шириной = 300.

Затем установите радиус угла и раскрасьте себя:

 #import <QuartzCore/QuartzCore.h>

 self.tableView.layer.borderColor = [UIColor colorWithWhite:0.6 alpha:1].CGColor;   
 self.tableView.layer.borderWidth = 1;
 self.tableView.layer.cornerRadius = 4;

Answer 4

Ну, есть много способов решить эту проблему.

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

Я поделюсь тем, что сделал. Я верю, что намного проще и быстрее, чем некоторые варианты выше.

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

• Создать CAShapeLayer для верхнего (левый | правый) и нижнего (левый | правый).

  shapeTop = [CAShapeLayer layer];
  shapeTop.path = [UIBezierPath 
  bezierPathWithRoundedRect:CGRectMake( 0.0f, 0.0f, 306.0f, 58.0f )
  byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
  cornerRadii:CGSizeMake( 6.0f, 6.0f )].CGPath;
  
  shapeBottom = [CAShapeLayer layer];
  shapeBottom.path = [UIBezierPath 
  bezierPathWithRoundedRect:CGRectMake( 0.0f, 0.0f, 306.0f, 58.0f )
  byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight
  cornerRadii:CGSizeMake( 6.0f, 6.0f )].CGPath;
  

• Стол должен быть задним фоном clearColor;

• Клетки должны иметь цветной фон;

• Установить layer.mask его

  UIView* backgroundView = [[UIView alloc] initWithFrame:CGRectZero];
  backgroundView.backgroundColor = [UIColor whiteColor];
  cell.backgroundView = backgroundView;
  

• Не забудьте #import <QuartzCore/QuartzCore.h>

Answer 5

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

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

Работает именно так, как я хочу.

Answer 6

Вы пробовали "сгруппированный" стиль табличного представления?

self.tableView.style = UITableViewStyleGrouped;

Для получения дополнительной информации см. Руководство по программированию табличного представления . В главе «О представлениях таблиц» есть несколько скриншотов, описывающих различные стили.

Answer 7

Ниже код для версии Swift:

 let redColor = UIColor.redColor()
 self.tableView.layer.borderColor = redColor.colorWithAlphaComponent(0.9).CGColor
 self.tableView.layer.borderWidth = 1;
 self.tableView.layer.cornerRadius = 4;

Убедитесь, что у вас есть import QuartzCore в разделе импорта.

Answer 8

Вот быстрое расширение:

extension UITableView {
     public var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = true
        }
    }
}

Используется таким образом

  tableView.cornerRadius = 7.5