{"id":1215,"date":"2009-12-12T07:30:37","date_gmt":"2009-12-12T06:30:37","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=1215"},"modified":"2012-02-06T18:45:20","modified_gmt":"2012-02-06T17:45:20","slug":"t018-header-tableview-personalizzato-tramite-xib","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t018-header-tableview-personalizzato-tramite-xib\/","title":{"rendered":"T#018 &#8211; Header personalizzato nelle TableView tramite file Xib"},"content":{"rendered":"<p>Talora nell\u2019utilizzo di una tabella \u00e8 necessario disporre di una riga che non sia legata alla tabella stessa ma indipendente e che sia possibile customizzare senza difficolt\u00e0. Vedremo quindi oggi la creazione di una header view personalizzata a partire da un file Xib da noi creato. Accediamo al nostro progetto e dichiariamo,nella classe in cui abbiamo creato la nostra tabella, una variabile di tipo UIView:<!--more--><\/p>\n<pre lang=\"objc\" escaped=\"true\">UIView *myheader;<\/pre>\n<p>Settiamola quindi come IBOutlet:<\/p>\n<pre lang=\"objc\" escaped=\"true\">@property (nonatomic, retain) IBOutlet UIView *myHeader;<\/pre>\n<p>Creaimo quindi un nuovo file Xib nel solito modo ( File -&gt; New File -&gt; Empty Xib ) e chiamiamolo CustomHeader.<\/p>\n<p>Accediamo alla libreria ed aggiungiamo una UIView ( che possiamo ridimensionare nella Size Inspector nel Menu Tools )<\/p>\n<p><center><br \/>\n<a target=\"_blank\" href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/12\/immagine2.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/12\/immagine2-300x168.png\" alt=\"immagine2\" width=\"300\" height=\"168\" class=\"alignnone size-medium wp-image-1216\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/12\/immagine2-300x168.png 300w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/12\/immagine2.png 964w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<\/center><\/p>\n<p>Cliccando invece sul file Owner -&gt; Identity Inspector nel campo Class inseriamo il nome della nostra classe ( quella dove abbiamo dichiariato la variabile UIView in precedenza ).<\/p>\n<p>In Connection Inspector colleghiamo myHeader alla UIView  creata:<\/p>\n<p><center><br \/>\n<a target=\"_blank\" href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/12\/immagine1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/12\/immagine1-300x146.png\" alt=\"immagine1\" width=\"300\" height=\"146\" class=\"alignnone size-medium wp-image-1217\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/12\/immagine1-300x146.png 300w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/12\/immagine1-1024x498.png 1024w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/12\/immagine1.png 1094w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<\/center><\/p>\n<p>Ovviamente possiamo personalizzare la view come vogliamo. Salviamo e ritorniamo al nostro codice in Xcode e nel metodo cellForRowAtIndexPath aggiungiamo il seguente codice:<\/p>\n<pre lang=\"objc\" escaped=\"true\">\r\n[[NSBundle mainBundle] loadNibNamed:@\"CustomHeader\" owner:self options:NULL];\r\nself.tableView.tableHeaderView = myHeader;\r\n<\/pre>\n<p>Queste due righe di codice sono facilmente comprensibili, nella prima riga effettuo, dal bundle dell\u2019applicazione, il load del file Nib ( realizzato con IB ) chiamato appunto CustomHeader, mentre nella seconda vado ad assegnare al tableHeaderView ( appartenente alla tabella ) myHeader ( precedentemente dichiarata e collegata alla UIView presente nello XIB )<\/p>\n<p><center><br \/>\n<a href=\"http:\/\/www.creact.it\/friends-phone-locator\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/02\/FriendPhoneLocator-Banner.png\" alt=\"Friend Phone Locator Banner\" title=\"FriendPhoneLocator_Banner\" width=\"400\" height=\"60\" class=\"aligncenter size-full wp-image-1917\" \/><\/a><br \/>\n<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Talora nell\u2019utilizzo di una tabella \u00e8 necessario disporre di una riga che non sia legata alla tabella&#8230;<\/p>\n","protected":false},"author":46,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[61,4,1,63,23,62],"class_list":["post-1215","post","type-post","status-publish","format-standard","hentry","category-tutorial-pratici","tag-header","tag-programmazione","tag-tutorial-pratici","tag-uiview","tag-xcode","tag-xib"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/1215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/46"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=1215"}],"version-history":[{"count":8,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/1215\/revisions"}],"predecessor-version":[{"id":8555,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/1215\/revisions\/8555"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=1215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=1215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=1215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}