{"id":2395,"date":"2014-11-17T15:55:46","date_gmt":"2014-11-17T19:55:46","guid":{"rendered":"http:\/\/tim.cstj.qc.ca\/cours\/xcode\/wp\/?page_id=2395"},"modified":"2014-11-17T15:55:46","modified_gmt":"2014-11-17T19:55:46","slug":"mise-en-page-auto-layout-et-size-classes","status":"publish","type":"page","link":"https:\/\/ve2cuy.com\/xcode\/mise-en-page-auto-layout-et-size-classes\/","title":{"rendered":"Mise en page &#8211; Auto layout et Size Classes"},"content":{"rendered":"<p>Contenu<br \/>\n&nbsp;<\/p>\n<hr \/>\n<h1>Auto layout<\/h1>\n<p>Mise en place de r\u00e8gles de mise en page automatique; position d&rsquo;un objet par rapport \u00e0 un autre objet.<br \/>\nEn mode Auto layout, les objets ont une taille intrins\u00e8que: \u00a0c-a-d, la taille est d\u00e9finie par le contenu.<br \/>\n&nbsp;<\/p>\n<hr \/>\n<h1>Size classes<\/h1>\n<p>Suite \u00e0 la multiplication des formats d&rsquo;\u00e9cran des appareils iOS, Apple propose, \u00e0 partir de Xcode 6, la fonction\u00a0 &lsquo;Size Classes&rsquo; pour g\u00e9rer\u00a0le design des sc\u00e8nes.<br \/>\n&nbsp;<br \/>\n\u00c9limination des storyboards multiples.<br \/>\nIl y a deux types de &lsquo;Size classes&rsquo;; &lsquo;regular&rsquo; et &lsquo;compact&rsquo;.<br \/>\nCe type d\u00e9crit la dimension g\u00e9n\u00e9rale d&rsquo;un appareil; espace \u00e9cran spacieux (regular) ou limit\u00e9 (compact).<br \/>\nIl y a un &lsquo;Size classes&rsquo; pour \u00a0la largeur et un autre pour la hauteur de l&rsquo;appareil.<br \/>\nExample,<\/p>\n<ul>\n<li>Un <strong>iPad<\/strong> en mode portrait ou paysage et de type &lsquo;regular height&rsquo; et &lsquo;regular width&rsquo;.<\/li>\n<\/ul>\n<ul>\n<li>Tous les <strong>iPhones<\/strong>, en mode portrait, sont consid\u00e9r\u00e9s\u00a0comme \u00e9tant de type &lsquo;regular height&rsquo; et \u00a0&lsquo;compact width&rsquo;.<\/li>\n<li><strong>iPhone<\/strong> 4, 4s, 5, 5s et 6 en mode paysage\u00a0sont consid\u00e9r\u00e9s comme \u00e9tant\u00a0de type &lsquo;compact height&rsquo; et\u00a0\u00a0&lsquo;compact\u00a0width&rsquo;.<\/li>\n<\/ul>\n<ul>\n<li><strong>iPhone<\/strong>\u00a06 plus en mode\u00a0paysage est\u00a0consid\u00e9r\u00e9 comme \u00e9tant\u00a0de type &lsquo;compact height&rsquo; et\u00a0\u00a0&lsquo;regular width&rsquo;.<\/li>\n<\/ul>\n<p><span style=\"color: #ff00ff;\"><strong>Note \u00e0 l&rsquo;auteur: Ins\u00e9rer une image<\/strong><\/span><br \/>\n&nbsp;<br \/>\n<span style=\"color: #008080;\"><strong>R\u00e9sum\u00e9 des &lsquo;Size classes&rsquo; par appareil<\/strong><\/span><br \/>\n[table]<br \/>\n, compact width, regular width<br \/>\nCompact height, iPhone 4S. 5. 5S. et 6 en paysage, iPhone 6 Plus en paysage<br \/>\nRegular height, tous les iPones en portrait, tout iPads &#8211; tout orientations<br \/>\n[\/table]<br \/>\nLorsqu&rsquo;il est temps d&rsquo;\u00e9laborer les sc\u00e8nes, il est pr\u00e9f\u00e9rable de d\u00e9buter sans mention du &lsquo;size classe&rsquo;, ce qui est la valeur par d\u00e9faut.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2403\" src=\"\/xcode\/wp-content\/uploads\/2014\/11\/size.classes.01.png\" alt=\"size.classes.01\" width=\"681\" height=\"736\" \/><br \/>\n&nbsp;<br \/>\n<span style=\"color: #ff00ff;\"><strong>Note \u00e0 l&rsquo;auteur: \u00a0Ins\u00e9rer le tableau 8.11<\/strong><\/span><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2404\" src=\"\/xcode\/wp-content\/uploads\/2014\/11\/size.classes.02.png\" alt=\"size.classes.02\" width=\"271\" height=\"330\" \/><br \/>\n<span style=\"color: #ff00ff;\"><strong>Note \u00e0 l&rsquo;auteur: ajouter une animation de passage d&rsquo;un format \u00e0 un autre.<\/strong><\/span><br \/>\n&nbsp;<br \/>\n<span style=\"color: #ffcc00;\"><strong>R\u00e8gle d&rsquo;or:<\/strong><\/span> \u00a0Renseigner un maximum de r\u00e8gles en mode &lsquo;<strong>Any, Any<\/strong>&lsquo; puis, ajuster pour les autres formats.<br \/>\n&nbsp;<\/p>\n<h3>Liste des \u00e9l\u00e9ments pouvant \u00eatre chang\u00e9s lors du passage \u00e0 un autre \u00a0&lsquo;Size classe&rsquo;<\/h3>\n<ol>\n<li>Ajout ou\u00a0suppression d&rsquo;une vue (label, button, image, &#8230;)<\/li>\n<li>Modification de la police d&rsquo;un texte<\/li>\n<li>Modification d&rsquo;une contrainte de positionnement<\/li>\n<li>Ajout ou\u00a0suppression\u00a0d&rsquo;une contrainte de positionnement<\/li>\n<\/ol>\n<p>&nbsp;<br \/>\nPasser en mode Any\/Compact<br \/>\nEffacer la zone de recherche.<br \/>\n1 &#8211; Enlever les contraintes de la size classe Any\/Compact (cmd+delete).<br \/>\n2 &#8211; Effacer la zone de recherche\u00a0(cmd+delete).<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<\/p>\n<hr \/>\n<p>R\u00e9f\u00e9rence sur <a href=\"http:\/\/www.raywenderlich.com\/83276\/beginning-adaptive-layout-tutorial\">RW<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contenu &nbsp; Auto layout Mise en place de r\u00e8gles de mise en page automatique; position d&rsquo;un objet par rapport \u00e0 un autre objet. En mode Auto layout, les objets ont une taille intrins\u00e8que: \u00a0c-a-d, la taille est d\u00e9finie par le contenu. &nbsp; Size classes Suite \u00e0 la multiplication des formats d&rsquo;\u00e9cran des appareils iOS, Apple [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2395","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/pages\/2395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/comments?post=2395"}],"version-history":[{"count":0,"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/pages\/2395\/revisions"}],"wp:attachment":[{"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/media?parent=2395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}