Diferencia entre revisiones de «Interface gráfica (UI - User Interface). Vistas (Views). Atributos básicos.»

De Manuais Informática - IES San Clemente.
Ir a la navegación Ir a la búsqueda
(Deseño pantalla en modo gráfico)
 
(Sin diferencias)

Revisión actual del 10:19 2 oct 2018

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.

00 viewgroup.png

  • 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:onclick="onButtonClick"
14             android:text="I am a Button"/> 
15 />
16 </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.

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:onclick="onButtonClick"
14             android:text="I am a Button"/> 
15 />
16 </LinearLayout>



  • 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

  • Comezaremos creando un novo proxecto: U2_02_ParBasicos.
  • Nesta ocasión vaise usar inicialmente un Layout chamado RelativeLayout para dispor os elementos visuais dentro da pantalla, logo cambiaremos a un layout chamado LinearLayout. Os Layouts veranse no seguinte apartado.
  • O ficheiro xml quedaría como segue: As liñas correspondentes ao botón son as que está marcadas:
 1 <RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
 6     android:paddingLeft="@dimen/activity_horizontal_margin"
 7     android:paddingRight="@dimen/activity_horizontal_margin"
 8     android:paddingTop="@dimen/activity_vertical_margin"
 9     tools:context=".U2_02_ParBasicos" >
10 
11     <TextView
12         android:id="@+id/textView1"
13         android:layout_width="wrap_content"
14         android:layout_height="wrap_content"
15         android:text="@string/hello_world" />
16 
17     <Button
18         android:id="@+id/button1"
19         android:layout_width="wrap_content"
20         android:layout_height="wrap_content"
21         android:layout_below="@id/textView1"
22         android:layout_marginTop="99dp"
23         android:layout_toRightOf="@id/textView1"
24         android:text="Button" />
25 
26 </RelativeLayout>
  • Observar como <TextView> se crea un ID para o elemento que é usado en <Button> para indicar que este elemento horizontalmente comeza á dereita do <TextView>.
  • Observar como se indica, neste caso, a posición vertical: "layout_marginTop"

Deseño pantalla en xml

 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 
 8     <TextView
 9         android:id="@+id/textView1"
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:text="@string/hello_world" />
13 
14 </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.


  • A continuación o código xml asociado ao layout:
 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 
 8     <TextView
 9         android:id="@+id/textView1"
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:text="@string/hello_world" />
13 
14     <TextView 
15         android:layout_width="wrap_content"
16         android:layout_height="wrap_content"
17         android:text="O meu primeiro texto"/>
18 
19 </LinearLayout>

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

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


  • 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).

Android 2013 U2 02 ParBasicos 18.jpg


  • 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)

Android 2013 U2 02 ParBasicos 19.jpg


  • 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>

Android 2013 U2 02 ParBasicos 20.jpg

  • 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.





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