Ver el código de «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.
[[Image: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. 
<syntaxhighlight lang="xml" line highlight="2,6,10">
<?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="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onclick="onButtonClick"
            android:text="I am a Button"/> 
/>
</LinearLayout>
</syntaxhighlight>

*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:
<syntaxhighlight lang="java" line highlight="5-7,10">
public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);

       // Create the text view
      TextView textView = new TextView(this);
      textView.setTextSize(40);
      textView.setText(“Hello”);

      // Set the text view as the activity layout
      setContentView(textView);
}
</syntaxhighlight>


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

*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==

<syntaxhighlight lang="xml" line highlight="2,6,10">
<?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="vertical" >
    <TextView android:id="@+id/my_text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="I am a TextView" />
    <Button android:id="@+id/my_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onclick="onButtonClick"
            android:text="I am a Button"/> 
/>
</LinearLayout>
</syntaxhighlight>


*'''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===
*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.
<gallery caption="Deseño pantalla en modo gráfico" widths="350" heights="300px" perrow="2">
Image:Android_2013_U2_02_ParBasicos_01.jpg| Creamos o proxecto '''U2_02_ParBasicos'''.
Image:Android_2013_U2_02_ParBasicos_02.jpg| Imos a ficheiro xml que define a pantalla, dentro de "/res/layout". Preséntase nunha pantalla que simula un dispositivo.
Image:Android_2013_U2_02_ParBasicos_03.jpg| A cal podemos manipular, por exemplo para poñer en apaisado.
Image:Android_2013_U2_02_ParBasicos_04.jpg| Podemos ver o ficheiro como se describe a pantalla a través de elementos/controis XML.
Image:Android_2013_U2_02_ParBasicos_05.jpg| 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.
Image:Android_2013_U2_02_ParBasicos_06.jpg| E o situamos onde desexamos ..
</gallery>

*O ficheiro xml quedaría como segue: As liñas correspondentes ao botón son as que está marcadas:
<syntaxhighlight lang="xml" line highlight="17-24">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".U2_02_ParBasicos" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView1"
        android:layout_marginTop="99dp"
        android:layout_toRightOf="@id/textView1"
        android:text="Button" />

</RelativeLayout>
</syntaxhighlight>

*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===
<gallery caption="Deseño Layout lineal" widths="350" heights="300px" perrow="2">
Image:Android_2013_U2_02_ParBasicos_07.jpg| Borramos o botón engadido.
Image:Android_2013_U2_02_ParBasicos_08.jpg| para facer un deseño sinxelo imos cambiar o tipo de layout de Relativo a Lineal (Estes estudaranse máis adiante) e borrar as opcións de recheo ('''padding''') do layout
</gallery>

<syntaxhighlight lang="xml" line highlight="1,5,14">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</LinearLayout>
</syntaxhighlight>

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


<gallery caption="Deseño pantalla en xml" widths="350" heights="300px" perrow="2">
Image:Android_2013_U2_02_ParBasicos_08.jpg| Comezamos a crear un elemento visual e se prememos '''CTRL+barra espaciadora''' o IDE ofrece os posibles elementos que comezan por ese nome.
Image:Android_2013_U2_02_ParBasicos_09.jpg| Neste caso imos crear un <TextView>, unha etiqueta. Os posibles elementos a crear veranse nun apartado posterior.
Image:Android_2013_U2_02_ParBasicos_10.jpg| 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'''<br>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.
Image:Android_2013_U2_02_ParBasicos_11.jpg| 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).
Image:Android_2013_U2_02_ParBasicos_12.jpg| Definimos o alto ('''android:layout_height''') do elemento, así como o seu contido '''android:text'''.
Image:Android_2013_U2_02_ParBasicos_13.jpg| 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.<br>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.
Image:Android_2013_U2_02_ParBasicos_14.jpg| A pantalla gráfica amosa o novo elemento creado dende xml.
</gallery>
*A continuación o código xml asociado ao layout:
<syntaxhighlight lang="xml" line highlight="14-17">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

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

</LinearLayout>
</syntaxhighlight>

===Atributos de estilo, cor, tamaño, ...===
*A continuación vanse amosar outros atributos comúns á maioría dos distintos elementos visuais.
<gallery caption="Deseño pantalla: cor, tamaño e estilo en xml" widths="350" heights="300px" perrow="2">
Image:Android_2013_U2_02_ParBasicos_15.jpg| O atributo '''textStyle''' para negriña, cursiva ou normal.
Image:Android_2013_U2_02_ParBasicos_16.jpg| 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. 
Image:Android_2013_U2_02_ParBasicos_17.jpg| O resultado anterior en modo gráfico.
</gallery>


*A continuación engadir 2 <TextView>s máis: Os que están marcados.
<syntaxhighlight lang="xml" line highlight="22-29,31-36">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
    
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#F00"
        android:layout_marginLeft="20sp"
        android:textStyle="bold"
        android:textSize="22sp"
        android:text="O meu primeiro texto"/> 

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#000"
        android:textColor="#FFF"
        android:textStyle="bold|italic"
        android:typeface="serif"
        android:text="Negriña, cursiva e serif"/> 
    
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00F"
        android:textColor="#FFF"
        android:text="Ocupando o ancho do pai"/> 
        
</LinearLayout>
</syntaxhighlight>


*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). 
[[Image:Android_2013_U2_02_ParBasicos_18.jpg|250px]]  



*O seguinte código engade un último elemento:
<syntaxhighlight lang="xml" line highlight="41">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />    
       
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#F00"
        android:layout_marginLeft="20sp"
        android:textStyle="bold"
        android:textSize="22sp"
        android:text="O meu primeiro texto"/> 

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#000"
        android:textColor="#FFF"
        android:textStyle="bold|italic"
        android:typeface="serif"
        android:text="Negriña, cursiva e serif"/> 
    
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00F"
        android:textColor="#FFF"
        android:textStyle="bold"
        android:text="Ocupando o ancho do pai"/> 
        
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="#F00"
        android:textColor="#FFF"
        android:textStyle="bold"
        android:text="Ocupando o resto do alto do pai  "/> 
    
</LinearLayout>
</syntaxhighlight>

*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)
[[Image:Android_2013_U2_02_ParBasicos_19.jpg|250px]]



*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.
 
<syntaxhighlight lang="xml" line highlight="34,43">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
    
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#F00"
        android:layout_marginLeft="20sp"
        android:textStyle="bold"
        android:textSize="22sp"
        android:text="O meu primeiro texto"/> 

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#000"
        android:textColor="#FFF"
        android:textStyle="bold|italic"
        android:typeface="serif"
        android:text="Negriña, cursiva e serif"/> 
    
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:background="#00F"
        android:textColor="#FFF"
        android:textStyle="bold"
        android:text="Ocupando o ancho do pai"/> 
        
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:background="#F00"
        android:textColor="#FFF"
        android:textStyle="bold"
        android:text="Ocupando o resto do alto do pai  "/>    
        
</LinearLayout>
</syntaxhighlight>

[[Image:Android_2013_U2_02_ParBasicos_20.jpg|250px]]
*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




<br> -- [[Usuario:angelfg|Ángel D. Fernández González]] e [[Usuario:Carrion|Carlos Carrión Álvarez]] -- (2015).