Интервал между 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) {
}
}