Integración de conocimientos de diseño de front-end de Android

Integración de conocimientos de interfaz de usuario de Android

Diseño de interfaz común

Atributos generales

android: id ID del diseño

android: layout_width El ancho del diseño

android: layout_height La longitud del diseño

android: background El fondo del diseño

android: layout_margin establece la distancia entre el diseño actual y el borde de la pantalla o los controles circundantes

android: padding establece la distancia entre el diseño actual y los controles en el diseño

Disposición relativa

El diseño relativo es especificar la posición del control secundario por posicionamiento relativo, es decir, colocar la posición del control con su control o contenedor principal como objeto de referencia.

Propiedades relativas de posición de control de diseño

Propiedades de control	Función descriptiva
android: layout_centerInParent	Establecer el control actual para que se ubique en el centro del diseño principal
android: layout_centerVertical	Establecer el control actual para que se ubique en la posición central vertical del diseño principal
android: layout_centerHorizontal	Establecer el control actual para que se ubique en la posición central horizontal del control principal
android: layout_above	Establecer el control actual para que esté por encima de un control
android: layout_below	Configure el control de corriente para que se ubique debajo de un control
android: layout_toLeftOf	Establecer el control actual para que esté en el lado izquierdo de un control
android: layout_toRightOf	Establecer el control actual para que se ubique en el lado derecho de un control
android: layout_alignParentTop	Establecer si el control actual está alineado con la parte superior del control principal
android: layout_alignParentLeft	Establecer si el control actual está alineado a la izquierda del control principal
android: layout_alignParentRight	Establecer si el control actual está alineado a la derecha del control principal
android: layout_alignParentBottom	Establecer si el control actual está alineado con la parte inferior del control principal
android: layout_alignTop	Establecer el límite superior del control actual para alinearlo con el límite superior de un control
android: layout_alignBottom	Establecer el límite inferior del control actual para alinearlo con el límite inferior de un control
android: layout_alignLeft	Establecer el borde izquierdo del control actual para alinearlo con el borde izquierdo de un control determinado
android: layout_alignRight	Establecer el límite derecho del control actual para alinearlo con el límite derecho de un control

LinearLayout

El diseño lineal muestra principalmente los controles en la interfaz de manera horizontal o vertical. Cuando los controles están dispuestos horizontalmente, el orden de visualización es de izquierda a derecha; cuando los controles están dispuestos verticalmente, el orden de visualización es de arriba a abajo.

** Nota: ** El valor del atributo android: layout_width en el diseño lineal no se puede establecer en wrap_content. Debido a que la prioridad del diseño lineal es mayor que la del botón, si se establece en wrap_content, el atributo android: layout_weight del control del botón no será válido.

<Button
   		android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        />
android:layout_weight：设置权重，当一行中有多个button在一行中占的比例。

ScrollView

Diseño de desplazamiento: LinearLayout se puede organizar verticalmente, pero cuando el control configurado excede el tamaño del teléfono móvil, el control se ocultará. Para resolver este problema, se introduce el diseño ScrollView. La característica de ScrollView es: cuando el contenido de control excede el alcance del teléfono móvil, puede generar automáticamente una barra de desplazamiento.

• Desplazamiento vertical: ScrollView
• Desplazamiento horizontal:
  ejemplos de HorizontalScrollView :

<ScrollView>
	···
</ScrollView>

<HorizontalScrollView>
	···
</HorizontalScrollView>

Diseño de la tabla TableLayout

Diseño determinante: no es necesario declarar explícitamente cuántas filas y columnas contiene. En su lugar, puede controlar el número de filas en la tabla agregando un diseño TableRow, y controlar el número de columnas en la tabla agregando controles al Diseño TableRow.

<TableLayout xmls:android="...">
	<TableRoe>
    	UI控件
    </TableRoe>
</TableLayout>

Propiedades de diseño de tabla de TableLayout

Atributos de diseño	Función descriptiva
android: stretchColumns	Configurar la columna para estirar
android: shrinkColunms	Configurar la columna para que se contraiga
android: collapseColumns	Configurar la columna para que se oculte

Propiedades de control de diseño de tabla TableLayout

Propiedades de control	Función descriptiva
android: layout_column	Establecer la posición de visualización de la unidad
android: layout_span	Configure la unidad para que ocupe varias filas, el valor predeterminado es 1 fila

Diseño de FrameLayout

Diseño de marco: Se utiliza para crear un área en blanco en la pantalla. Cada subespacio agregado al área ocupa un marco. Estos marcos se superpondrán uno a uno, y los controles agregados se superpondrán en la capa superior del control anterior.

** Nota: ** Todos los controles se muestran en la esquina superior izquierda de la pantalla de forma predeterminada

Diseño de cuadrícula

Crea un área en blanco. Cada subespacio agregado al área ocupa un marco, estos marcos se superpondrán uno a uno, y los controles agregados se superpondrán en la capa superior del control anterior.

** Nota: ** Todos los controles se muestran en la esquina superior izquierda de la pantalla de forma predeterminada

Diseño de cuadrícula

Administrador de diseño de cuadrícula