01.2 Layouts and resources for the UI 88.en.es (1) (1).pdf

Android Developer Fundamentos V2
Este trabajo es bajo licencia Creativo
Atribución 4.0 Internacional
Licencia .
Licencia .
Diseños y recursos
para la
IU
Este trabajo es bajo licencia Creati ve Commons
Reconocimiento 4.0 Internacional
licen SE .
licen SE .
licen SE .
Diseños y recursos
para la
IU
11
Construir su primera
aplicación
1
Lección 1

Licencia .
Licencia .
Diseños y recursos
para la
IU
1.2 Presentaciones y recursos para la
interfaz de usuario
2

Licencia .
Licencia .
Diseños y recursos
para la
IU
Contenido
● Vistas, grupos de vista, y la vista de jerarquía
● El editor de diseño y ConstraintLayout
El editor de diseño y ConstraintLayout
● manejo de eventos
● Los recursos y las mediciones
3

Puntos de vista
4

Licencia .
Licencia .
Diseños y recursos
para la
IU
Todo lo que ves es una vista
Si nos fijamos en su dispositivo móvil, cada elemento de
la interfaz de usuario que se ve es una Ver.
la interfaz de usuario que se ve es una Ver.
5
Puntos de vista

Licencia .
Licencia .
Diseños y recursos
para la
IU
¿Qué es una vista?
Ver subclases son bloques de construcción básicos de la interfaz de usuario
Ver subclases son bloques de construcción básicos de la interfaz de usuario
● texto de la pantalla ( Vista de texto clase), edición de texto ( Editar texto clase)
texto de la pantalla ( Vista de texto clase), edición de texto ( Editar texto clase)
● (botones Botón clase), menús , otros controles
(botones Botón clase), menús , otros controles
● desplazable ( ScrollView , RecyclerView )
desplazable ( ScrollView , RecyclerView )
● Mostrar imagenes ( ImageView )
Mostrar imagenes ( ImageView )
Mostrar imagenes ( ImageView )
● vistas de grupo ( ConstraintLayout y LinearLayout )
vistas de grupo ( ConstraintLayout y LinearLayout )
6

Licencia .
Licencia .
Diseños y recursos
para la
IU
Ejemplos de vista subclases
7
Botón
Editar texto
deslizador
Caja
Boton de radio
Cambiar

Licencia .
Licencia .
Diseños y recursos
para la
IU
Ver los atributos
● Color, dimensiones, posicionamiento
● Puede tener de enfoque (por ejemplo, seleccionado para recibir la entrada del usuario)
● Pueden ser interactivos (responden a los clics de los usuarios)
● Puede ser visible o no
● Relaciones con otros puntos de vista
8

Licencia .
Licencia .
Diseños y recursos
para la
IU
Crear vistas y diseños
● Android Studio editor de diseño: representación visual de XML
● editor de XML
● código Java
9

Licencia .
Licencia .
Diseños y recursos
para la
IU
editor de diseño de Android Studio
10
1. XML archivo de diseño
2. Diseño y Texto
2. Diseño y Texto
2. Diseño y Texto
pestañas
3. paleta cristal
3. paleta cristal
4. Árbol de componentes
5. Diseño y paneles de
blueprint
6. Atributos lengüeta
6. Atributos lengüeta

Licencia .
Licencia .
Diseños y recursos
para la
IU
Ver definido en XML
<TextView
android: id = "@ + / Identificación del show_count" android:
layout_width = "match_parent" android: layout_height =
"wrap_content" android: Fondo = "@ Color / myBackgroundColor"
android: text = "@ string / count_initial_value" android: textColor =" @
Color / colorPrimary" Android: TEXTSIZE = "@ dimen /
count_text_size" android: TEXTSTYLE = "bold"
/>
11

Licencia .
Licencia .
Diseños y recursos
para la
IU
Ver atributos en XML
12
android: <nombre_propiedad> = "<property_value>" Ejemplo: android:
android: <nombre_propiedad> = "<property_value>" Ejemplo: android:
layout_width = "match_parent"
android: <nombre_propiedad> = "@ <Resource_type> / RESOURCE_ID" Ejemplo:
android: text = "@ string / button_label_next"
android: <nombre_propiedad> = "@ + / Identificación del view_id"
Ejemplo: android: id = "@ + / Identificación del show_count"
Ejemplo: android: id = "@ + / Identificación del show_count"

Licencia .
Licencia .
Diseños y recursos
para la
IU
Crear vista en código Java
en una Actividad:
en una Actividad:
TextView myText = new TextView ( esta);
myText.setText ( "Muestra este texto!");
13
contexto

Licencia .
Licencia .
Diseños y recursos
para la
IU
¿Cuál es el contexto?
● Contexto es una interfaz a la información global acerca de un entorno de
Contexto es una interfaz a la información global acerca de un entorno de
aplicaciones
● Obtener el contexto:
contexto context = getApplicationContext ();
● Un Actividad es su propio contexto:
Un Actividad es su propio contexto:
Un Actividad es su propio contexto:
14

Licencia .
Licencia .
Diseños y recursos
para la
IU
Vistas personalizadas
● Más de 100 (!) Diferentes tipos de vistas disponibles en el sistema
Android, todos los niños de la Ver clase
● Si necesario, crear vistas personalizadas subclasificando vistas existentes o las Ver
Si necesario, crear vistas personalizadas subclasificando vistas existentes o las Ver
clase
15

ViewGroup y Vista
jerarquía
dieciséis

Licencia .
Licencia .
Diseños y recursos
para la
IU
ViewGroup contiene puntos de vista "niños"
● ConstraintLayout : Coloca los elementos de interfaz de usuario que utilizan
ConstraintLayout : Coloca los elementos de interfaz de usuario que utilizan
ConstraintLayout : Coloca los elementos de interfaz de usuario que utilizan
conexiones de restricción para otros elementos ya los bordes de diseño
● ScrollView : Contiene un elemento y se activa el desplazamiento
ScrollView : Contiene un elemento y se activa el desplazamiento
● RecyclerView : Contiene una lista de elementos y permite el desplazamiento mediante la
RecyclerView : Contiene una lista de elementos y permite el desplazamiento mediante la
adición y eliminación de elementos dinámicamente
17

Licencia .
Licencia .
Diseños y recursos
para la
IU
ViewGroups para los diseños
diseños
● son tipos específicos de (ViewGroups subclases de
son tipos específicos de (ViewGroups subclases de
son tipos específicos de (ViewGroups subclases de
ViewGroup )
ViewGroup )
● contener vistas secundarias
● puede estar en una fila, columna, rejilla, mesa, absoluta
18

Licencia .
Licencia .
Diseños y recursos
para la
IU
Clases Disposición común
19
LinearLayout ConstraintLayout GridLayout TableLayout

Licencia .
Licencia .
Diseños y recursos
para la
IU
Clases Disposición común
● ConstraintLayout: vistas conectar con limitaciones
ConstraintLayout: vistas conectar con limitaciones
● LinearLayout: Horizontal o vertical de la fila
LinearLayout: Horizontal o vertical de la fila
● Disposición relativa: vistas secundarias respecto a la otra
Disposición relativa: vistas secundarias respecto a la otra
● TableLayout: Filas y columnas
TableLayout: Filas y columnas
● FrameLayout: Muestra un niño de una pila de los niños
FrameLayout: Muestra un niño de una pila de los niños
20

Licencia .
Licencia .
Diseños y recursos
para la
IU
jerarquía de clases jerarquía de disposición vs.
● Ver clase-jerarquía es la herencia estándar de la clase orientado a objetos
Ver clase-jerarquía es la herencia estándar de la clase orientado a objetos
○ Por ejemplo, Botón es un Vista de texto es un Ver es-un Objeto
Por ejemplo, Botón es un Vista de texto es un Ver es-un Objeto
○ relación superclase-subclase
● jerarquía de disposición es cómo están dispuestos visualmente vistas
○ Por ejemplo, LinearLayout puede contener Botón s dispuestos en una fila
Por ejemplo, LinearLayout puede contener Botón s dispuestos en una fila
○ relación padre-hijo
21

Licencia .
Licencia .
Diseños y recursos
para la
IU
Jerarquía de viewgroups y vistas
22
ViewGroup
ViewGroup Ver Ver
Ver Ver Ver
vista raíz es siempre una ViewGroup
vista raíz es siempre una ViewGroup

Licencia .
Licencia .
Diseños y recursos
para la
IU
Ver la jerarquía y el diseño de la pantalla
23

Licencia .
Licencia .
Diseños y recursos
para la
IU
Ver jerarquía en el editor de diseño
24

Licencia .
Licencia .
Diseños y recursos
para la
IU
Diseño creado en XML
< LinearLayout
< LinearLayout
androide : = orientación "vertical"
androide : Layout_width = "Match_parent"
androide : Layout_height = "Match_parent" > < Botón
. . . /> < Vista
/> < Vista
de texto
. . . />
< Botón
< Botón
. . . />
</ LinearLayout
25

Licencia .
Licencia .
Diseños y recursos
para la
IU
Diseño creado en código Java Actividad
LinearLayout linearL = nuevo LinearLayout (this); linearL.setOrientation
(LinearLayout.VERTICAL);
TextView myText = nuevo TextView (this);
myText.setText ( "Muestra este texto!");
linearL.addView (myText);
setContentView (linearL);
26

Licencia .
Licencia .
Diseños y recursos
para la
IU
ancho establecido y la altura en código Java
Ajuste el ancho y la altura de un punto de vista:
LinearLayout.LayoutParams LayoutParams =
(nuevas Linear.LayoutParams
LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_CONTENT);
myView.setLayoutParams (LayoutParams);
27

Licencia .
Licencia .
Diseños y recursos
para la
IU
Mejores prácticas para la vista de las jerarquías
28
● Disposición de vista de jerarquía afecta al rendimiento de aplicaciones
● Utilice pequeño número de puntos de vista más simples posibles
● Mantener la jerarquía plana límite de anidamiento de vistas y grupos de vistas

El editor de
diseño y de
restricciones de
diseño
29

Licencia .
Licencia .
Diseños y recursos
para la
IU
El editor de diseño con ConstraintLayout
30
● Conectar la interfaz de usuario elementos a
disposición de los padres
● Elementos de cambio de tamaño y de posición
● Alinear elementos a los demás
● Ajustar los márgenes y dimensiones
● Cambiar atributos

Licencia .
Licencia .
Diseños y recursos
para la
IU
¿Cuál es ConstraintLayout?
31
● Por defecto de diseño para el nuevo proyecto Android Studio
● ViewGroup que ofrece flexibilidad para el diseño de diseño
ViewGroup que ofrece flexibilidad para el diseño de diseño
● Proporciona limitaciones para determinar las posiciones y la alineación de los
elementos de interfaz de usuario
● Restricción es una conexión a otro punto de vista, la disposición de los padres, o directriz
invisible

Licencia .
Licencia .
Diseños y recursos
para la
IU
barra de herramientas principal editor de diseño
32
1. Elija un diseño superficial: Diseño y modelo paneles
2. Orientación en el Editor: Vertical y Horizontal
3. Dispositivo de Editor: Elija el dispositivo para la vista previa
4. API versión en el Editor: Elija API para la vista previa
5. Theme en Editor: Elija el tema para la vista previa
6. Configuración regional en el Editor: Idioma / locale para la vista previa

Licencia .
Licencia .
Diseños y recursos
para la
IU
ConstraintLayout barra de herramientas en el editor de diseño
33
1. Mostrar: Mostrar restricciones y Mostrar Márgenes
2. Autoconnect: habilite o inhabilite
3. Borrar todas las restricciones: Borrar todas las limitaciones en el diseño
Restricciones 4. Deducir: Crear restricciones por inferencia
5. márgenes predeterminados: Fije los márgenes predeterminados
6. Paquete: Paquete o expandir elementos seleccionados
7. Align: elementos Align seleccionados
8. Directrices: Añadir guías verticales u horizontales
9. controles de zoom: zoom dentro o fuera

Licencia .
Licencia .
Diseños y recursos
para la
IU
Autoconectar
34
● Habilitar conexión automática en
barra de herramientas si es discapacitado
● elemento de arrastre a cualquier parte de
un diseño
● Autoconnect genera restricciones en
contra de la disposición de los padres

Licencia .
Licencia .
Diseños y recursos
para la
IU
manijas ConstraintLayout
35
1. controlador de ajuste
2. línea de restricción y el mango
3. Restricción mango
4. Línea de base mango

Licencia .
Licencia .
Diseños y recursos
para la
IU
elementos Alinear por la línea de base
36
1. Haga clic en el base
1. Haga clic en el base
botón de restricción
2. Arrastre desde el inicio hasta la línea de
base del otro elemento

Licencia .
Licencia .
Diseños y recursos
para la
IU
panel de atributos
37
● Haga clic en la ficha Atributos
● Atributos de panel incluye:
○ Controles de margen para el
posicionamiento
○ Los atributos como
layout_width

Licencia .
Licencia .
Diseños y recursos
para la
IU
Atributos panel de vista inspector
38
1. verticales especifica el control de tamaño de vista
layout_height
2. especifica el control de tamaño de visión
horizontal layout_width
horizontal layout_width
3. Atributos botón de cierre panel

Licencia .
Licencia .
Diseños y recursos
para la
IU
Layout_width y layout_height
39
layout_width y layout_height cambio con control del tamaño
● match_constraint: Expande elemento para llenar su matriz
match_constraint: Expande elemento para llenar su matriz
● resumir contenido: elemento encoge al contenido encierran
resumir contenido: elemento encoge al contenido encierran
● número fijo de dp ( píxeles independientes de la densidad)
número fijo de dp ( píxeles independientes de la densidad)
número fijo de dp ( píxeles independientes de la densidad)

Licencia .
Licencia .
Diseños y recursos
para la
IU
Los atributos establecidos
40
Para ver y editar todos los atributos de elemento:
1. Haga clic atributos lengüeta
2. Seleccione el elemento en el diseño, proyecto, o Árbol de componentes
3. Los atributos más utilizados-Change
4. Haga clic en la parte superior o Ver más atributos en la parte inferior para ver
y cambiar más atributos

Licencia .
Licencia .
Diseños y recursos
para la
IU
Establecer los atributos de ejemplo: Vista de Texto
41

Licencia .
Licencia .
Diseños y recursos
para la
IU
diseños de vista previa
42
Previsualización del diseño con la horizontal / orientación vertical:
1. Haga clic en el botón Editor Orientación
2. Elija Pasar a horizontal o Cambiar al retrato
Vista previa de diseño con diferentes dispositivos:
1. Haga clic en Dispositivo en el botón Editor
2. Elija el dispositivo

Licencia .
Licencia .
Diseños y recursos
para la
IU
Crear variante de diseño de paisaje
43
1. Haga clic en el botón Editor Orientación
2. Elija Crear paisaje Variación
2. Elija Crear paisaje Variación
3. Disposición variante de creación:
activity_main.xml (tierra)
4. Modificar la variante de diseño, según sea necesario

Licencia .
Licencia .
Diseños y recursos
para la
IU
Crear variante de diseño para la tableta
44
1. Haga clic en Orientación en Layout Editor
2. Elija Crear un diseño x-gran variación
2. Elija Crear un diseño x-gran variación
3. Disposición variante de creación: activity_main.xml (xlarge)
3. Disposición variante de creación: activity_main.xml (xlarge)
4. Modificar la variante de diseño, según sea necesario

Control de eventos
45

Licencia .
Licencia .
Diseños y recursos
para la
IU
Eventos
46
Algo que sucede
● En la interfaz de usuario: Haga clic, tocar, arrastrar
● Dispositivo: DetectedActivity como caminar, conducir, la inclinación
Dispositivo: DetectedActivity como caminar, conducir, la inclinación
Dispositivo: DetectedActivity como caminar, conducir, la inclinación
● Los eventos se "notan" por el sistema Android

Licencia .
Licencia .
Diseños y recursos
para la
IU
Los controladores de eventos
47
Métodos que hacen algo en respuesta a un clic
● Un método, llamado una controlador de eventos, se desencadena por un
Un método, llamado una controlador de eventos, se desencadena por un
Un método, llamado una controlador de eventos, se desencadena por un
evento específico y hace algo en respuesta al evento

Licencia .
Licencia .
Diseños y recursos
para la
IU
Adjuntar en XML e implementar en Java
48
Adjuntar manejador de vista de
diseño XML:
android: onClick = "showToast"
Implementar manejador de la actividad de
Java:
showToast pública vacío (Ver vista) {
String msg = "Hola Toast!"; Tostada Tostada
= Toast.makeText (
esto, msg, duración); toast.show
(); }}

Licencia .
Licencia .
Diseños y recursos
para la
IU
Alternativa: Conjunto controlador de clic en Java
49
último botón Botón = (Button) findViewById (R.id.button_id); button.setOnClickListener (nueva
View.OnClickListener () {
public void onClick (Ver v) {
String msg = "Hola Toast!";
Tostada Tostada = Toast.makeText (esto, msg, duración); toast.show (); }});

Los recursos y las
mediciones
50

Licencia .
Licencia .
Diseños y recursos
para la
IU
recursos
● datos estáticos separados de código en sus diseños.
● Cuerdas, dimensiones, imágenes, texto del menú, colores, estilos
● Útil para la localización
51

Licencia .
Licencia .
Diseños y recursos
para la
IU
¿Dónde están los recursos en su proyecto?
52
recursos y archivos de recursos
guardado en res carpeta

Licencia .
Licencia .
Diseños y recursos
para la
IU
Referirse a los recursos de código
53
● Diseño:
R.layout.activity_main
setContentView (R.layout.activity_main);
● Ver:
R.id.recyclerview
rv = (RecyclerView) findViewById (R.id.recyclerview);
● Cuerda:
En Java: R.string.title
En Java: R.string.title
En XML: android: text = "@ string / título"
En XML: android: text = "@ string / título"

Licencia .
Licencia .
Diseños y recursos
para la
IU
Mediciones
● Independiente de la densidad píxeles ( dp): Vistas de
Independiente de la densidad píxeles ( dp): Vistas de
Independiente de la densidad píxeles ( dp): Vistas de
● Independiente de la escala píxeles ( sp): para el texto
Independiente de la escala píxeles ( sp): para el texto
Independiente de la escala píxeles ( sp): para el texto
No utilice las unidades dependientes del dispositivo o dependientes de la densidad:
● Píxeles reales ( px)
Píxeles reales ( px)
● Medición real ( en, mm)
Medición real ( en, mm)
Medición real ( en, mm)
● Puntos - tipografía 1/72 pulgada ( pt)
Puntos - tipografía 1/72 pulgada ( pt)
54

Aprende más
55

Diseños y recursos
para la
IU
Licencia .
Licencia .
Aprende más
Puntos de vista:
● Ver documentación de la clase
Ver documentación de la clase
● dispositivo píxeles independientes
● Botón documentación de la clase
Botón documentación de la clase
● Vista de texto documentación de la clase
Vista de texto documentación de la clase
diseños:
● developer.android.com Presentaciones
● Disposición de objetos comunes
56

Diseños y recursos
para la
IU
Licencia .
Licencia .
Aprender aún más
recursos:
● recursos Android
● Color definición de clase
Color definición de clase
● R.color recursos
R.color recursos
● Apoyando a diferentes densidades
● Los códigos de color hexadecimal de color
57
Otro:
● documentación de Android Studio
● Estudio de imagen de Activos
● Descripción general de IU
● palabras y conceptos de vocabulario
glosario
● Modelo-Vista-Presentador
(MVP) patrón de arquitectura
● Los patrones arquitectónicos

Diseños y recursos
para la
IU
Licencia .
Licencia .
¿Que sigue?
58
● Concepto Capítulo: 1.2 Presentaciones y recursos para la interfaz de usuario
Concepto Capítulo: 1.2 Presentaciones y recursos para la interfaz de usuario
● prácticas:
○ 1.2A: Su primera interfaz de usuario interactiva
○ 1.2B: El editor de diseño

FINAL
59

01.2 Layouts and resources for the UI 88.en.es (1) (1).pdf

Recomendados

Recomendados

Más contenido relacionado

Similar a 01.2 Layouts and resources for the UI 88.en.es (1) (1).pdf

Similar a 01.2 Layouts and resources for the UI 88.en.es (1) (1).pdf (20)

Último

Último (7)

01.2 Layouts and resources for the UI 88.en.es (1) (1).pdf