IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Interfície d'usuari

Els sistemes Android proporcionen les eines ( framework ) per a construir les teves aplicacions.

Les aplicacions que puguis fer formen part de l'experiència d'utilitzar Android. En el moment de programar-les, es te que intentar seguir unes costums per a fer les UI ( Interfícies d'Usuari ) comunes.

Pantalles d'Android

Pantalles d'Android

L'interfície d'Android disposa de varies pantalles per a realitzar diferents tasques.

Home screen

Es la pantalla d'inici, és un espai personalitzable que permet afegir dreceres cap a aplicacions o navegar entre diferents pantalles d'inici com un multiescriptori.

A la part inferior, es mostren les dreceres més importants. En les dreceres més importants, es troba la drecera per accedir a la vista que mostra totes les aplicacions que te el mòbil .


All apps screen

Permet cercar aplicacions entre totes les aplicacions instal·lades al mòbil.

Les aplicacions es poden arrossegar fins a la pantalla d'inici per a crear dreceres.

Recents screen

Permet canviar entre les aplicacions usades recentment. Les aplicacions estan ordenares cronològicament, apareixent al davant de tot la utilitzada més recentment.

Barres de sistema

Són zones de la pantalla dedicades a mostrar informació com notificacions, l'estat de dispositius ...

Algunes aplicacions poden posar-se en pantalla completa per a mostrar imatges o vídeos en una resolució més gran.

Barra d'estat

Mostra les notificacions i informació com l'estat de la bateria, la força de la senyal o altres.

Barra de navegació

Nou a partir de la versió 4.0 d'Android, està present en els dispositius que no tenen tecles físiques.

Permeten anar a la pantalla d'inici, tornar enrere o veure les aplicacions recents.

Barra combinada

En les tablets, aquesta les dues barres anteriors s'uneixen en una de sola degut a que es disposa de més espai.

Notificacions

Són missatges breus que els usuaris hi poden accedir des de la barra d'estat.

Mostra actualitzacions d'aplicacions o informació important d'aquestes.

Interfície d'usuari comuna d'una APP

Interfície d'usuari comuna d'una APP

Una aplicació típica d'Android consta del següent conjunt d'elements.

1 - Barra d'acció principal

Conté les accions més importants de l'aplicació.

2 - Control de vista

Permet a l'usuari canviar de vista dins de l'aplicació.

3 - Àrea de contingut

La zona on es mostra el contingut de la teva aplicació.

4 - Barra d'accions partida

Permet distribuir en una barra varies accions que no caben en la barra principal.

LayOut

El Layout és la part de disseny gràfic que s'ocupa en el tractament i disposició dels elements d'estil (contingut) d'una pàgina.

Input Controls ( Controladors d'entrada )

Els controls d'entrada són els components interactius de la interfície d'usuari de la seva aplicació. Android ofereix una gran varietat de controls que es poden utilitzar en la interfície d'usuari, com ara botons, camps de text, barres de recerca, caselles de verificació, botons de zoom i botons d'alternar i molts més.

Addició d'un control d'entrada a la interfície d'usuari és tan simple com afegir un element XML a la seva disposició XML. Per exemple, aquí està un disseny amb un camp de text i un botó:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal">
    <EditText android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
    <Button android:id="@+id/button_send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send"
        android:onClick="sendMessage" />
</LinearLayout>

Button

Un botó consta de text o una icona (o ambdós text i una icona) que comunica quina acció es produeix quan l'usuari ho toca.

Depenent de si desitja un botó amb el text, una icona o ambdós, pot crear el botó en el disseny de tres maneres:

  • Amb el text, utilitzant la classe Button:
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_text"
    ... />
  • Amb una icona, utilitzant la classe ImageButton:
<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/button_icon"
    ... />
  • Amb text i una icona, utilitzant la classe Button amb el android: atribut drawableLeft:
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_text"
    android:drawableLeft="@drawable/button_icon"
    ... />

Text Field

Un camp de text permet a l'usuari escriure text en la seva aplicació. Pot ser una sola línia o de diverses línies. Si seleccioneu un camp de text col · loca el cursor i mostra automàticament el teclat. A més d'escriure, camps de text permet una gran varietat d'altres activitats, com ara la selecció de text (tallar, copiar, enganxar) i dades de look-up a través d'autorealització.

Vostè pot afegir un camp de text per a la disposició per tal EditText. En general, han de fer pel seu disseny de XML amb un element <EditText>.

CheckBox

Les caselles de verificació permeten a l'usuari seleccionar una o més opcions d'un conjunt. En general, vostè ha de presentar cada opció casella de verificació en una llista vertical.

Per crear cada opció de casella de verificació, crear un checkbox en el seu disseny. Com que un conjunt d'opcions de casella de verificació permet a l'usuari seleccionar diversos elements, cada casella es gestionen per separat i ha de registrar un oient de clics de cada un.

Radio button

Els botons de ràdio permeten a l'usuari seleccionar una opció d'un conjunt. Vostè ha d'usar els botons de ràdio per als conjunts opcionals que són mútuament excloents si vostè pensa que l'usuari necessita per veure totes les opcions disponibles de costat a costat. Si no és necessari per a mostrar totes les opcions de banda a banda, utilitzar una ruleta al seu lloc.

Per crear cada botó d'opció, creï un RadioButton en el seu disseny. No obstant això, ja que els botons de ràdio són mútuament excloents, cal agrupar junts dins d'una RadioGroup. Per agrupació d'aquests, el sistema garanteix que només un botó de ràdio es pot seleccionar al mateix temps.

Toggle Button

Un botó de selecció permet a l'usuari canviar la configuració entre dos estats.

Podeu afegir un botó d'activació de base per al disseny amb l'objecte ToggleButton. Android 4.0 (API de nivell 14) introdueix un altre tipus de botó d'alternança anomenat un interruptor que proporciona un control lliscant, que es pot afegir a un objecte Switch.

El ToggleButton i controls de l'interruptor són subclasses de CompoundButton i la funció de la mateixa manera, pel que pot posar en pràctica el seu comportament de la mateixa manera.

Spinner

Els Spinners proporcionen una forma ràpida de seleccionar un valor d'un conjunt. A l'estat per defecte, una ruleta mostra el seu valor actualment seleccionat. Tocar el control de gir es mostra un menú desplegable amb tots els altres valors disponibles, des de la qual l'usuari pot seleccionar una nova.

Vostè pot afegir un controlador per al disseny per tal Spinner. En general, han de fer pel seu disseny de XML amb un element <Spinner>. Per exemple:

<Spinner
    android:id="@+id/planets_spinner"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />

Per omplir el Spinner amb una llista d'opcions, llavors vostè necessitat d'especificar un SpinnerAdapter en la seva activitat o el codi font Fragment.

Pickers

Android proporciona controls perquè l'usuari triï un moment o triar una data tan llest per utilitzar diàlegs. Cada selector proporciona controls per a la selecció de cada part de l'hora (hora, minuts, AM / PM) o data (dia, mes, any). L'ús d'aquests recol·lectors ajuda a garantir que els usuaris puguin triar l'hora o la data que sigui vàlida, amb el format correcte i ajustat a la configuració regional de l'usuari.

Es recomana usar DialogFragment per acollir cada vegada o selector de la data. El DialogFragment gestiona el cicle de vida del diàleg per a vostè i li permet visualitzar els recol·lectors a les configuracions de disseny diferents, com en un diàleg bàsic en els telèfons o com una part integrada de la distribució en pantalles de grans dimensions.

Tot i aixo el DialogFragment es va afegir a la plataforma Android 3.0 (API de nivell 11), si la seva aplicació admet les versions d'Android anteriors a 3.0-fins i tot tan baix com Android 1.6, pot utilitzar la classe DialogFragment que està disponible a la biblioteca de suport per a la compatibilitat amb versions anteriors .

IMPORTANT: Els exemples de codi següents mostren com crear quadres de diàleg per a un selector horari i el selector de la data utilitzant les APIde biblioteca de suport per DialogFragment. Si minSdkVersion de la seva aplicació és de 11 o superior, en el seu lloc pot utilitzar la versió de la plataforma de DialogFragment.

Input Events ( Esdeveniments d'entrada )

En Android, hi ha més d'una manera d'interceptar els esdeveniments de la interacció de l'usuari amb l'aplicació. En considerar els esdeveniments dins de la interfície d'usuari, l'enfocament és capturar els esdeveniments de l'objecte View específic que l'usuari interactua. La classe View proporciona els mitjans per fer-ho.

Dins de les classes de vista diferents que podràs utilitzar per compondre el disseny, pot observar diversos mètodes de devolució de trucada públiques que busquen útil per a esdeveniments d'interfície d'usuari. Aquests mètodes són anomenats pel marc d'Android quan l'acció respectiva en aquest objecte. Per exemple, quan una vista (com un botó) es toca, el mètode onTouchEvent() és anomenat en aquest objecte. No obstant això, per tal d'interceptar això, ha d'estendre la classe i reemplaçar el mètode. No obstant això, s'estén cada objecte View per manejar aquest tipus d'esdeveniment no seria pràctic. Aquesta és la raó per la classe View també conté una col · lecció d'interfícies niades amb devolucions de trucada que es pot definir amb molta més facilitat. Aquestes interfícies, anomenats detectors d'esdeveniments, són la seva butlleta a la captura de la interacció de l'usuari amb la interfície d'usuari.

Com més se solen utilitzar els detectors d'esdeveniments per escoltar la interacció de l'usuari, pot arribar un moment en què es vol ampliar una classe View, amb la finalitat de construir un component personalitzat. Potser vostè vol estendre la classe Button de fer alguna cosa més elegant. En aquest cas, vostè serà capaç de definir els comportaments d'esdeveniments per defecte de la classe utilitzant els controladors d'esdeveniments de la classe.

Event Listeners ( Escoltadors d'esdeveniments )

Primer tenim que registrar els esdeveniments que vols escoltar. Definirem "Listeners" ( escoltadors ).

onClick()

El definim sobre l'element, es a dir, en que fem clic.

onLongClick()

El definim sobre l'element, es a dir, en que fem clic, però esperem una durada més llarga.

onFocusChange()

Indica sobre la zona que cliquem.

onKey()

Indica que s'ha premut una tecla concreta.

onTouch()

Indica que s'està tocant soltant, etc ... un botó.

onCreateContextMenu()

Quan s'està creant un menú contextual. Veure menú contextual

Event Handlers ( Manejadors d'esdeveniments )

Definim l'acció a realitzar quan s'enregistra un esdeveniment.

onKeyDown(int, KeyEvent)

Implementació defecte de KeyEvent.Callback.onKeyDown(): realitzar de premsa de la vista quan KEYCODE_DPAD_CENTER o KEYCODE_ENTER s'allibera, si la vista està habilitada i pot fer clic.

En prémer les tecles en els teclats de programari generalment no desencadena aquest oient, encara que alguns poden optar per fer-ho en algunes situacions. No confiï en ell per agafar premses de programari clau.

Paràmetres

keyCode   un codi clau que representa el botó pressionat, desde KeyEvent.
event   L'objecte d'esdeveniment KeyEvent que defineix l'acció del botó.

Devolucions

Si es controla l'esdeveniment, tornarà true. Per permetre que l'esdeveniment sigui manejat pel receptor següent, retorna fals.

onKeyUp(int, KeyEvent)

Implementació defecte de KeyEvent.Callback.onKeyUp(): realitzar fent clic de la vista quan KEYCODE_DPAD_CENTER o KEYCODE_ENTER s'allibera.

En prémer les tecles en els teclats de programari generalment no desencadena aquest oient, encara que alguns poden optar per fer-ho en algunes situacions. No confiï en ell per agafar premses de programari clau.

Paràmetres

keyCode    un codi clau que representa el botó pressionat, des KeyEvent.
event   L'objecte d'esdeveniment KeyEvent que defineix l'acció del botó.

Devolucions

Si es controla l'esdeveniment, tornarà true. Per permetre que l'esdeveniment sigui manejat pel receptor següent, retorna fals.

onTrackballEvent(MotionEvent)

Implementeu aquest mètode per controlar els esdeveniments trackball moviment. El moviment relatiu de la roda de desplaçament des de l'últim esdeveniment es pot recuperar amb MotionEvent.getX() i MotionEvent.getY(). Aquests es normalitzen de manera que un moviment d'1 correspon a la pulsació d'una tecla DPAD (el que sovint seran valors fraccionals, que representen la informació de moviment de gra més fi disponible d'una roda de desplaçament).

Paràmetres

event esdeveniment de moviment.

Devolucions

Cert si es va controlar l'esdeveniment, fals en cas contrari.

onTouchEvent(MotionEvent)

Implementeu aquest mètode per gestionar esdeveniments de moviment toc de pantalla.

Paràmetres

event esdeveniment de moviment.

Devolucions

Cert si es va controlar l'esdeveniment, fals en cas contrari.

onFocusChanged(boolean, int, Rect)

Anomenat pel sistema de visió quan l'estat del focus d'aquesta vista canvia. Quan l'esdeveniment de canvi d'enfocament és causada per la navegació direccional, direcció i previouslyFocusedRect donar una idea d'on el focus està venint. En reemplaçar, assegureu-vos de cridar a través de la superclasse perquè el maneig enfocament estàndard produirà.

Paràmetres

gainFocus    True si la vista té el focus, false en cas contrari.
Direction    L'enfocament de la direcció s'ha mogut en direcció requestFocus() és cridat per donar aquest enfocament vista. Els valors 
són FOCUS_UP, FOCUS_DOWN, FOCUS_LEFT, FOCUS_RIGHT,  FOCUS_FORWARD o FOCUS_BACKWARD. Potser no sempre s'apliquen, en aquest cas també teniu 
l'opció per  defecte.
previouslyFocusedRect    El rectangle, en el sistema de coordenades d'aquest punt de vista, el de la vista enfocat anteriorment. 
Si escau, aquest s'usa per a informació de gra més fi sobre on el focus està venint de (a més de la direcció). 
És nul el contrari.

Activity.dispatchTouchEvent(MotionEvent)

ViewGroup.onInterceptTouchEvent(MotionEvent)

ViewParent.requestDisallowInterceptTouchEvent(boolean)

Veure més

UI Overview