{"id":1376,"date":"2014-08-16T11:54:26","date_gmt":"2014-08-16T15:54:26","guid":{"rendered":"http:\/\/tim.cstj.qc.ca\/cours\/xcode\/wp\/?page_id=1376"},"modified":"2014-08-16T11:54:26","modified_gmt":"2014-08-16T15:54:26","slug":"uikit-playground","status":"publish","type":"page","link":"https:\/\/ve2cuy.com\/xcode\/uikit-playground\/","title":{"rendered":"UIKit – playground"},"content":{"rendered":"

Le framework ‘UIKit’ propose des classes pour \u00e9laborer la partie ‘interface utilisateur’ d’une application. \u00a0Par exemple, une sc\u00e8ne (vue), un bouton, une image, du texte, …
\nLe nom des classes UIKit d\u00e9bute toujours par ‘UI’. \u00a0Par exemple UILabel, UIImage, UIView, UIButton, …<\/p>\n

\n

 <\/p>\n

La classe UIView – pr\u00e9sentation et de regroupement<\/h1>\n
var uneVue:UIView = UIView(frame : CGRectMake(0,0,250,250))\nuneVue.backgroundColor = UIColor.purpleColor()\n<\/pre>\n
\"view.model.01\"
\nSyst\u00e8me de coordonn\u00e9es de UIKit<\/a>
\n <\/p>\n
\n\n\n\n\n\n\n
Dimensions des appareils iOS (en points)<\/caption>\n
\n
Device<\/p>\n<\/th>\n
\n
Screen dimensions (in points)<\/p>\n<\/th>\n<\/tr>\n
iPhone et\u00a0iPod touch avec \u00e9cran retina 4 pouces<\/td>\n320 x 568<\/td>\n<\/tr>\n
Autres\u00a0iPhone et iPod<\/td>\n320 x 480<\/td>\n<\/tr>\n
iPad<\/td>\n768 x 1024<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
 \n<\/p><\/div>\n
var uneAutreVue:UIView = UIView(frame : CGRectMake(10,10,40,40))\nuneAutreVue.backgroundColor = UIColor.greenColor()\nuneVue.addSubview(uneAutreVue)<\/pre>\n
\"view.model.02\"
\nUIView.frame renseigne sur la position et la dimension de l’objet<\/p>\n
println(uneAutreVue.frame.origin.x)    \/\/ 10.0\nprintln(uneAutreVue.frame.size.width)  \/\/ 40.0\nprintln(uneVue.center)                 \/\/ (125.0, 125.0)<\/pre>\n
 <\/p>\n
uneAutreVue.center = uneVue.center\nuneVue<\/pre>\n
\"view.model.02b\"
\nUne transformation (rotation)<\/p>\n
uneAutreVue.transform = CGAffineTransformRotate(uneAutreVue.transform, 3.14 \/ 4 \/* angle en radian *\/)\nuneVue\n<\/pre>\n
\"view.model.02b2\"
\n 
\nLes coordonn\u00e9es absolues d’une Vue:<\/p>\n
println(uneAutreVue.bounds)  \/\/ (0.0, 0.0, 40.0, 40.0)\n<\/pre>\n
Ajouter un objet ‘UILabel’<\/p>\n
var unTitre = UILabel(frame: CGRectMake(10,0,uneVue.bounds.width - 10, 25))\nunTitre.text = \"Bonjour TIM\"\nunTitre.textColor = UIColor.whiteColor()\nunTitre.textAlignment = NSTextAlignment.Center\nuneVue.addSubview(unTitre)<\/pre>\n
\"view.model.02c\"
\n <\/p>\n
let largeur:CGFloat = 20, hauteur:CGFloat = 20, marge:CGFloat = 10\nfor ligne in 0...7 {\n    for colonne in 0...7 {\n        \/\/ G\u00e9n\u00e9rer une valeur rgb al\u00e9atoire\n        \/\/ arc4random_uniform(n) retourne une valeur al\u00e9atoire entre 0 et n-1\n        let rouge = CGFloat(arc4random_uniform(256)) \/ 255\n        let vert  = CGFloat(arc4random_uniform(256)) \/ 255\n        let bleu  = CGFloat(arc4random_uniform(256)) \/ 255\n        var carre = UIView(frame: CGRectMake(CGFloat(colonne) * (largeur + marge) + marge, CGFloat(ligne) * (hauteur + marge)  + marge, largeur, hauteur))\n        carre.backgroundColor = UIColor(red: rouge, green: vert, blue: bleu, alpha: 1)\n        uneVue.addSubview(carre)\n    } \/\/ colonne\n} \/\/ ligne\nuneVue<\/pre>\n
Un peu de normalisation<\/p>\n
let largeur:CGFloat = 20, hauteur:CGFloat = 20, marge:CGFloat = 10\nlet lignes = 7, colonnes = 7\nfunc couleurHasard() -> CGFloat {\n  return CGFloat(arc4random_uniform(256)) \/ 255\n}\nfor ligne in 0...lignes {\n    for colonne in 0...colonnes {\n        \/\/ G\u00e9n\u00e9rer une valeur rgb al\u00e9atoire\n        \/\/ arc4random_uniform(n) retourne une valeur al\u00e9atoire entre 0 et n-1\n        let rouge = couleurHasard()\n        let vert  = couleurHasard()\n        let bleu  = couleurHasard()\n        var carre = UIView(frame: CGRectMake(CGFloat(colonne) * (largeur + marge) + marge, CGFloat(ligne) * (hauteur + marge)  + marge, largeur, hauteur))\n        carre.backgroundColor = UIColor(red: rouge, green: vert, blue: bleu, alpha: 1)\n        uneVue.addSubview(carre)\n    } \/\/ colonne\n} \/\/ ligne\nuneVue<\/pre>\n
 
\n\"view.model.03\"
\nAfficher une image (UIImageView + UIImage)
\nNote: Pour qu’Xcode puisse localiser les images, Il faut renseigner le dossier des Ressources du projet ‘playground’
\n\"view.model.04a\" \"view.model.04b\"\u00a0\"view.model.04c\"
\nNote: Il faudra peut-\u00eatre red\u00e9marrer le projet apr\u00e8s cette op\u00e9ration.
\n <\/p>\n
var uneImage = UIImageView(image: UIImage(named:\"tintin.jpg\"))\n<\/pre>\n
\"view.model.04d\"
\nAjouter l’image \u00e0 une vue<\/p>\n
var uneScene = UIView(frame : CGRectMake(0,0,320,568))\n    uneScene.backgroundColor = UIColor.lightGrayColor()\nuneScene.addSubview(uneImage)<\/pre>\n
\"view.model.05a\"
\nContr\u00f4ler la taille et la position de l’image dans la vue.<\/p>\n
var uneAutreImage = UIImageView(frame: CGRectMake(0,0,150 ,150))\nuneAutreImage.image = UIImage(named:\"tintin.jpg\")\nuneAutreImage.center = uneScene.center\nuneScene.addSubview(uneAutreImage)<\/pre>\n
\"view.model.05b\"<\/p>\n","protected":false},"excerpt":{"rendered":"
Le framework ‘UIKit’ propose des classes pour \u00e9laborer la partie ‘interface utilisateur’ d’une application. \u00a0Par exemple, une sc\u00e8ne (vue), un bouton, une image, du texte, … Le nom des classes UIKit d\u00e9bute toujours par ‘UI’. \u00a0Par exemple UILabel, UIImage, UIView, UIButton, …   La classe UIView – pr\u00e9sentation et de regroupement var uneVue:UIView = UIView(frame […]<\/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-1376","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/pages\/1376","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=1376"}],"version-history":[{"count":0,"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/pages\/1376\/revisions"}],"wp:attachment":[{"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/media?parent=1376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}