- Comprender la interfaz de usuario de Android
- diseño
- Controles de interfaz de usuario comunes
- Escribe un proyecto de interfaz de usuario simple
01 interfaz de usuario de Android
1.1 UI
User Interface (UI, también conocida como interfaz de usuario) es
el medio de interacción e intercambio de información entre el sistema y el usuario , que realiza la conversión entre la forma interna de la información y la forma aceptable para los humanos.
El diseño de software se puede dividir en dos partes: diseño de codificación y diseño de interfaz de usuario.
1.2 Interfaz de usuario de Android La
interfaz de la aplicación de Android contiene todo el contenido que el usuario puede ver e interactuar. Android ofrece una gran variedad de
componentes de IU predefinidos , como objetos de diseño estructurado y controles de IU. Puedes usar estos componentes para crear una interfaz gráfica para tu aplicación. Android también
proporciona otros módulos de interfaz para crear interfaces especiales, como cuadros de diálogo, notificaciones y menús.
La interfaz de usuario de Android se compone de diseño y controles
02 Diseño El
diseño (diseño) puede definir la estructura de la interfaz en la aplicación (como la estructura de la interfaz de Activity). Todos los elementos del diseño se construyen utilizando
una jerarquía de objetos View y ViewGroup. Ver generalmente dibuja contenido que los usuarios pueden ver e interactuar. Sin embargo,
ViewGroup es un contenedor invisible que se utiliza para definir la estructura de diseño de View y otros objetos ViewGroup.
2.1 La estructura del
diseño Definir la vista del diseño de la interfaz
- Los objetos de vista a menudo se denominan "widgets" y pueden ser una de muchas subclases, como Button o TextView.
- Los objetos ViewGroup a menudo se denominan "diseños" y pueden ser uno de los muchos tipos que proporcionan otras estructuras de diseño, como LinearLayout o
ConstraintLayout.
2.2 Declarar el diseño
- Al declarar elementos de interfaz en XML, Android proporciona vocabulario XML conciso correspondiente a la clase View y sus subclases, como vocabulario para widgets y diseños. También puede usar
el Editor de diseño de Android Studio y usar una interfaz de arrastrar y soltar para crear diseños XML.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Cree instancias de elementos de diseño en tiempo de ejecución. Su aplicación puede crear mediante programación objetos View y ViewGroup (y manipular sus
propiedades).
ConstraintLayout constraintLayout = new ConstraintLayout(this);
TextView view = new TextView(this);
view.setText("Hello World!");
constraintLayout.addView(view);
- Consejo: utilice el Inspector de diseño para depurar el diseño, puede ver el diseño creado por el código
- [Ejecute su aplicación] en el dispositivo o simulador conectado.
- Haga clic en Herramientas> Inspector de diseño.
- En el cuadro de diálogo Elegir proceso que aparece, seleccione el proceso de la aplicación que desea verificar y luego haga clic en Aceptar.
2.3 Escribir XML
Utilice el vocabulario XML de Android para diseñar rápidamente el diseño de la
interfaz de usuario y los elementos de pantalla que contiene de la misma manera que crea una página web que contiene una serie de elementos anidados en HTML.
Cada archivo de diseño debe contener solo un elemento raíz, y esto El elemento debe ser objetos ViewGroup o el objeto view
define el elemento raíz, puede agregarse como elementos secundarios del otro objeto de diseño o control, para construir gradualmente la definición de la
estructura de jerarquía de vista de diseño
después de la declaración en el diseño XML, con un. La extensión de archivo xml se almacena en Android en el directorio res / layout / del proyecto
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a TextView" />
<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
</LinearLayout>
2.4 Carga de recursos XML
- Al compilar la aplicación, el sistema compilará cada archivo de diseño XML en los recursos de View. En la devolución de llamada Activity.onCreate (), llamando
setContentView() ，并以 R.layout.* @Override protected void
onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); }
2.5 Propiedades
Cada objeto View y ViewGroup soporta sus propias propiedades XML. Algunas propiedades son exclusivas del objeto View
(por ejemplo, TextView admite la propiedad textSize), pero cualquier objeto View que pueda ampliar esta clase también heredará estas
propiedades. Algunas propiedades son comunes a todos los objetos View porque se heredan de la clase raíz View (por ejemplo, la propiedad id). En
adición, otros atributos son considerados como "parámetros de diseño", es decir, los atributos que describen la dirección diseño específico del objeto View, tales como
los atributos definidos por el padre objeto ViewGroup del objeto.
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="24sp"/>
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮"/>
2.6 ID
Cualquier objeto View puede tener un ID entero asociado, que se utiliza para identificar de forma única el objeto View en el árbol de estructura. Después de compilar la aplicación
, el sistema citará este ID en forma de número entero, pero en el archivo XML de diseño, el sistema normalmente
especificará el ID en el atributo id en forma de cadena . Este es un atributo XML común a todos los objetos View (definido por la clase View), y
utilizará este atributo con frecuencia .
La sintaxis de ID dentro de la etiqueta XML es:
android:1 id="@+id/tv"
El símbolo @ al principio de la cadena indica que el analizador XML debe analizar y expandir el resto de la cadena de ID e identificarlo como un recurso de ID
. El signo más (+) significa que este es un nuevo nombre de recurso, que debe crearse y agregarse a nuestros recursos (en el
archivo R.java ). El marco de Android también proporciona muchos otros recursos de identificación. Cuando se hace referencia al ID de recurso de Android, no se requiere el signo más, pero se
debe agregar el espacio de nombres del paquete de Android
android:id="@android:id/empty"
Después de agregar el espacio de nombres del paquete de Android, ahora haremos referencia al
archivo ID R.java de la clase de recurso android.R en lugar de la clase de recurso local. Consejos
: La diferencia entre @ + id y @id: de
hecho, @ + id es nuevo en el archivo R.java Agregue un nombre de identificación, si el mismo nombre de identificación ya existe antes, se sobrescribirá el nombre anterior
. Y @id es el recurso de identificación que hace referencia directamente a la existencia del archivo R.java. Si no existe, se informará un error de compilación.
Nota: El nombre de la cadena de ID debe ser único en el mismo diseño y no puede ser el mismo nombre. El mismo nombre se puede usar en diferentes diseños; el
valor de ID se usa para crear una instancia de nuestro objeto de vista
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="24sp"/>
TextView textView = (TextView) findViewById(R.id.tv);
2.7 Parámetros de diseño LayoutParams
<TextView
android:layout_width="100dp"
android:layout_height="200dp"
android:layout_marginLeft="10dp" //左边距
android:layout_marginTop="10dp" //上边距
android:text="Hello World!" />
La función del parámetro de diseño es establecer la posición y el tamaño de nuestra vista en el diseño. La
clase ViewGroup implementará una clase anidada que extiende ViewGroup.LayoutParams, que contiene algunos
atributos que establecen el tamaño y la posición de la vista.
Ver diagrama de jerarquía, incluidos los parámetros de diseño asociados con cada vista:
TextView tv = new TextView(this);
LinearLayout linearLayout = new LinearLayout(this);
LinearLayout.LayoutParams layoutParams =
(LinearLayout.LayoutParams)tv.getLayoutParams();
layoutParams.leftMargin = 30; //左边距
layoutParams.topMargin = 30;//上边距
layoutParams.width = 100;//宽
layoutParams.height = 200;//高
tv.setLayoutParams(layoutParams);
linearLayout.addView(tv);
En términos generales, se recomienda no utilizar unidades absolutas (como píxeles) para especificar el ancho y la altura del diseño. Un mejor método es utilizar
unidades de medida relativas (como unidades de píxeles independientes de la densidad (dp), wrap_content o match_parent), ya que ayudan a garantizar
que su aplicación se muestre correctamente en las pantallas de dispositivos de todos los tamaños.
wrap_content le indica a su vista que cambie su tamaño al tamaño requerido por el contenido.
match_parent indica a su vista que use el tamaño más grande permitido por su grupo de vista principal tanto como sea posible.
2.8 Posición de diseño
03 Diseño común
3.1 Diseño lineal-LinearLayout
LinearLayout es un contenedor de vista que se utiliza para mantener todas las subvistas alineadas en una sola dirección (vertical u horizontal). Puede
utilizar el atributo android: orientación para especificar la dirección del diseño.
android:orientation="horizontal"
El peso del diseño android: layout_weight
asigna el peso (proporción) del espacio ocupado por la subvista al establecer el valor de peso para la subvista. Como se muestra en la figura, el peso de las tres subvistas se establece
en 1 y el espacio de página es igualmente dividida.
3.2 relativa diseño-RelativeLayout
disposición relativa: Sub la vista puede fijar la posición relativa con respecto a otra vista hermano o el contenedor de vista padre a través de la disposición correspondiente atributos.
Descripción Attribute:
en relación con elementos de hermanos
3.3 Diseño - FrameLayout
el tipo de diseño más simple, sin orientación, cuando ingresamos , al agregar controles, el valor predeterminado los colocará en esta área de
la esquina superior izquierda del campo, el tamaño del diseño de marco más grande del subcontrol El control determina que si el tamaño del control es el mismo, entonces
solo el componente superior se puede ver al mismo tiempo , y el control agregado subsecuente cubrirá el 
3.4 Grid Layout GridLayout
nombre que significa
android: columnCount número de columnas
android: rowCount fila el número de
columnas android layout_columnSpan en el
android: el número de líneas en el layout_rowSpan