Există vreo modalitate de a adăuga spațiere între UITableViewCell
?
Am creat un tabel și fiecare celulă conține o imagine. Imaginea este repartizat la celula de genul asta:
cell.imageView.image = [myImages objectAtIndex:indexPath.row];
dar asta face imaginea mărită și se încadrează în întreaga celulă, și nu există nici o spațiere între imagini.
Sau să spunem că, în acest fel, înălțimea de imagine sunt, de exemplu, de 50 de ani, și vreau să adăugați 20 distanța dintre imagini. Există vreo modalitate de a realiza acest lucru?
Actualizat pentru Swift 3
Acest răspuns este ceva mai general decât întrebarea inițială, de dragul viitorilor spectatori. Este un supliment exemplu de bază UITableView exemplu pentru Swift.
Prezentare generală
Ideea de bază este de a crea o nouă secțiune (mai degrabă decât un nou rând) pentru fiecare matrice element. Secțiunile pot fi apoi distanțate, folosind secțiunea de antet înălțime.
Cum se face
Configurarea proiectului așa cum este descris în UITableView exemplu pentru Swift. (Care este, se adauga un UITableView și cârlig până
tableView` priza la View Controller).
În Interface Builder, schimba ecranul de fundal de culoare albastru deschis și UITableView
culoarea de fundal pentru a șterge.
Înlocuiți ViewController.codul swift cu următoarele.
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).")
}
}
Rețineți că indexPath.secțiunea
este folosit mai degrabă decât `indexPath.rând în scopul de a obține valorile corecte pentru elementele de matrice și apăsați poziții.
Cum te-ai padding suplimentare/spațiu la stânga și la dreapta?
Am luat-o în același mod în care se adaugă distanța de la orice punct de vedere. Am folosit auto layout constrângeri. Doar folosi pin instrument în Interface Builder pentru a adăuga spațiere pentru conducere și la sfârșit constrângeri.
Așa cum am obține adăugând spațierea dintre celule este de a face numberOfSections = "matrice conta" și de a face fiecare secțiune conține doar un singur rând. Și apoi definiți headerView și înălțimea sa.
- (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;
}
Meu soluție ușor folosind Rapid :
// Inside UITableViewCell subclass
override func layoutSubviews() {
super.layoutSubviews()
contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))
}
Am nevoie să fac același concept de a avea UITableCells au un "space" între ele. Deoarece puteți't literalmente adăuga spațiu între celulele puteți fals prin manipularea UITableView's celulă înălțime și apoi adăugarea unui UIView la contentView din celulă. Aici este un ecran împușcat de un prototip pe care am făcut-o într-un alt proiect de test atunci când am fost simularea asta:
Aici este un cod (Notă: există o mulțime de greu codificate valori pentru scopuri demonstrative)
În primul rând, am nevoie să setați heightForRowAtIndexPath
pentru a permite diferite înălțimi pe 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;
}
În continuare, vreau să manipuleze arata si se simt de UITableViewCells așa că am făcut asta în willDisplayCell:(NewsUITableViewCell *)celula forRowAtIndexPath:(NSIndexPath *)indexPath
metoda.
- (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];
}
}
Rețineți că mi-am făcut whiteRoundedCornerView înălțime 70.0 și că's ceea ce cauzeaza spațiu simulat pentru că celula's înălțimea este de fapt 80.0 dar contentView este 70.0 care îi conferă aspectul.
Ar putea fi și alte modalități de a realiza acest lucru chiar mai bine, dar's doar cum te-am găsit cum să o facă. Sper că pot ajuta pe cineva.
Swift 4.2 Soluție
// Inside UITableViewCell subclass
override func layoutSubviews() {
super.layoutSubviews()
contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8))
}
Am rezolvat-o astfel de prognoze modul în Swift 4.
Am crea o extensie a UITableViewCell și include acest cod:
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
}
Sper că vă ajută.
Cred că cel mai drept înainte soluție în cazul tău doar în căutarea pentru un pic de spațiu și, probabil, mai puțin costisitoare ar fi pur și simplu setați celula de culoare de frontieră de la mese culoarea de fundal, apoi setați lățimea de frontieră pentru a obține rezultatul dorit!
cell.layer.borderColor = blueColor.CGColor
cell.layer.borderWidth = 3
Dacă nu utilizați secțiunea antete (sau subsoluri) deja, le puteți folosi pentru a adăuga arbitrare spațiere la celulele de tabel. În loc de a avea o secțiune cu n rânduri, de a crea un tabel cu n secțiuni cu un singur rând fiecare.
Pune în aplicare tableView:heightForHeaderInSection:
metoda de control la distanță.
De asemenea, poate doriți să pună în aplicare tableView:viewForHeaderInSection:
pentru a controla ce distanța se pare.
Exemplu în swift 3..
clasa ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
@IBOutlet slab var tableView: UITableView!
var arraytable = [[Șir:Orice]]() prototipul func viewDidLoad() { super.viewDidLoad()
arraytable = [ ["titlu":"Despre Noi","detalii":"RA-InfoTech Ltd -Un Joint-Venture, O Companie fondată de Banca Asia Ltd"], ["titlu":"Contact","detalii":"Bengal Centru (4 & Etajul 6), 28, Topkhana Drum, Dhaka - 1000, Bangladesh"] ]
tableView.delega = auto tableView.dataSource = auto
//Pentru Auto Redimensionare Tabel De Celule; tableView.estimatedRowHeight = 44 tableView.rowHeight = UITableViewAutomaticDimension
//Detault Fundal clar tableView.backgroundColor = UIColor.clar }
func numberOfSections(în tableView: UITableView) -> Int { reveni arraytable.conta }
func tableView(_ tableView: UITableView, numberOfRowsInSection secțiunea: Int) -> Int { return 1 }
// Setați distanța între secțiuni func tableView(_ tableView: UITableView, heightForHeaderInSection secțiunea: Int) -> CGFloat { întoarcerea 10 }
// Face culoarea de fundal arată prin func tableView(_ tableView: UITableView, viewForHeaderInSection secțiunea: Int) -> UIView? { să headerView = UIView() headerView.backgroundColor = UIColor.clar
reveni headerView }
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
să celula = tableView.dequeueReusableCell(withIdentifier: "mobil")! ca! CustomCell
mobil.tv_title.text = arraytable[indexPath.secțiune]["titlu"] ca! String? mobil.tv_details.text = arraytable[indexPath.secțiune]["detalii"] ca! String?
//eticheta înălțime dinamic crește mobil.tv_details.numberOfLines = 0
//Pentru frontieră de jos a tv_title; lasă-cadru = celulă.tv_title.cadru să bottomLayer = CALayer() bottomLayer.cadru = CGRect(x 0, y: cadru.înălțime - 1, lățime: cadru.lățime, înălțime: 1) bottomLayer.backgroundColor = UIColor.negru.cgColor mobil.tv_title.strat.addSublayer(bottomLayer)
//borderColor,albastru, cornerRadius mobil.backgroundColor = UIColor.lightGray mobil.strat.borderColor = UIColor.roșu.cgColor mobil.strat.albastru = 1 mobil.strat.cornerRadius = 8 mobil.clipsToBounds = true
reveni celulă }
}
Da, puteți mări sau micșora distanța(padding) între două celule de a crea o bază de vedere privind conținutul vedere în celulă.Set clar de culoare pentru conținutul vedere fundal și puteți regla înălțimea de bază vedere de a crea spațiu între celule.
Trei abordări pot să cred că:
Creați un tabel personalizat mobil care stabilește vedere întreaga celulă în maniera pe care o doriti
În loc de a adăuga imaginea la imaginea de vedere, clar subviews de imaginea a vizualiza, de a crea un obicei vezi care adaugă un UIImageView pentru imagine și un alt punct de vedere, poate un simplu UIView, care oferă spațierea dorită, și adăugați-l ca un subview de vizualizarea de imagini.
Vreau să sugerez că ai manipula UIImageView direct pentru a seta o dimensiune fixă/de umplutură, dar am'm nicăieri în apropiere de Xcode deci nu pot't a confirma dacă/cum ar putea să funcționeze.
Asta face sens?
Am fost în aceeași barcă. La început am încercat trecerea la secțiuni, dar în cazul meu a ajuns sa fie mai mult de o durere de cap decât am crezut inițial, așa că am'am fost în căutarea pentru o alternativă. A păstrați folosind rânduri (și nu te pui cu cât ai acces la modelul dvs. de date), aici's ceea ce a lucrat pentru mine, la fel de folosind o mască:
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
}
Tot ce ai de facut este asigurați-celula's înălțime mai mare de aceeași valoare ca și dorit verticalPadding
, și apoi modificați aspect interior, astfel încât orice opinii care a avut-distanța față de marginile celulei au aceeași spațiere a crescut cu verticalPadding/2
. Minor dezavantaj: ai verticalPadding/2
padding pe atât de sus și de jos a tableView, dar puteți rezolva rapid acest lucru prin setarea tableView.contentInset.jos = -verticalPadding/2 " și " tableView.contentInset.top = -verticalPadding/2`. Sper că acest lucru ajută cineva!
Acest articol m-a ajutat, l's destul de mult ceea ce alte răspunsuri spus, dar rezuma și concis
https://medium.com/@andersongusmao/left-and-right-margins-on-uitableviewcell-595f0ba5f5e6
În ea, el doar le aplică la stânga și la dreapta, dar UIEdgeInsetsMake
init vă permite să adăugați umplutură pentru toate cele patru puncte.
func UIEdgeInsetsMake( partea de sus: CGFloat, stânga: CGFloat, jos: CGFloat, dreapta: CGFloat) -> UIEdgeInsets
Descriere Creează un avantaj insertie pentru un buton sau de vedere. O insertie este o marjă în jurul unui dreptunghi. Valorile pozitive reprezintă marjele mai aproape de centrul de dreptunghi, în timp ce valorile negative reprezintă marjele mai departe de centru.
Parametrii top: introducere la partea de sus a unui obiect. stânga: insertie pe partea stângă a unui obiect jos: insertie pe partea de jos a unui obiect. dreapta: insertie pe dreapta de un obiect.
se Întoarce Un medalion pentru un buton sau pentru a vizualiza
Rețineți că UIEdgeInsets poate fi, de asemenea, folosit pentru a realiza același lucru.
Xcode 9.3/Swift 4
Bazat pe Husam's răspuns: Folosind strat de celule în loc de conținut view vă permite pentru a adăuga un chenar în jurul întreaga celulă și accesorii, dacă este nevoie. Această metodă necesită ajustarea atentă a fundului constrângeri de celule, precum și acele introduceri în caz contrar vedere nu va adecvată.
@implementation TableViewCell
- (void)awakeFromNib {
...
}
- (void) layoutSubviews {
[super layoutSubviews];
CGRect newFrame = UIEdgeInsetsInsetRect(self.layer.frame, UIEdgeInsetsMake(4, 0, 4, 0));
self.layer.frame = newFrame;
}
@end
Folosind antete spațiere ar lucra bine, cred că dacă nu't doriți să utilizați orice antete. Altfel, probabil nu cea mai buna idee. Ceea ce am'm de gândire este de a crea o celula personalizate vedere.
Exemple:
În celula personalizate, face un fundal cu vedere constrângerile, astfel încât acesta nu't umple întreaga celulă, da ceva de umplutură.
Apoi, face tableview fundal invizibil și scoateți separatoare:
// Make the background invisible
tableView.backgroundView = UIView()
tableView.backgroundColor = .clear
// Remove the separators
tableview.separatorStyle = .none
Dacă tu nu't doriți să modificați secțiunea și numărul de rând de tabel (cum am facut eu), aici's ceea ce faci:
Adauga un ImageView la partea de jos a tabelului celula de vedere.
a Face aceeași culoare ca și culoarea de fundal a tabelului de vedere.
Am'am făcut acest lucru în cererea mea si functioneaza perfect. Noroc! :D
Situația mea a fost ca am folosit personalizate UIView să viewForHeader în secțiune, de asemenea, heightForHeader în secțiunea reveni înălțime constantă spune de 40 de ani, problema a fost atunci când nu există date toate antet vedere au fost atinse pentru fiecare alte. așa că am vrut să-spațiu între secțiunea din absent de date, astfel încât am rezolvat doar prin schimbarea "tableview stil" avion de la "Grup".și ea a lucrat pentru mine.
A verifica afară meu soluție pe GitHub cu subclasarea de UITableViewși folosind runtime caracteristici de Objective-C. Se folosește practic Apple's privată structura de date
UITableViewRowData că am fost în căutarea privat runtime antet de UITableView`:
și aici's dorit privat clasă care conține tot ce ai nevoie pentru aspectul celulelor' etrieri cu toate acestea doriți, fără a stabili în celule' clase: