web-dev-qa-db-fra.com

Coins ronds sur UITableView

Quelle est la meilleure façon de contourner une UITableView entière comme vu dans Stocks et Spotlight? Le style groupé ne résout pas le problème car les coins arrondis défilent avec la cellule. J'essaie de couper la vue pour que les coins soient toujours ronds quelle que soit la position du défilement.

J'ai vu une autre discussion à propos de faire cela à un UIImage qui a suggéré de le masquer avec une autre image. Je ne sais pas si cela fonctionnerait car j'ai besoin de robinets pour passer à la table. Ce n'est pas idéal pour moi car je veux que le motif de fond transparaisse dans les coins.

iphoneuitableview
33
Scrollwheelie

C'est une vieille question mais peut-être vous voulez toujours savoir comment faire cela.

J'ai reproduit une tableView comme dans Stocks/Spotlight. L'astuce est

view.layer.cornerRadius = 10;

Pour que cela fonctionne, vous devez inclure le QuartzCore dans la classe que vous appelez cette propriété:

#import <QuartzCore/QuartzCore.h>

J'ai entendu dire que cela ne fonctionne que depuis OS 3.0. Mais comme mon application utilise des données de base, ce n'était pas un problème car c'était déjà pour OS 3.0 et hight.

J'ai créé une UIView personnalisée avec une sous-vue avec cornerRadius 10 et avec

view.backgroundColor = [UIColor clearColor];

Ensuite, vous devez placer un style groupé UITableView dans cette sous-vue. Vous devez définir backgroundColor sur clearColor et separatorColor sur clearColor. Ensuite, vous devez positionner la vue de table à l'intérieur de la vue d'angle arrondi, cela se fait en définissant la taille du cadre et l'origine. Ma classe loadView de mon UIView personnalisé ressemble à ceci:

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];

J'espère que vous comprenez mon anglais, peut-être que j'écrirai un court article de blog sur cette technique avec un exemple de projet, publierai le lien ici quand je serai prêt.

65
HansPinckaers

Un moyen plus simple de procéder consiste à simplement importer le framework QuartzCore dans votre projet. #import <QuartzCore/QuartzCore.h> à votre tableViewController et définissez simplement

myTableView.layer.cornerRadius=5;

Cela vous donnera des coins arrondis sans avoir à ajouter votre vue de table à une superView ou à la découper.

56
rajomato

Au lieu de pirater le code, voici un moyen facile d'imiter le style groupé. Cela fonctionne si tout ce que vous voulez est une section.

Dans Interface Builder:

  • Définissez le style UITableView sur Plain et créez le cadre avec un rembourrage à gauche et à droite, peut-être avec x = 10 et width = 300.

Ensuite, définissez le rayon du coin et coloriez-vous:

 #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;
13
noobular

J'ai récemment rencontré ce problème et l'ai résolu d'une manière différente. Je pensais partager les résultats avec tout le monde.

J'ai créé une UIView rectangulaire avec un intérieur clair aux coins arrondis, puis je l'ai posé au-dessus de l'UITableView. Vous pouvez trouver la description complète sur mon blog de programmation .

Cela fonctionne exactement comme je le souhaite.

2
Derrick Schneider

Eh bien, il y a beaucoup d'approche pour résoudre ce problème.

Cependant, dans mon cas, tout ne fonctionne pas correctement. Ma table est parfois plus petite que la taille de la table.

Je vais partager la façon dont je l'ai fait. Je crois que c'est beaucoup plus facile et plus rapide que certaines options ci-dessus.

Arrondissez le premier et le dernier élément.

  • Créez CAShapeLayer pour le haut (gauche | droite) et le bas (gauche | droite).

    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;

  • La table doit être backgroud clearColor;

  • Les cellules doivent être un fond coloré;

  • Définissez le masque de calque

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

  • N'oubliez pas #import <QuartzCore/QuartzCore.h>

2
Ratata Tata

Avez-vous essayé le style d'affichage de table "groupé"?

self.tableView.style = UITableViewStyleGrouped;

Pour plus d'informations, reportez-vous au Guide de programmation de la vue Table . Le chapitre "À propos des vues de tableau" contient quelques jolies captures d'écran décrivant les différents styles.

2
Daniel Rinser

Code ci-dessous pour Swift:

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

Assurez-vous d'avoir import QuartzCore dans la section d'importation.

1
Jayprakash Dubey

Voici Swift extension:

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

tilisé de cette façon

  tableView.cornerRadius = 7.5
0
Nazmul Hasan