Comment construis-tu et interagis-tu avec une grille comme une planche de Sudoku?

Question

Selon vous, quelle est la meilleure façon de mettre en œuvre une grille interactive similaire à une carte Sudoku pour une application iPhone native? Je n'ai pas vu d'objet pour répondre à ce besoin dans le SDK.

Dois-je créer un contrôle personnalisé pour une cellule individuelle, puis en initialiser autant que j'en ai besoin sous forme de grille?

Sudoku grid http://www.sudoku.4thewww.com/Grids/grid.jpg

Tous les commentaires sont les bienvenus. Merci!

Answer 1

La grille est un moyen de visualiser le contenu, pas de stocker la représentation. En fin de compte, votre grille est faite de cellules qui ont un contenu et donc votre objet sous-jacent est peut-être mieux incarné par la cellule. Il existe un certain nombre de façons de concevoir le stockage sous-jacent pour un jeu de Sudoku et le plus grand défi sera certainement la génération de puzzles. Cependant, le conseil à prendre à partir de ceci est de ne pas déterminer votre modèle en fonction de la façon dont il apparaît à l'écran - la couche de vue est totalement séparée et ainsi de faire quelque chose comme un tableau bidimensionnel serait une mauvaise idée.

Answer 2

Vous pouvez le faire avec UIViews ou CALayers comme sous-vues de l'aperçu principal. Vous en aurez besoin d'au moins 81 (un pour chaque numéro de la grille Sudoku). Les calques sont plus légers et demandent moins de ressources, mais les vues ont un peu plus de fonctionnalités. Ce que vous choisissez dépend de ce que vous essayez de faire.

Answer 3

Il y avait un article quelque part sur la façon de mettre en œuvre un solveur de Sudoku. Je pense qu'il utilise une structure de données comme ceci:

• une grille comporte 81 cellules
• une cellule a trois appartenances de groupe: une colonne, une rangée et une boîte
• un groupe a 9 cellules (références)

une cellule a quelques propriétés plus, en fonction de ce que vous voulez faire avec la structure:

• une valeur
• un drapeau hidden (pour un jeu)
• un ensemble de valeurs possibles (pour un solveur)

Answer 4

Pour une telle grille complètement uniforme, je voudrais créer une sous-classe de UIView et avoir de déterminer quelle ligne et la colonne que l'utilisateur a touché l'aide d'un simple calcul:

int touchedRow = 9 * touch.x/[self bounds].width; 
int touchedCol = 9 * touch.y/[self bounds].width;

Je ne vois pas beaucoup d'avantages à créer 81 objets individuels dans la mémoire, quand un objet suffit.

Answer 5

Je me suis amusé avec un jeu de Sudoku auparavant et j'ai dessiné le quadrillage et le dessin numérique en une seule vue. Pas à cause de contraintes de mémoire (l'utilisation d'un seul contrôle et d'une mémoire cellulaire réutilisable ne devrait pas poser de problème), mais il suffit de quelques calculs simples pour déterminer les emplacements de la grille et des nombres, et programmer une vue être plus facile au début. Si, plus tard, vous commencez à vous sentir dépassé par la quantité de code de dessin et de gestion des événements dans votre classe d'affichage, vous pouvez créer un objet de cellule réutilisable qui effectue une grande partie du travail, similaire à UITableView.

L'animation de base fonctionnerait certainement ici aussi, si vous avez besoin d'animation ou non. Un conseil de Sudoku n'aurait probablement pas beaucoup d'animation, mais si vous le faites (peut-être une boîte de sélection coulissante?), Cela pourrait être le meilleur choix.

Answer 6

J'utilise this code (source: this blog) tout le temps. C'est une grande "entrée" dans le plaisir et les mésaventures de faire des grilles. Je couple ceci avec un algorithme qui regarde le nombre d'objets "désirés" et le "cadre" disponible, et me dit le meilleur nombre de colonnes/rangées. Pensez modulo .. int % int ...

- (void)awakeFromNib { 
    self.wantsLayer = YES; 
    CALayer *grid = self.layer; 
    grid.backgroundColor = CGColorCreateGenericRGB(0.1, 0.1, 0.4, .8); 
    grid.layoutManager = [CAConstraintLayoutManager layoutManager]; 
    int rows = 8; int columns = 8; 
    for (int r = 0; r < rows; r++) { 
     for (int c = 0; c < columns; c++) { 
      CALayer *cell = [CALayer layer]; 
      cell.borderColor = CGColorCreateGenericGray(0.8, 0.8); 
      cell.borderWidth = 1; cell.cornerRadius = 4; 
      cell.name = [NSString stringWithFormat:@"%u@%u", c, r]; 
      [cell addConstraint: 
      [CAConstraint constraintWithAttribute: kCAConstraintWidth 
       relativeTo: @"superlayer" 
       attribute: kCAConstraintWidth 
       scale: 1.0/columns offset: 0]]; 
      [cell addConstraint: 
      [CAConstraint constraintWithAttribute: kCAConstraintHeight 
       relativeTo: @"superlayer" 
       attribute: kCAConstraintHeight 
       scale: 1.0/rows offset: 0]]; 
      [cell addConstraint: 
      [CAConstraint constraintWithAttribute: kCAConstraintMinX 
       relativeTo: @"superlayer" 
       attribute: kCAConstraintMaxX 
       scale: c/(float)columns offset: 0]]; 
      [cell addConstraint: 
      [CAConstraint constraintWithAttribute: kCAConstraintMinY 
       relativeTo: @"superlayer" 
       attribute: kCAConstraintMaxY 
       scale: r/(float)rows offset: 0]]; 
     [grid addSublayer:cell]; 
} } } 

Answer 7

Son utilisation très Simple.I GRIDVIEW en tant que classe UIViewController et ajoutez le code suivant dans gridView.m

#import "SudokuClass.h" 
#import "GridView.h" 

@interface GridView() 

@end 

@implementation GridView 


-(void)createNumberButton { 

    int cellWidth = 34; 
    int cellHeight = 34; 
    int xSta = 7 - cellWidth; 
    int ySta = 50 - cellHeight; 
    //NSMutableDictionary *buttonTable = [[NSMutableDictionary alloc] initWithCapacity:81]; 
    for (int i = 1; i < 10; i++) { 
     xSta = xSta + cellWidth; 
     for (int j = 1 ; j < 10; j++) { 
      ySta = ySta + cellHeight; 
      CGRect pos = CGRectMake(xSta, ySta, cellWidth, cellHeight); 
      UIButton *b = [SudokuClass createSudokuButtonForView:self atPos:pos 
                  withTag:j*10+i forAction:@selector(numButtonPressed:)]; 
      NSString *picName = @"ButtonPic.jpg"; 
      [b setBackgroundImage:[[UIImage imageNamed:picName] stretchableImageWithLeftCapWidth:0 topCapHeight:0] forState:0]; 
      [self.view addSubview:b]; 
      //[numButtons addObject:b]; 
     } 
     ySta = 50 - cellHeight; 
    }} 
-(void)viewDidLoad 
{ 

    [self createNumberButton]; 
    [super viewDidLoad]; 
} 
@end 

classe ici est mon sudoku Classe nsobject avec méthode

+(UIButton *)createSudokuButtonForView:(UIViewController *)view atPos:(CGRect)position withTag:(int)tag forAction:(SEL)action { 
UIButton *b = [UIButton buttonWithType:UIButtonTypeCustom]; 
[b setFrame:position]; 
[b.titleLabel setFont:[UIFont boldSystemFontOfSize:15]]; 
[b setTag:tag]; 
[b addTarget:view action:action forControlEvents:UIControlEventTouchDown]; 
[b setTitle:@"" forState:0]; 
[b setTitleColor:[UIColor blackColor] forState:0]; 
//b.layer.frame = CGRectMake(xSta-1, ySta-1, 31, 31); 
//[b.layer setBorderWidth:borderWidth]; 


b.userInteractionEnabled = YES; 
return b;} 

ind il utile .. :)