35da096e42
* Added article Material Design * Spanish translation of Material Design article. * Added article User interface design * Spanish translation of User interface design. * Fixed more information and courses of the article material design (guide english and spanish) * Fixed more information and courses of the article user interface design (guide english and spanish) * Fixed localTitle of the article material design (guide spanish) * Fixed localTitle of the article user interface design (guide spanish) * fix/suggested-changes * fix/suggested-changes
5.0 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| User Interface Design | Diseño de Interfaz de Usuario |
Diseño de Interfaz de Usuario
El layout define la interfaz de usuario(UI) de un activity o un widget de una app. Puedes declarar el layout de 2 maneras:
- Declarar elementos en la UI en XML.
- Crear instancias de elementos de diseño de manera programática.
Generalmente los programadores usan diseños predeterminados de la app en XML, luego modificamos el estado de los objetos en la pantalla mediante código, incluidos los declarados en XML.
El SDK de Android incluye muchos elementos de diseño, los cuales puedes configurar hasta lograr la apariencia y el comportamiento deseado. Cada uno de estos elementos es una instancia de la clase View o de una de sus subclases, por ejemplo TextView o Button.
ViewGroup vs View
La View es la súper clase de todos los componentes de Android. Estos son algunos de los componentes derivados de View : TextView, EditText, ImageView, ProgressBar, Button, ImageButton, CheckBox, DatePicker y otros
ViewGroup es una colección de Views, similar a un contenedor. Puede contener Views y otros ViewGroups. Algunos de estos componentes derivados de ViewGroup son los siguientes: LinearLayout, RelativeLayout, CoordinatorLayout, ListView, GridView, ConstraintLayout, RecyclerView.
La jerarquía de vistas
Los elementos de diseño se encuentran en una jerarquía de objetos View denominado jerarquía de vistas.
El elemento raíz de esta vista jerárquica mostrado en la imagen es un objeto LinearLayout. LinearLayout hereda de una subclase de View llamada ViewGroup. Utilizamos LinearLayout para ordenar los elementos en una sola fila o columna.
Atributos
Cada objeto View y ViewGroup admite su propia variedad de atributos XML. Algunos atributos son comunes entre todos los elementos porque heredan de View, como los siguiente:
android:id="@+id/button"
- El atributo android:id permite tener a cualquier elemento un ID para identificarlo de forma exclusiva en la jerarquía de vistas.
android:layout_width="wrap_parent"
android:layout_height="match_parent"
- Los atributos android:layout_width y android:layout_height se utilizan para casi cualquier elemento de diseño. Sus valores típicos son match_parent o wrap_content.
- match_parent: La vista será tan grande como su padre.
- wrap_content: La vista será tan grande como lo necesite los elementos que lo contengan.
Otros atributos son específicos, los cuales varían dependiendo del elemento:
android:orientation="horizontal"
- El atributo android:orientation presente en el elemento LinearLayout determina si sus hijos aparecen de forma horizontal o vertical.
android:textSize="10sp"
- El atributo android:textsize presente en Button o TextView. Le indica a los elementos el tamaño de texto a usar.
Recursos de cadenas de caracteres
En cada proyecto Android se tiene el archivo llamado string.xml, para almacenar las cadena de caracteres. Recomendado juntar todas la cadenas de caracteres en este archivo y luego hacemos referencia a ella desde cada elemento particular, esto nos permite encontrar fácilmente su ubicación.
Aunque de forma predeterminada el archivo con los recursos de cadenas de caracteres se denomina string.xml lo podemos llamar como queramos e incluso tener varios en el proyecto, mientras mantengamos su formato.
De layout.xml a View
Toda Activity creada necesita una UI que gestionar, para proporcionársela llamamos al método setContentView de la Activity.
setContentView(R.layout.main_activity);
El método setContentView despliega un layout, es decir una interfaz y la muestra en pantalla. Al desplegar un layout, se crea una instancia de cada elemento de diseño contenido en el archivo de layout, de acuerdo con la definición de sus atributos. Para especificar que layout se despliega pasamos al método el Id de recurso de dicho layout.
Button button = (Button) findViewById(R.id.button);
Para conectar un elemento del archivo layout a la Activity utilizamos el método findViewById. Este método acepta el Id de recurso de un widget como argumento y devuelve un objeto View.