Comment donner de l'espace entre deux cellules dans tableview?
Je veux un espace entre deux cellules en vue tableau,
Je veux une cellule comme ça,
Comment puis je faire ça?
Vous pouvez également créer des sections de TableView dans UITableView ... Ces méthodes sont obligatoires; vous devez donc créer des sections et dans chaque section, vous pouvez créer une cellule unique comme dans votre image.
vous ne pouvez pas définir directement la distance entre les cellules, mais vous pouvez définir la hauteur d'en-tête de section pour obtenir le même résultat.
1. Définissez les numéros de cellules dont vous avez besoin sous forme de sections:
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 3; // in your case, there are 3 cells
}
2.retourner seulement 1 cellule pour chaque section
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 1;
}
3. définir la hauteur de l'en-tête dans la section pour définir l'espace entre les cellules
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 10.; // you can have your own choice, of course
}
4. paramétrez la couleur d'arrière-plan de l'en-tête sur la couleur pour qu'elle ne soit pas bizarre
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *headerView = [[UIView alloc] init];
headerView.backgroundColor = [UIColor clearColor];
return headerView;
}
Le meilleur moyen d’obtenir de l’espace entre deux cellules dans TableView, déclarez le nombre de sections que vous souhaitez dans la méthode déléguée de numberofsections de cette façon.
Par exemple, vous avez un tableau de 10 objets
- (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.
}
Ensuite, le point important est la méthode de délégation cellForRowAtIndexPath, vous devez utiliser indexpath.section mais pas indexpath.row.
cell.textLabel.text=[NSString stringWithFormat:@"%@",[array objectAtIndex:indexPath.section]];
C’est-à-dire, vérifiez votre table pour l’espace entre deux cellules. Prendre plaisir!
La réponse de plusieurs sections fonctionnerait, mais elle est extrêmement fragile et ne permet pas les sections actuelles . Au lieu de cela, vous devez créer une cellule personnalisée ou un prototype de cellule personnalisé qui présente simplement un espace vide en bas et/ou en haut.
Utilisez vos jambes de force et vos ressorts dans IB pour maintenir cet espace uniforme, puis utilisez heightForRowAtIndexPath pour obtenir une hauteur incluant l'espace.
Objectif c
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 (cela même fonctionnera pour Swift 4 également)
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)
Cela a fonctionné pour moi.
Si quelqu'un cherche Swift version. Voici.
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
}
Pour les personnes qui recherchent un moyen alternatif de montrer les espaces entre les cellules sans utiliser de sections, vous pouvez afficher des couleurs et une hauteur alternatives comme ci-dessous. Utilisez clearColor pour l'espacement.
- (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;
}
}
Ajoutez ces lignes à la méthode cellForRowAtIndexPathUITableViewDelegate avant de renvoyer la cellule.
let separator = UIView(frame: CGRectMake(0, 0, cell!.bounds.size.width, 1))
separator.backgroundColor = UIColor.whiteColor()
cell.contentView.addSubview(separator)
J'ai utilisé une approche simple et rapide pour cela (en utilisant le storyboard)
- Ajouter UITableView dans votre contrôleur
- Définissez le style de séparateur sur aucun (de l'inspecteur d'attributs)
- Réglez la hauteur de la rangée à 5 points de plus du haut et du bas de la hauteur souhaitée
- Maintenant, ajoutez une image dans la cellule, épinglez-la de gauche à droite tout en laissant un espace de 5 pts (pour un remplissage similaire à celui du toucher) et définissez le fond de l'image comme identique à celui de la cellule
Lorsque la vue tableau sera chargée, vous aurez l'impression qu'il y a des espaces entre les cellules.
Pour l'espacement entre les cellules comme celles de votre capture d'écran, vous n'avez pas besoin de cellules personnalisées (pour leur apparence, comme le dégradé bkg, etc., cela pourrait être une bonne idée, cellules)
Pour obtenir ce type d'espacement, utilisez simplement différentes sections dans votre UITableView.
[EDIT] Tout est expliqué Dans le Guide de programmation TableView d'Apple (et ça vaut la peine d'être lu, car il contient beaucoup de choses à savoir sur les vues de table)
Visuellement, ce que vous essayez d’obtenir équivaudrait à ajouter le contenu de chaque cellule dans une vue conteneur avec un fond gris et d’avoir cette vue à l’intérieur de la cellule. Je ne pense pas qu'il soit nécessaire d'ajouter des espaces entre les cellules.
Ma solution facile en utilisant Swift:
// Inside UITableViewCell subclass
override func layoutSubviews() {
let f = contentView.frame
let fr = UIEdgeInsetsInsetRect(f, UIEdgeInsetsMake(10, 10, 10, 10))
contentView.frame = fr
}
ou code d'une ligne
override func layoutSubviews() {
contentView.frame = UIEdgeInsetsInsetRect(contentView.frame, UIEdgeInsetsMake(10, 10, 10, 10))
}
Résultat 
* UTILISATION DE IOS 9 XCODE 7.3 *
Le moyen le plus simple d'y parvenir est simplement d'ajouter ce code à votre méthode 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
Ensuite, allez sur votre story-board et cliquez sur la tableview. Accédez à l'inspecteur d'identité et remplacez la couleur d'arrière-plan de la vue par la couleur de bordure définie dans la méthode. Voila! Jouez avec les valeurs pour obtenir le résultat souhaité. J'espère que cela t'aides!
Remarque: Si vous utilisez la bibliothèque Chameleon, vous devez définir la couleur d'arrière-plan de la vue dans le code, et non via le plug-in Story Board. Pour une raison quelconque, la couleur semble être éteinte par une nuance.
Je ne sais pas pourquoi toutes les réponses si compliquées. KIS, en utilisant uniquement le storyboard, j'ai placé UIView dans la vue Contenu du tableauCellule; maintenant, la hauteur UIView est inférieure à la hauteur de la vue Contenu, et c'est tout!
Jouez avec la couleur Content View et la couleur UIView pour obtenir le résultat souhaité.
Eh bien, ce que j'ai fait est simplement simuler l'espace en créant une cellule personnalisée simple un peu plus grande que ce que je veux (cellule + espace/2), puis en plaçant tout le contenu de ma cellule dans une vue interne.
Placez ensuite la vue la plus haute de votre cellule en tant que couleur de votre arrière-plan et la vue intérieure en tant que votre cellule réelle. Et vous aurez l'illusion d'avoir un espace entre les cellules, alors qu'il ne s'agit en fait que d'une cellule plus grande avec des bordures.
1) créez d’abord 2 sections dans la vue tableau . 2) créez une cellule vide . 3) créez la cellule avec les données que vous souhaitez afficher . 4) utilisez la méthode
(CGFloat) tableView: (UITableView *) tableView heightForRowAtIndexPath: (NSIndexPath *) indexPath { If (indexPath.section == 0) {
if (indexPath.row% 2! = 1) { retourne 15,0; } else { return 100; }}autre
if (indexPath.row % 2 != 1) { return 100.0; } else { return 15.0; }
}
Cela va ajouter de l'espace entre les cellules. Cela a fonctionné pour moi.
Voici ma méthode avec Swift 3:
Dans ViewDidLoad (), ajoutez:
self.tableView.rowHeight = 500.0
Dans la vue de table "CellForRowAt", ajoutez ce qui suit:
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
}
Dans la vue Table DataSource, il existe deux méthodes appelées nombre de sections et nombre de lignes. retourne 3; En rangées retourne 1;
-(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;
}
J'utilise comme:
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)
}
Obtenir les valeurs RVB du code de couleur auprès de:
Il n'est pas nécessaire d'attribuer chaque section à chaque cellule. Créez simplement un UIView (conteneur) dans votre cellule, mettez-le en marge de la vue de la cellule. Et nous mettons en forme des composants tels que label, texte, image sur ce conteneur.
Je suggère de créer une classe de base UITableViewCell personnalisée et d'utiliser cette classe comme ci-dessous,
- Créer une classe UITableViewCell personnalisée
- Créez un UIView dans une nouvelle classe, cela agira comme 'baseContentView' et deviendra l'enfant immédiat de 'UITableViewCell.contentView'
- Ajustez le 'remplissage' supérieur sur 'baseContentView' (ce sera le séparateur/espace) à partir de la vue parent (UITableViewCell.contentView)
- Hériter de toutes vos classes personnalisées de cette classe plutôt que de UITableViewCell
- Ajoutez tous les contenus/sous-vues à 'baseContentView' plutôt qu'à 'self.contentView'
Vous pouvez jouer avec le 'rembourrage' selon vos besoins.