• Programmazione Android
  • CORSI ONLINE
  • Web Agency

Logo

Corsi di programmazione web e mobile online
Navigation
  • Home
  • CORSI ONLINE
  • Tutorial Pratici
  • GUIDE COMPLETE
    • Corso completo di C
    • Corso videogame con Cocos2d
    • Programmazione Cocoa Touch
  • Sezioni
    • Libri e manuali
    • Tips & Tricks
    • Risorse utili
    • Strumenti di Sviluppo
    • Materiale OpenSource
    • Framework
    • Guide Teoriche
    • Guide varie
    • Grafica e Design
    • iPad
    • News
    • Video Tutorial
    • Windows Phone
  • Pubblicità
  • About
    • Chi siamo
    • Pubblicazioni
    • Collabora
    • Sostieni devAPP

L#005 – Table Views

By Redazione | on 22 Ottobre 2009 | 3 Comments
Guide Teoriche

Le Table Views sono oggetti molto comuni e usati all’interno delle interfacce grafiche delle applicazioni per iPhone. Vista la loro versatilità, possono essere adottati nelle applicazioni per diversi scopi. Questa lezione illustrerà le parti, le caratteristiche e gli stili delle Table View dal punto di vista sia funzionale che di programmazione, illustrando man mano i diversi contesti in cui vengono usati.

Caratteristiche delle Table Views

Una Table View principalmente è un elenco a scorrimento verticale di oggetti. E’ costituito da una sola colonna, quindi è praticamente una lista che si puo’, come detto, scorrere solo verticalmente. Nella pratica le Table View possono essere usate per svariati scopi le, ad esempio:

  • Per permettere agli utenti di navigare attraverso dei dati strutturati gerarchicamente
  • Per presentare ua lista di opzioni selezionabili
  • Per presentare una lista di oggetti ordinati
  • Per mostrare diverse informazioni in sezioni graficamente distinte tramite raggruppamenti

Una Table View è costituita semplicemente di righe divise in sezioni. Ogni sezione puo’ avere un’intestazione (header) e un piede (footer) che puo’ essere personalizzato con testo o un’immagine. Tuttavia, è ovviamente possibile creare una table view con un’unica sezione e “senza” header e footer. A livello di programmazione, l’UIKit permette di identificare le righe e le sezioni attraverso un indice: le sezioni sono numerate da 0 a n-1 dall’inizio della Table View (in alto), alla fine (in basso); le righe sono numerate anch’esse da 0 a n-1, proprio allo stesso modo. Una table view può inoltre avere un proprio header e footer, distinto per ogni sezione; l’header della tabella è posizionato prima della prima riga della prima sezione, allo stesso modo il footer della tabella appare dopo l’ultima riga dell’ultima sezione.

Le righe visibili di una table view sono composte di celle (cell), che mostrano testo, immagini, o altri tipi di contenuto. Le celle possono inoltre includere degli accessori, spesso dei controlli. Esistono tre tipi standard di questi accessori:

disclosure_indicator Disclosure indicator
UIButtonTypeDetailDisclosure Detail disclosure button
check_mark Check mark

Al posto degli accessori standard, è inoltre possibile utilizzare un classico controllo (come uno switch) o uno personalizzato.

Le Table View possono entrare nella modalità di modifica, dove l’utente puo’ inserire, eliminare o riposizionare le righe nella tabella. Quando si è in modalità modifica compare un simbolo grafico vicino al bordo sinistro della riga. Questo puo’ essere verde, nel caso in cui si voglia inserire un nuovo elemento, e quindi una riga, o rosso nel caso che si voglia invece eliminare un elemento della lista. Se l’utente tocca il controllo per eliminare la riga, o in alcuni casi striscia il dito lungo la riga, un pulsante rosso “Cancella” appare all’utente. Le righe che possono essere riposizionate hanno invece, vicino al bordo destro, un’immagine formata da alcune righe orizzontali. Quando si esce dalla modalità di modifica della Table View, i controlli di inserimento, cancellazione e riordino riga spariscono.

Stili differenti di Table View

Esistono due principali stili per le table views. Nel primo caso, “plain-style”, le righe sono in un unico elenco, possono avere una o più sezioni e le sezioni possono avere al loro interno una o più righe. Ogni sezione puo’ avere il suo header o footer.


tv_plain_style

Una alternativa di questo tipo di Table Views associa un indice alle sezioni, per una navigazione più veloce tra gli elementi. Questa si chiama lista indicizzata. Vi è lungo il bordo destro della tabella un elemento con tutti gli indici che corrispondono agli header delle sezioni.


tv_indexed_list

Altro esempio è la selection (o radio) list. Una selection list è una table view plain-style che presenta un menu con elementi che l’utente puo’ selezionare. E’ possibile limitare la selezione ad una riga o permettere una selezione multipla. Una selection list mostra la riga selezionata tramite un segno di spunta.


tv_option_list

Il secondo stile principale con cui si puo’ configurare una Table View è definito tramite dei raggruppamenti in sezioni visivamente distinte. Un esempio pratico dell’uso di questo stile puo’ essere rappresentato dall’applicazione nativa contatti, dove le informazioni di un contatto sono divise, anche se appartenenti allo stesso elemento, in numeri di telefono, indirizzi e-mail, indirizzi vari ecc.


tv_grouped_style

Gli header e footer delle sezioni nelle Table View raggruppate hanno posizioni e dimensioni come indicato nella prossima figura:


header_footer

Stili standard per le Table View Cell

Oltre ai due principali stili con cui si possono creare le Table View, esistono 4 tipi standard che definiscono il tipo di cella. Questi differenziano tra loro dalla presenza o meno di un sottotitolo e l’eventuale sua posizione. A livello di programmazione vengono definiti tramite le seguenti costanti:

  • UITableViewCellStyleDefault
  • UITableViewCellStyleValue1
  • UITableViewCellStyleValue2
  • UITableViewCellStyleSubtitle

Le seguenti immagini chiariranno facilmente le differenze tra queste tipologie di Table View Cell.

UITableViewCellStyleDefault - Non vi è alcun sottotitolo

UITableViewCellStyleDefault

Nel caso della UITableViewCellStyleDefault non vi è alcun sottotitolo.

UITableViewCellStyleSubtitle - qui abbiamo un sottotitolo subito sotto l'elemento

UITableViewCellStyleSubtitle

Usate UITableViewCellStyleSubtitle quando volete un sottotitolo subito sotto l’elemento.

tvcellstyle_value1 - I sottotitoli sono posizionati alla destra degli elementi

UITableViewCellStyleValue1

Nel caso di UITableViewCellStyleValue1 i sottotitoli sono posizionati alla destra degli elementi.

tvcellstyle_value2 - Sottotitoli alla sinistra dell'elemento, come l'elenco contatti

UITableViewCellStyleValue2

Infine, nel caso di UITableViewCellStyleValue2, i sottotitoli vengono sempre posizionati alla destra dell’elemento, ma secondo una diversa impostazione grafica.

Share this story:
  • tweet

Tags: Preparativiteoriauitableview

Recent Posts

  • Parte il percorso programmatori iOS in Swift su devACADEMY.it

    20 Dicembre 2017 - 0 Comment
  • Android, crittografare dati velocemente con Encryption

    24 Settembre 2018 - 0 Comment
  • Sql2o, accesso immediato ai database tramite Java

    3 Settembre 2018 - 0 Comment
  • Okio, libreria per ottimizzare l’input/output in Java

    27 Agosto 2018 - 0 Comment

Related Posts

  • 10. Objective-C: UITableView (parte 2)

    23 Gennaio 2012 - 3 Comments
  • 9. Objective-C: UITableView (parte 1)

    20 Dicembre 2011 - 4 Comments
  • T#090 – Implementiamo il “Pull down to refresh” nelle nostre tabelle!

    21 Marzo 2011 - 28 Comments

Author Description

3 Responses to “L#005 – Table Views”

  1. 6 Gennaio 2010

    T#020 – Creiamo Table View raggruppate e divise in sezioni | devAPP

    […] ad oggi abbiamo parlato e illustrato solo teoricamente cosa sono e come si possono personalizzare le Table View, strumenti utili e […]

  2. 29 Gennaio 2010

    Luca

    A me piace la UITableWiewCellStyleSubtitle 🙂

  3. 12 Luglio 2011

    MaveDev

    Grazie per l’interessante articolo, voto anche io per la “UITableWiewCellStyleSubtitle” 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *


*
*

Corso online di programmazione android e java

SEZIONI

  • Android
  • Comunicazioni
  • Contest
  • Corsi ed Eventi
  • Corso completo di C
  • Corso programmazione videogiochi
  • Framework
  • Grafica e Design
  • Guida rapida alla programmazione Cocoa Touch
  • Guide Teoriche
  • Guide varie
  • iPad
  • Le nostre applicazioni
  • Libri e manuali
  • Materiale OpenSource
  • News
  • Pillole di C++
  • Progetti completi
  • Risorse utili
  • Strumenti di Sviluppo
  • Swift
  • Tips & Tricks
  • Tutorial Pratici
  • Video Tutorial
  • Windows Phone

Siti Amici

  • Adrirobot
  • Allmobileworld
  • Apple Notizie
  • Apple Tribù
  • Avvocato360
  • Blog informatico 360°
  • bubi devs
  • fotogriPhone
  • GiovaTech
  • iApp-Mac
  • iOS Developer Program
  • iPodMania
  • MelaRumors
  • Meritocracy
  • SoloTablet
  • TecnoUser
  • Privacy & Cookie Policy
©2009-2018 devAPP - All Rights Reserved | Contattaci
devAPP.it è un progetto di DEVAPP S.R.L. - Web & Mobile Agency di Torino
Str. Volpiano, 54 - 10040 Leini (TO) - C.F. e P.IVA 11263180017 - REA TO1199665 - Cap. Soc. € 10.000,00 i.v.

devACADEMY.it

Vuoi imparare a programmare?

Iscriviti e accedi a TUTTI i corsi con un’unica iscrizione.
Oltre 70 corsi e migliaia di videolezioni online e in italiano a tua disposizione.

ISCRIVITI SUBITO