lunedì 30 giugno 2014

Standardizzati di navigazione Principi per lo Sviluppo App Android

Navigazione nei dispositivi mobili è una considerazione importante. Se un utente non è in grado di navigare un'applicazione, potrebbe abbandonare rapidamente.Imparare i principi di navigazione di Android per evitare che ciò accada a voi.
Le applicazioni mobili hanno un numero di schermi (attività e frammenti) ad essi associati. Navigazione attraverso questi è un meccanismo importante. Ci sono un certo numero di modi per fornire navigazione standardizzato Android. Questo articolo esamineremo tre meccanismi per fornire navigazione:
  1. Menu: I menu forniscono un componente comune interfaccia utente per un'applicazione.Utilizzando le API menu a presentare azioni, e anche altre opzioni all'interno di un'applicazione.
  2. Navigazione cassetto: Il cassetto di navigazione è un pannello mostrato dal lato del display; esso fornisce all'utente navigazione principale dell'applicazione.
  3. Azione da bar: Il bar azione prevede un meccanismo di navigazione familiare per l'utente attraverso la parte superiore dello schermo tramite un'icona app, elementi di azione e troppo pieno di azione.
Menu
Android ha diversi tipi di menù, tra cui:
  • Menu Opzioni: Il set principale di articoli per un'attività. Qui è dove un utente può eseguire azioni come Compose E-mail, impostazioni utente, o, nel caso di applicazione di esempio presentato in questo articolo, che animale domestico che si desidera caricare.
  • Context Menu: Consente un menu da creare che è associato con vista.
Per creare un menu di opzioni, è necessario creare due metodi di codice: onCreateOptionsMenu e onOptionsItemSelected. Il metodo onCreateOptionsMenu crea un menu. Nel codice di esempio nel Listato 1 , il menu viene caricato da un file XML di risorse.. Ci sono altri metodi per creare i menu di programmazione tramite il metodo Menu.Add. Il onCreateOptionsMenu è chiamato in diversi modi:
  • In Android 2.3 e precedenti, onCreateOptionsMenu viene chiamato quando un utente tocca il tasto Menu fisica su un dispositivo.
  • In Android 3.0 e versioni successive, onCreateOptionsMenu viene chiamato quando un utente tocca il tasto funzione nella barra delle azioni.
Il metodo onOptionsItemSelected viene chiamato quando un utente seleziona una voce di menu. Nel Listato 1 , un'istruzione commutatore di base è utilizzato per determinare il punto di menu selezionato.

Listato 1: Il metodo onCreateOptionsMenu 
public override bool onCreateOptionsMenu (menu iMenu)
{
  MenuInflater gonfiatore = this.MenuInflater;
  inflater.Inflate (Resource.Menu.examplemenu, menu);
  return true;
}
public override bool onOptionsItemSelected (voce IMenuItem)
{
  switch (item.ItemId) {
  caso Resource.Id.catexample:
    Android.Util.Log.Info (this.Application.PackageName, "Gatto Esempio Selected");
    ic.SetImageResource (Resource.Drawable.wells);
    break;
  caso Resource.Id.dogexample:
    Android.Util.Log.Info (this.Application.PackageName, "Dog Esempio Selected");
    ic.SetImageResource (Resource.Drawable.dog);
    break;
  di default:
    break;
  }
  ritorno base.OnOptionsItemSelected (voce);
}
Nel Listato 2 , il codice XML viene caricato dalla directory Resource / Menu.
Listato 2: contenuti per la creazione di un menu con XML 
<? Xml version = "1.0" encoding = "utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <Articolo android: id = "@ + id / dogexample"
        android: title = "@ string / thedog" />
  <Articolo android: id = "@ + id / catexample"
        android: icon = "@ drawable / wellssmall" 
        android: title = "@ string / thecat" />
</ Menu>
I tag e le proprietà in chiave Listato 2 sono:
  • elemento. Un tag <item> definisce una voce in un menu.
  • Android:. id Un androide: proprietà id definisce l'id di una voce di menu. Questa proprietà verrà utilizzato all'interno del codice del software per determinare la voce di menu selezionata.
  • Android:. icona An android: icon proprietà definisce l'immagine / icona utilizzata quando visualizzata la voce di menu. Nel codice di esempio nel Listato 2 , l'immagine viene estratta dalle risorse disegnabili.
  • Android: titolo. An android: title definisce il testo visualizzato quando il menu è attivato.Nel codice di esempio mostrato nel Listato 2 , il testo è tirato dalla risorsa valori; in particolare, dal file string.xml.
La Figura 1 mostra il menu visualizzato in un'applicazione in esecuzione come applicazione Android 2.3. Si noti che il menu viene visualizzato nella parte inferiore, e l'icona viene visualizzata.
[Clicca sull'immagine per ingrandirla.]Figura 1. il menu per una applicazione Android 2.3. Si noti che è visualizzato nella parte inferiore, e l'icona viene visualizzata.
La Figura 2 mostra lo stesso codice eseguito come un'applicazione Android 4.0. Si noti che il menu viene visualizzato dalla parte superiore dell'immagine nella barra delle azioni di Android.
[Clicca sull'immagine per ingrandirla.]Figura 2. Lo stesso codice dalla figura 1, l'esecuzione come applicazione Android 4.0. Notare il menu viene visualizzato dalla parte superiore dell'immagine nella barra delle azioni di Android.
Context Menu
Un menu contestuale consente per le azioni compiute contro una vista. Il processo:
  • La vista deve essere registrato per un menu contestuale. Questo viene fatto tramite una chiamata a RegisterForContextMenu (vista).
  • Eseguire l'override del metodo OnCreateContextMenu in un'attività o frammento.
  • Eseguire l'override del metodo OnContextItemSelected.
Listato 3 mostra la configurazione e l'elaborazione di un menu contestuale in un ImageView.Gli elementi essenziali:
  • La chiamata a RegisterForContextMenu e passando la vista al metodo. Questo registra l'esempio ImageView per le operazioni del menu contestuale.
  • Il OnCreateContextMenu è particolare per una data attività o frammento. A causa di questo, è importante controllare e assicurarsi la vista passato è appropriato per una determinata richiesta menu di scelta rapida.
  • Il OnContextItemSelected è lo stesso del onOptionsItemSelected mostrato in precedenza. Un comando di commutazione viene utilizzata per determinare la voce di menu selezionato.
Listato 3: Installazione e Elaborazione di un menu di scelta rapida 
protected override void OnCreate (bundle Bundle)
{
  base.OnCreate (bundle);
  SetContentView (Resource.Layout.Main);
  ic = findViewById <ImageView> (Resource.Id.iv);
  ic.SetImageResource (Resource.Drawable.wells);
  RegisterForContextMenu (ic);
}

public override void OnCreateContextMenu (menu IContextMenu, View v, IContextMenuContextMenuInfo MenuInfo)
{
  MenuInflater gonfiatore = this.MenuInflater;

  if (v.Id == ic.Id) {
      inflater.Inflate (Resource.Menu.catmenu, menu);
  }
  base.OnCreateContextMenu (menu, v, MenuInfo);
}
public override bool OnContextItemSelected (voce IMenuItem)
{
  switch (item.ItemId) {
    caso Resource.Id.meow:
      Android.Util.Log.Info (this.Application.PackageName, "Meow!");
      break;
    caso Resource.Id.eat:
      Android.Util.Log.Info (this.Application.PackageName, "Mangia");
      break;
    caso Resource.Id.shed:
      Android.Util.Log.Info (this.Application.PackageName, "Proteggersi su tutto");
      break;
    di default:
      break;
  }
  ritorno base.OnContextItemSelected (voce);
}
La Figura 3 mostra l'output di avere il Listing 3 codice come un menu contestuale.
[Clicca sull'immagine per ingrandirla.]Figura 3. L'output del Listato 3, che mostra il menu di scelta rapida.

Navigazione Cassetto
Il cassetto di navigazione è un pannello che passa dal bordo sinistro dello schermo per visualizzare alcune opzioni di navigazione. Con il cassetto di navigazione, l'utente attiva dal strisciando dal bordo sinistro dello schermo o toccare l'icona dell'applicazione nella barra delle azioni. Come il cassetto di navigazione si espande, si sovrappone il contenuto dello schermo ad eccezione della barra di navigazione.
Quando un'applicazione deve utilizzare il cassetto di navigazione? Il cassetto di navigazione è un ottimo strumento quando ci saranno tre o più viste di alto livello.
Nota: Il cassetto di navigazione è disponibile tramite il v4 libreria di supporto Android. Questo articolo si presuppone Android 4 o versione successiva.
La Figura 4 mostra il cassetto navigazione una volta che l'utente ha attivato il cassetto.
[Clicca sull'immagine per ingrandirla.]Figura 4. Il cassetto di navigazione, una volta che l'utente ha attivato esso.
La Figura 5 mostra il risultato di scegliere una tra le voci del cassetto navigazione. In questo caso, l'utente ha selezionato Marte.
[Clicca sull'immagine per ingrandirla.]Figura 5. Frutto di selezione di un elemento nel cassetto di navigazione. In questo caso, l'utente ha selezionato Marte.
Cominciamo guardando il layout utilizzato per memorizzare il display. Ci sono tre widget nel layout in Listato 4 :
  • DrawerLayout: Un layout contenitore che contiene sia il framelayout che contiene il frammento, nonché una listview.
  • FrameLayout: Contiene il contenuto che verrà visualizzato. Il framelayout sarà cambiato programmazione per contenere il frammento contenente il imageview del pianeta.
  • ListView: Contiene gli elementi che saranno navigabili a.
Listato 4: The XML utilizzato per creare il DrawerLayout 
<? Xml version = "1.0" encoding = "utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns: android =
  "Http://schemas.android.com/apk/res/android"
  android: id = "@ + id / drawer_layout"
  Android: layout_width = "match_parent"
  Android: layout_height = "match_parent">
  <FrameLayout
    android: id = "@ + id / content_frame"
    Android: layout_width = "match_parent"
    Android: layout_height = "match_parent" />
  <ListView
    android: id = "@ + id / left_drawer"
    Android: layout_width = "240dp"
    Android: layout_height = "match_parent"
    Android: layout_gravity = "start"
    Android: choiceMode = "singleChoice"
    Android: divider = "@ android: colore / trasparente"
    Android: DividerHeight = "0DP"
    android: background = "# 111" />
</ Android.support.v4.widget.DrawerLayout>

Nessun commento:

Posta un commento