Interface gráfica (UI - User Interface). Vistas (Views). Atributos básicos.

Introducción

• A Interface de Usuario (UI) é calquera obxecto que o usuario pode ver e interactuar con el.
• Unha Vista (View) é un obxecto que debuxa algo na pantalla (botón, etiqueta, radio, casilla de verificación, etc). O usuario pode interactuar con ese obxecto.
• Un ViewGroup é unha vista especial invisible que pode conter Vistas e outros ViewGroups. Serve para organizar a posición das Vistas/ViewGroups na pantalla.

• Tanto as vistas como os ViewGroups poden ser creados como obxectos en Java ou facendo uso dos ficheiros XML.

• Exemplo dun ficheiro XML.

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3               android:layout_width="fill_parent" 
 4               android:layout_height="fill_parent"
 5               android:orientation="vertical" >
 6     <TextView android:id="@+id/text"
 7               android:layout_width="wrap_content"
 8               android:layout_height="wrap_content"
 9               android:text="I am a TextView" />
10     <Button android:id="@+id/button"
11             android:layout_width="wrap_content"
12             android:layout_height="wrap_content"
13             android:text="I am a Button"/> 
14 />
15 </LinearLayout>

• Nas liñas marcadas temos o comezo de definición de cada un dos elementos que compoñen a pantalla.
• <LinearLayout>, <TextView> e <Button> son Views (Vistas) que definen ese tipo de obxectos visuais.
• Para cada <elemento> dun ficheiro XML temos a unha clase Java asociada que permite manipular ese elemento ou crear un novo en tempo de execución.
  • O elemento <TextView> de XML ten asociada a clase Java TextView. Un TextView equivale a unha etiqueta (label) noutras linguaxes de programación.
  • O elemento <LinearLayout> XML crea o ViewGroup en Java LinearLayout. Un LinearLayout é unha extensión dun ViewGroup.

• En Java crearíase un obxecto TextView da seguinte maneira:

 1 public void onCreate(Bundle savedInstanceState) {
 2        super.onCreate(savedInstanceState);
 3 
 4        // Create the text view
 5       TextView textView = new TextView(this);
 6       textView.setTextSize(40);
 7       textView.setText(“Hello”);
 8 
 9       // Set the text view as the activity layout
10       setContentView(textView);
11 }

• As vantaxes de usar XML:
  • Permite separar as capas de presentación (UI) da de programación.
  • As modificacións da UI poden ser realizadas sen tocar o código Java

• Como xa se viu no apartado anterior:
  • Os ficheiros XML decláranse dentro de /res
  • Os recursos, neste caso XML, son accedidos dende o código fonte Java a través da clase Java R.

Por exemplo, este é o código que xera o Android Studio cando creamos unha nova activity cun layout asociado:

1     @Override
2     protected void onCreate(Bundle savedInstanceState) {
3         super.onCreate(savedInstanceState);
4         setContentView(R.layout.activity_ud02_01__a2_activities);
5     }

• Referencias:
  • Interface gráfica: http://developer.android.com/guide/topics/ui/overview.html
  • Un bo deseño: http://developer.android.com/design/get-started/principles.html
  • Vistas:http://developer.android.com/reference/android/view/View.html

Atributos dos elementos visuais

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3               android:layout_width="fill_parent" 
 4               android:layout_height="fill_parent"
 5               android:orientation="vertical" >
 6     <TextView android:id="@+id/my_text"
 7               android:layout_width="wrap_content"
 8               android:layout_height="wrap_content"
 9               android:text="I am a TextView" />
10     <Button android:id="@+id/my_button"
11             android:layout_width="wrap_content"
12             android:layout_height="wrap_content"
13             android:text="I am a Button"/> 
14 />
15 </LinearLayout>

• xmlns: indica cal vai ser o espacio de nomes usado para definir os atributos xml: http://es.wikipedia.org/wiki/Espacio_de_nombres_XML

• ID: os elementos poden ter asignado un número enteiro, que é creado en compilación (Clase Java R). Por ese ID é polo que se accede tanto en Java como noutras referencias en XML a ese elemento.
• android:id. ID do elemento ou control. Fórmase da seguinte maneira "@+id/cadea de texto:
  • @: indica que o que vén a continuación é un recurso.
  • +: indica que o ID non existe e que o cree (lembrar na clase Java R)
  • tipo recurso: neste caso id, pero podería ser: string, drawable, layout, etc, como xa vimos no apartado anterior.
  • cadea de texto: é o nome que se dá ao identificador.
  • Exemplo: android:id="@+id/my_button"
  • Para facer referencia a ese recurso dende calquera outro recurso é sen o "+": android:id="@id/my_button".

• android:text. Texto do elemento. Pódese especificar:
  • directamente: android:text="I am a Button"
  • a través dun recurso: android:text="@string/button_text". Neste caso button_text estará definido noutro ficheiro XML, por exemplo strings.xml.

• android:layout_height e android:layout_width. Especifican as dimensións do elemento con respecto ao Layout que as contén ou ao contido do elemento. Pode tomar os seguintes valores:
  • valor fixo: en dp
  • "match_parent": o alto ou ancho do elemento axustarase ao alto ou ancho do elemento que o contén.
  • "wrap_content": o alto ou ancho do elemento axustarase ao alto ou ancho do contido do mesmo elemento.

• Hai máis atributos comúns aos elementos visuais. Imos a continuación amosar máis con exemplos.

Exemplos de atributos dos elementos visuais

Deseño pantalla en modo gráfico

• Partimos que xa temos creado o proxecto inicial como xa indicamos anteriormente.

• Comezaremos creando un novo paquete de nome: UI.

Dentro deste paquete crear unha nova activity de nome: UD02_01_Atributos_Basicos

• Nesta ocasión vaise usar inicialmente un Layout chamado ConstraintLayout para dispor os elementos visuais dentro da pantalla, logo cambiaremos a un layout chamado LinearLayout. Os Layouts veranse no seguinte apartado.

• Deseño pantalla en modo gráfico
• 

  Creamos o paquete e a activity.

• 

  Imos a ficheiro xml que define a pantalla, dentro de "/res/layout". Preséntase nunha pantalla que simula un dispositivo. Podemos pasar a modo gráfico ou editor de texto premendo nas lapelas inferiores.

• 

  A cal podemos manipular, por exemplo para poñer en apaisado.

• 

  Podemos ver o ficheiro como se describe a pantalla a través de elementos/controis XML.

• 

  Podemos definir a pantalla de modo gráfico ou en xml. En calquera caso o realizado nun dos casos ten a súa correspondente tradución ao outro. Por exemplo se se arrastra un botón en modo gráfico á pantalla e o situamos onde desexamos ..

• O ficheiro xml quedaría como segue: As liñas correspondentes ao botón son as que está marcadas:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:tools="http://schemas.android.com/tools"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     tools:context=".UI.UD02_01_Atributos_Basicos">
 8 
 9     <Button
10         android:id="@+id/button4"
11         android:layout_width="wrap_content"
12         android:layout_height="wrap_content"
13         android:text="Button"
14         tools:layout_editor_absoluteX="106dp"
15         tools:layout_editor_absoluteY="113dp" />
16 </android.support.constraint.ConstraintLayout>

• Observar como se indica, neste caso, a posición exacta do botón: "layout_editor_absoluteX" e "layout_editor_absoluteY"

Como veremos posteriormente cada layout terá uns parámetros específicos.

Deseño pantalla en xml

• Deseño Layout lineal
• 

  Borramos o botón engadido e engadimos un texto se non o trae xa por defecto. Cambiamos o tipo de layout. Para iso prememos o botón dereito do rato sobre o 'ConstraintLayout' e escollemos a opción Convert View.

• 

  Para facer un deseño sinxelo imos cambiar o tipo de layout a Lineal (Estes estudaranse máis adiante). Engadiremos novamente o botón.

• 

  Veremos máis adiante que este tipo de layout ten dúas orientacións posibles. Cambiaremos por Vertical.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".UI.UD02_01_Atributos_Basicos">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Ola Mundo" />

</LinearLayout>

• Observar como se cambian as liñas marcadas. No caso da liña 5 indicamos ao layout lineal que os elementos que conteña os dispoña en modo vertical, un a continuación do outro.

• Deseño pantalla en xml
• 

  Comezamos a crear un elemento visual e se prememos CTRL+barra espaciadora o IDE ofrece os posibles elementos que comezan por ese nome.

• 

  Neste caso imos crear un <TextView>, unha etiqueta. Os posibles elementos a crear veranse nun apartado posterior.

• 

  Comezamos indicando o ancho... Tecleamos android:CTRL+barra espaciadora, ou simplemente prememos CTRL+barra espaciadora e ofrécenos os posibles atributos. Cantas máis letras escribamos nós do atributo máis se afina a busca. Neste caso seleccionamos android:layout_width
  Tamén podemos escribir as letras dun atributo (sen android:) e premer CTRL+barra espaciadora e xa nos ofrece os atributos que coinciden co escrito.

• 

  Se dentro das "" hai xa posibles valores predefinidos para ese atributo ímolo saber premendo CTRL+barra espaciadora. Neste caso escollemos que o tamaño da etiqueta se adapte ao seu contido (wrap_content, envolver o contido).

• 

  Definimos o alto (android:layout_height) do elemento, así como o seu contido android:text.

• 

  Cando salvemos os cambios, vai aparecer unha advertencia que nos indica que é mellor que o contido de texto estea definido a través dun recurso @string e non directamente.
  Isto é, o que hai que facer sempre, porque así permite a internacionalización da aplicación e o reuso de recursos, pero en exemplos sucesivos non se vai facer, porque así o contido pode axudarnos a entender que fai o elemento sen ter que ir mirar outro recurso para ver cal é o seu valor.

• 

  A pantalla gráfica amosa o novo elemento creado dende xml.

• A continuación o código xml asociado ao layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".UI.UD02_01_Atributos_Basicos">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Ola Mundo" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="O meu primeiro texto"/>
</LinearLayout>

Atributos de estilo, cor, tamaño, ...

• A continuación vanse amosar outros atributos comúns á maioría dos distintos elementos visuais.

• Deseño pantalla: cor, tamaño e estilo en xml
• 

  O atributo textStyle para negriña, cursiva ou normal.

• 

  O atributo textColor en formato RGB (Ver ao final as referencias). O tamaño (textSize) do texto en sp. Tamén se deixa unha marxe á esquerda do layout layout_marginLeft de 20 sp, que é o mesmo que 20 dp.

• 

  O resultado anterior en modo gráfico.

• A continuación engadir 2 <TextView>s máis: Os que están marcados.

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical">
 6 
 7     <TextView
 8         android:id="@+id/textView1"
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:text="@string/hello_world" />
12     
13     <TextView 
14         android:layout_width="wrap_content"
15         android:layout_height="wrap_content"
16         android:textColor="#F00"
17         android:layout_marginLeft="20sp"
18         android:textStyle="bold"
19         android:textSize="22sp"
20         android:text="O meu primeiro texto"/> 
21 
22     <TextView 
23         android:layout_width="wrap_content"
24         android:layout_height="wrap_content"
25         android:background="#000"
26         android:textColor="#FFF"
27         android:textStyle="bold|italic"
28         android:typeface="serif"
29         android:text="Negriña, cursiva e serif"/> 
30     
31     <TextView 
32         android:layout_width="match_parent"
33         android:layout_height="wrap_content"
34         android:background="#00F"
35         android:textColor="#FFF"
36         android:text="Ocupando o ancho do pai"/> 
37         
38 </LinearLayout>

• A pantalla amosa eses dous novos elementos. Observar o valor de layout_width="match_parent" do último elemento, como fai que a etiqueta ocupe todo o ancho do elemento pai (o LinearLayout).

• O seguinte código engade un último elemento:

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical">
 6 
 7     <TextView
 8         android:id="@+id/textView1"
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:text="@string/hello_world" />    
12        
13     <TextView 
14         android:layout_width="wrap_content"
15         android:layout_height="wrap_content"
16         android:textColor="#F00"
17         android:layout_marginLeft="20sp"
18         android:textStyle="bold"
19         android:textSize="22sp"
20         android:text="O meu primeiro texto"/> 
21 
22     <TextView 
23         android:layout_width="wrap_content"
24         android:layout_height="wrap_content"
25         android:background="#000"
26         android:textColor="#FFF"
27         android:textStyle="bold|italic"
28         android:typeface="serif"
29         android:text="Negriña, cursiva e serif"/> 
30     
31     <TextView 
32         android:layout_width="match_parent"
33         android:layout_height="wrap_content"
34         android:background="#00F"
35         android:textColor="#FFF"
36         android:textStyle="bold"
37         android:text="Ocupando o ancho do pai"/> 
38         
39     <TextView 
40         android:layout_width="wrap_content"
41         android:layout_height="match_parent"
42         android:background="#F00"
43         android:textColor="#FFF"
44         android:textStyle="bold"
45         android:text="Ocupando o resto do alto do pai  "/> 
46     
47 </LinearLayout>

• A imaxe amosa o resultado. Neste caso prestar atención ao atributo android:layout_height="match_parent". Observar como o último elemento ocupa o que resta do alto do pai (o LinearLayout)

• Finalmente imos introducir 2 atributos relacionados co peso:
  • android:gravity, que serve para situar o contido do elemento dentro deste. Por exemplo, centrar o texto dentro dun TextView.
  • android:layout_gravity, que serve para situar un elemento dentro dun contedor. Por exemplo, aliñar á dereita dun Layout un TextView enteiro.

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical">
 6 
 7     <TextView
 8         android:id="@+id/textView1"
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:text="@string/hello_world" />
12     
13     <TextView 
14         android:layout_width="wrap_content"
15         android:layout_height="wrap_content"
16         android:textColor="#F00"
17         android:layout_marginLeft="20sp"
18         android:textStyle="bold"
19         android:textSize="22sp"
20         android:text="O meu primeiro texto"/> 
21 
22     <TextView 
23         android:layout_width="wrap_content"
24         android:layout_height="wrap_content"
25         android:background="#000"
26         android:textColor="#FFF"
27         android:textStyle="bold|italic"
28         android:typeface="serif"
29         android:text="Negriña, cursiva e serif"/> 
30     
31     <TextView 
32         android:layout_width="match_parent"
33         android:layout_height="wrap_content"
34         android:gravity="right"
35         android:background="#00F"
36         android:textColor="#FFF"
37         android:textStyle="bold"
38         android:text="Ocupando o ancho do pai"/> 
39         
40     <TextView 
41         android:layout_width="wrap_content"
42         android:layout_height="match_parent"
43         android:layout_gravity="right"
44         android:background="#F00"
45         android:textColor="#FFF"
46         android:textStyle="bold"
47         android:text="Ocupando o resto do alto do pai  "/>    
48         
49 </LinearLayout>

• Observar a diferenza entre as liñas 34 e 43:
  • Liña 34: O texto sitúase á dereita dentro do TextView, non é o TextView que sofre algún desprazamento.
  • Liña 43: É o TextView enteiro quen se sitúa á dereita dentro do layout que o contén.

• Referencias:
  • Tipografías: http://developer.android.com/design/style/typography.html
  • Cores: http://developer.android.com/guide/topics/resources/more-resources.html#Color

Enlace a la página principal de la UD2

Enlace a la página principal del curso

-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (2015).