Estilos e temas - Historial de revisiones

Angelfg: /* O XML do layout */

2020-11-21T12:59:35Z

O XML do layout

Wiki: /* Caso práctico */

2018-10-23T19:23:10Z

Caso práctico

Wiki: /* Estilos a nivel xeral ou de activity */

2018-10-23T18:47:46Z

Estilos a nivel xeral ou de activity

Wiki: /* Introdución */

2018-10-23T18:41:02Z

Introdución

Wiki: /* Introdución */

2018-10-23T18:40:31Z

Introdución

Wiki en 18:40 23 oct 2018

2018-10-23T18:40:03Z

Mostrar los cambios

Wiki: /* Estilos a nivel xeral ou de activity */

2018-10-23T18:01:42Z

Estilos a nivel xeral ou de activity

Wiki en 17:54 23 oct 2018

2018-10-23T17:54:32Z

Wiki: /* Introdución */

2018-10-23T17:38:39Z

Introdución

Wiki: Página creada con «==Introdución== *Os '''estilos''' permiten definir unhas características visuais para as vistas e agrupalas cun identificador que pode ser usado por diferentes compoñent...»

2016-11-07T19:45:12Z

Página creada con «==Introdución== *Os '''estilos''' permiten definir unhas características visuais para as vistas e agrupalas cun identificador que pode ser usado por diferentes compoñent...»

Página nueva

==Introdución==
*Os '''estilos''' permiten definir unhas características visuais para as vistas e agrupalas cun identificador que pode ser usado por diferentes compoñentes para que todos teñan o mesmo aspecto.
*Un '''tema''' (theme) é aplicado a unha activity enteira (os seus elementos gráficos)
*Un '''estilo''' é aplicado a compoñentes individuais.

*Para definir un estilo temos que crear no cartafol '''/res/values''' un arquivo xml cun recurso (resource) de tipo estilo (style).

*Cada ítem do ficheiro de estilos terá o par: propiedade xml, valor:
**Exemplo: android:textSize -> "22sp"

*'''Referencias''':
**Estilos e temas: http://developer.android.com/guide/topics/ui/themes.html

==Caso práctico==
*Crear o proxecto: '''U2_42_Estilos'''.
*Imos definir un estilo común para aplicar ás etiquetas de texto, por exemplo.

<gallery caption="Estilos" widths="350" heights="300px" perrow="2">
Image:Android_2013_U2_42_Estilos_01.jpg| Crear un novo ficheiro xml en '''/res/values'''
Image:Android_2013_U2_42_Estilos_02.jpg| Poñerlle un nome.
Image:Android_2013_U2_42_Estilos_03.jpg| Ir ao ficheiro e engadir un elemento.
Image:Android_2013_U2_42_Estilos_04.jpg| Engadir un recurso de tipo '''Style/Theme'''
Image:Android_2013_U2_42_Estilos_05.jpg| Engadir un nome para o recurso e se é posible un pai.
Image:Android_2013_U2_42_Estilos_06.jpg| Engadir un ...
Image:Android_2013_U2_42_Estilos_07.jpg| ... ítem
Image:Android_2013_U2_42_Estilos_08.jpg| Indicar a propiedade xml e o valor desexado
Image:Android_2013_U2_42_Estilos_09.jpg| Ficheiro de estilos en formato xml
Image:Android_2013_U2_42_Estilos_10.jpg| Etiquetas, todas como mesmo estilo/formato.
</gallery>

===Ficheiro de estilos===
<syntaxhighlight lang="xml" line enclose="div" highlight="4-7" >
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="estilo_etiquetas" parent="@android:style/TextAppearance">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#00F</item>
<item name="android:textSize">22sp</item>

</style>

</resources>
</syntaxhighlight>

===O XML do layout===
<syntaxhighlight lang="xml" line enclose="div" highlight="8,12,16" >
<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
style="@style/estilo_etiquetas"
android:text="TextView 1" />

<TextView
style="@style/estilo_etiquetas"
android:text="TextView 2" />

<TextView
style="@style/estilo_etiquetas"
android:text="TextView 3" />

</LinearLayout>
</syntaxhighlight>

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

← Revisión anterior		Revisión del 12:59 21 nov 2020
Línea 364:		Línea 364:


		+
		+	<br />
		+	'''[https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3biles#UNIDADE_2:_A_interface_de_usuario. Enlace a la página principal de la UD2]'''
		+	<br />
		+	<br />
		+	'''[https://wiki.cifprodolfoucha.es/index.php?title=Programación_de_dispositivos_móbiles Enlace a la página principal del curso]'''
		+	<br />

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

@@ Línea 87: / Línea 87: @@
 : A diferencia dos estilo aplicados ós view´s, cando aplicamos un estilo nun theme, este estilo se aplicará a todos os view´s da aplicación que soporten dita propiedade. Se non a soportan non lle farán caso.
 : Existen atributos que non afectan a un elemento gráfico, se non a toda a aplicación, coma pode ser unha imaxe de fondo, o título da aplicación,...Estas propiedades se atopan no [http://developer.android.com/reference/android/R.attr.html enlace seguinte] e comezan con window coma por exemplo '''windowNoTitle''' ou '''windowBackground'''.
@@ Línea 137: / Línea 149: @@
 <br />
 ==Estilos a nivel específico==

@@ Línea 16: / Línea 16: @@
 : Aínda que non é obrigatorio, <u>se recomenda que sempre se herda dalgún compoñente xa creado</u> ou do estilo do propio S.O. para eses compoñentes e que despois se modifiquen ou engadan novas propiedades.
 :Por exemplo:
-<syntaxhighlight lang="java" line highlight="4">
+<syntaxhighlight lang="java" line highlight="2">
 <resources xmlns:android="http://schemas.android.com/apk/res/android">
      <style name="style_caixas" parent="@android:style/TextAppearance ">
          <item name="android:layout_width">wrap_content</item>
          <item name="android:layout_height">wrap_content</item>
-        	        <item name="android:textColor">@android:color/holo_blue_dark</item>
+        <item name="android:textColor">@android:color/holo_blue_dark</item>
      </style>

@@ Línea 13: / Línea 13: @@
 * O elemento <style> terá que ter un nome para poder asocialo os elementos gráficos.
-: Ademais, pode ter un atributo 'parent' no que indicamos de onde herda a aparencia (igual que ocorre en CSS podemos ter varios ‘niveis’ de herdanza’.
+: Ademais, pode ter un atributo 'parent' no que indicamos de onde herda a aparencia (igual que ocorre en CSS podemos ter varios ‘niveis’ de herdanza’).
 : Aínda que non é obrigatorio, <u>se recomenda que sempre se herda dalgún compoñente xa creado</u> ou do estilo do propio S.O. para eses compoñentes e que despois se modifiquen ou engadan novas propiedades.
 :Por exemplo:
@@ Línea 59: / Línea 59: @@
 <br />
 ==Estilos a nivel xeral ou de activity==

@@ Línea 74: / Línea 74: @@
 : Ou ben no seu arquivo de layout:
-:<syntaxhighlight lang="java" line highlight="4">
+:<syntaxhighlight lang="java" line highlight="6">
 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
@@ Línea 86: / Línea 86: @@
 </syntaxhighlight>
-::ou ben:
+: No exemplo se pon o paquete @style/ para buscar o estilo definido nalgún arquivo /res/values/ de tipo '''resource'''
 ==Caso práctico==

@@ Línea 266: / Línea 266: @@
 <br />
 ==Caso práctico==
-*Crear o proxecto: '''U2_42_Estilos'''.
+* Partimos que xa temos creado o proxecto inicial como [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base xa indicamos anteriormente].
-*Imos definir un estilo común para aplicar ás etiquetas de texto, por exemplo.
+: Se non o temos creado antes, crea un paquete de nome '''Themes''' como un subpaquete do teu paquete principal.
-<gallery caption="Estilos" widths="350" heights="300px" perrow="2">
+<br />
-Image:Android_2013_U2_42_Estilos_01.jpg| Crear un novo ficheiro xml en '''/res/values'''
+* Dentro do paquete '''Themes''' crear unha nova 'Empty Activity' de nome: '''UD02_01_Themes''' de tipo Launcher e sen compatibilidade.
-Image:Android_2013_U2_42_Estilos_02.jpg| Poñerlle un nome.
+: Modifica o arquivo '''AndroidManifiest.xml''' e engade unha label á activity como [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base xa vimos na creación do proxecto base].
-Image:Android_2013_U2_42_Estilos_03.jpg| Ir ao ficheiro e engadir un elemento.
-Image:Android_2013_U2_42_Estilos_04.jpg| Engadir un recurso de tipo '''Style/Theme'''
-Image:Android_2013_U2_42_Estilos_05.jpg| Engadir un nome para o recurso e se é posible un pai.
-Image:Android_2013_U2_42_Estilos_06.jpg| Engadir un ...
-Image:Android_2013_U2_42_Estilos_07.jpg| ... ítem
-Image:Android_2013_U2_42_Estilos_08.jpg| Indicar a propiedade xml e o valor desexado
+*Imos definir un estilo común para aplicar ás etiquetas de texto.
 ===Ficheiro de estilos===
-<syntaxhighlight lang="xml" line enclose="div" highlight="4-7" >
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-     <style name="estilo_etiquetas" parent="@android:style/TextAppearance">
+     <style name="style_all_etiquetas" parent="@android:style/TextAppearance">
          <item name="android:layout_width">wrap_content</item>
          <item name="android:layout_height">wrap_content</item>
-         <item name="android:textColor">#00F</item>
+         <item name="android:textColor">@color/color_all_etiquetas</item>
-         <item name="android:textSize">22sp</item>
+         <item name="android:textSize">@dimen/dimen_all_etiquetas</item>
-−
      </style>
-−
 </resources>
 </syntaxhighlight>
 ===O XML do layout===
-<syntaxhighlight lang="xml" line enclose="div" highlight="8,12,16" >
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+* Comentar que a asignación do estilo a podemos facer graficamente:
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
-     android:orientation="vertical" >
+     tools:context=".Themes.UD02_01_Themes">
      <TextView
-         style="@style/estilo_etiquetas"
+        android:id="@+id/tvTexto1_UD02_01_themes"
-         android:text="TextView 1" />
+         style="@style/style_all_etiquetas"
      <TextView
-         style="@style/estilo_etiquetas"
+        android:id="@+id/tvTexto2_UD02_01_themes"
-         android:text="TextView 2" />
+         style="@style/style_all_etiquetas"
      <TextView
-         style="@style/estilo_etiquetas"
+        android:id="@+id/tvTexto3_UD02_01_themes"
-         android:text="TextView 3" />
+         style="@style/style_all_etiquetas"
+        android:layout_width="wrap_content"
-</LinearLayout>
+        android:layout_height="wrap_content"
 </syntaxhighlight>

← Revisión anterior		Revisión del 17:54 23 oct 2018
Línea 7:		Línea 7:


−	*Cada ítem do ficheiro de estilos terá o par: propiedade xml, valor:
−	**Exemplo: android:textSize -> "22sp"

@@ Línea 9: / Línea 9: @@
 *Cada ítem do ficheiro de estilos terá o par: propiedade xml, valor:
 **Exemplo: android:textSize -> "22sp"
 *'''Referencias''':
 **Estilos e temas: http://developer.android.com/guide/topics/ui/themes.html
 ==Caso práctico==