41 votes

Mises en page iOS alternatives pour le portrait et le paysage en utilisant un seul fichier .xib

En utilisant le générateur d'interface dans xcode et un seul fichier .xib, comment puis-je créer des mises en page alternatives lors de la rotation entre les orientations paysage et portrait?

Voir le schéma des différentes dispositions entrez la description de l'image ici

Nb . la vue / zone verte contiendrait 3 éléments circulant horizontalement dans le paysage et en portrait ces 3 éléments couleraient verticalement dans la vue / zone verte.

44voto

MeXx Points 678

Une façon de le faire est d'avoir trois points de vue dans votre .xib fichier. Le premier est le mode normal de votre Viewcontroller avec aucun des sous-vues.

Ensuite, vous créez les points de vue pour le portrait et paysage que vous en avez besoin. Tous trois doivent être au niveau de la racine des vues (jetez un oeil à la capture d'écran)

enter image description here

Dans votre Viewcontroller, créer 2 IBOutlets, l'un pour le portrait et l'autre pour le mode paysage et de les connecter avec le correspondant vues dans l'interface builder:

IBOutlet UIView *_portraitView;
IBOutlet UIView *_landscapeView;
UIView *_currentView;

Le troisième point de vue, _currentView est nécessaire pour garder une trace de l'un de ces points de vue est affiché. Puis créer une nouvelle fonction comme ceci:

-(void)setUpViewForOrientation:(UIInterfaceOrientation)orientation
{
    [_currentView removeFromSuperview];
    if(UIInterfaceOrientationIsLandscape(orientation))
    {
        [self.view addSubview:_landscapeView];
        _currentView = _landscapeView;
    }
    else
    {
        [self.view addSubview:_portraitView];
        _currentView = _portraitView;
    }
}

Vous devez appeler cette fonction à partir de deux endroits différents, d'abord pour l'initialisation:

-(void)viewDidLoad
{
    [super viewDidLoad];
    UIInterfaceOrientation interfaceOrientation = [[UIApplication sharedApplication] statusBarOrientation];
    [self setUpViewForOrientation:interfaceOrientation];
}

Et la deuxième pour les changements d'orientation de l':

-(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    [self setUpViewForOrientation:toInterfaceOrientation];
}

Espère que vous aide!

14voto

Grzegorz Krukowski Points 3972

Il n'y a aucun moyen automatique de prendre en charge cela, car il est contraire à la conception d'Apple. Vous devez avoir un ViewController prenant en charge les deux orientations.

Mais si vous voulez vraiment le faire, vous devez recharger les xib sur les événements de rotation et charger différents fichiers nib.

 -(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    [[NSBundle mainBundle] loadNibNamed:[self nibNameForInterfaceOrientation:toInterfaceOrientation] owner:self options:nil];
    [self viewDidLoad];
}

- (NSString*) nibNameForInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    NSString *postfix = (UIInterfaceOrientationIsLandscape(interfaceOrientation)) ? @"portrait" : @"landscape";
    return [NSString stringWithFormat:@"%@-%@", NSStringFromClass([self class]), postfix];
}
 

Et vous créez deux fichiers nib post-fixes avec "paysage" et "portrait".

8voto

TomSwift Points 22012

J'aime @MeXx est une solution, mais il a la surcharge de garder deux point de vue différent des hiérarchies dans la mémoire. Aussi, si une sous-vue a l'état (par exemple la couleur) que les changements, vous aurez besoin de la carte qu'à travers lorsque vous passez des hiérarchies.

Une autre solution pourrait être d'utiliser l'auto-mise en page et de permuter les contraintes de chaque sous-vue pour chaque orientation. Cela fonctionne mieux si vous avez un mappage 1:1 entre les sous-vues dans les deux orientations.

Naturellement, vous voulez utiliser de l'IB visuellement définir la mise en page pour chaque orientation. Sous mon plan que vous avez à faire ce que @MeXx prescrit, mais alors de créer un mécanisme pour stocker les deux ensembles de contraintes qu'une fois la plume a été chargé (awakeFromNib) et de ré-appliquer l'ensemble correct de la mise en page (viewWillLayoutSubviews). Vous pourriez jeter le secondaire afficher la hiérarchie une fois que vous avez trouvé et stockées ses contraintes. (Depuis, les contraintes sont de la vue spécifique, vous seriez probablement être la création de nouvelles contraintes s'appliquent au sous-vues).

Désolé je n'ai pas de code. C'est juste un plan à ce stade.

Note finale - tout cela serait plus facile avec un xib que d'un storyboard, puisque dans un storyboard, c'est douloureux pour décrire les points de vue qui vivent en dehors de la vue du contrôleur de la vue principale (ce qui est souhaitable car sinon ses un pain PITA à modifier). Blach!

3voto

kshitij godara Points 501

Ya vous pouvez sir sûrement ....

J'ai l'habitude de faire est en donnant de l'image manuellement lorsque l'Appareil tourne

Chaque fois que l'appareil tourne , - (void)viewWillLayoutSubviews appelée

par Exemple - prendre un UIButton *button votre UIView,

- (void)viewWillLayoutSubviews
   {
       if (UIDeviceOrientationIsLandscape([self.view interfaceOrientation]))
       {
         //x,y as you want
         [ button setFrame:CGRectMake:(x,y,button.width,button.height)];

       }
       else
       {
         //In potrait
          //x,y as you want
         [ button setFrame:CGRectMake:(x,y,button.width,button.height)];


       }

   }

De cette façon, vous pouvez le placer comme vous le souhaitez . Merci

Jetez un coup d'oeil sur ces images

Première image de mon xCode XIB UIView qui je veux à la fois l'écran de

enter image description here

Maintenant que je veux le look de ce point de vue dans un paysage aussi, alors je suis allé à modifier mon -(void)viewWillLayoutSubviews

enter image description here

Maintenant, le résultat est comme cette Première image de potrait de l'Écran dans le Simulateur

enter image description here

et c'est dans le Paysage

enter image description here

2voto

Prcela Points 1736

Solution de story-board [ios7]. À l'intérieur de la vue principale du contrôleur, il y a le conteneur de vue qui peut inclure la barre d'onglet contrôleur. À l'intérieur de la barre d'onglet contrôleur, il y a 2 onglets. Un onglet est pour la manette avec le portrait et l'autre est pour le contrôleur en mode paysage.

La vue principale du contrôleur met en œuvre ces fonctions:

#define INTERFACE_ORIENTATION() ([[UIApplication sharedApplication]statusBarOrientation])

@interface MainViewController ()
@property(nonatomic,weak) UITabBarController *embeddedTabBarController;
@end

@implementation MainViewController
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if ([segue.identifier isEqualToString:@"embedContainer"])
    {
        self.embeddedTabBarController = segue.destinationViewController;
        [self.embeddedTabBarController.tabBar setHidden:YES];
    }
}

- (void) adaptToOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    if (UIInterfaceOrientationIsLandscape(interfaceOrientation))
    {
        [self.embeddedTabBarController setSelectedIndex:1];
    }
    else
    {
        [self.embeddedTabBarController setSelectedIndex:0];
    }
}
- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation duration:(NSTimeInterval)duration
{
    [self adaptToOrientation:interfaceOrientation];    
}

- (void) viewWillAppear:(BOOL)animated
{
    [self adaptToOrientation:INTERFACE_ORIENTATION()];
}

La séquence lien dans le storyboard doit être nommé "embedContainer".

Assurer que le conteneur affichage peut être redimensionnée pour s'acquitter de la vue parent, dans les deux cas, le paysage et le portrait.

Prendre soin sur le fait que, dans l'exécution de 2 instances de la même contrôleur de vie en même temps.

Storyboard


Mise à jour: Apple docs pour un autre paysage-vue-contrôleur

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X