diseño de la interfaz de Android

EDITORIAL

Hemos introducido una estructura de archivos Android App del proyecto y el significado aproximado de cada archivo, esta parte se describe el diseño de la interfaz de Android (Diseño). El objetivo de la disposición de la interfaz de Android para el uso racional del espacio en la pantalla y puede adaptarse a la pantalla múltiple. Podemos utilizar para diseñar el trazado de la posición de cada dispositivo de control.
Android proporciona seis clase de disposición básico: Disposición de marco (FrameLayout), la disposición lineal (LinearLayout), disposición absoluta (AbsoluteLayout), la disposición relativa (RelativeLayout), diseño de la mesa (la TableLayout) y un diseño de cuadrícula (GridLayout). Además, Android también introdujo un nuevo diseño: ConstraintLayout. Algunos, como el diseño de disposición absoluta utilizar menos papel únicos puntos para la disposición lineal y el diseño relativa y otro diseño común, no hay tiempo para otra disposición de llenado.

Un diseño

diseño de marcos FrameLayout es un diseño simple. Con esta disposición, todos los puntos de vista y los controles se fijan a la esquina superior izquierda de la pantalla, y la vista no se puede especificar la ubicación del control, pero permite la superposición de una pluralidad de puntos de vista y controles, diseño de marcos rara vez se utilizan directamente, pero el uso de ella subclase, como TextSwitcher, ImageSwitcher y ScrollView.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="300dp"
        android:layout_height="197dp"
        tools:srcCompat="@tools:sample/backgrounds/scenic" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="163dp"
        android:layout_height="114dp"
        tools:srcCompat="@tools:sample/backgrounds/scenic[1]" />
</FrameLayout>

resultados de la simulación diseño son las siguientes:

Se inserta directamente en los dos FrameLayout ImageView, que por defecto a la esquina superior izquierda de la disposición y la ubicación no se puede ajustar, el segundo ImageView superpuesta encima de la primera. FrameLayout y otras disposiciones, ya que hay layout_width y layout_height dos propiedades.

Linear Layout 2

disposición lineal se usa más comúnmente como una disposición, en la que permite la disposición vertical o vista de disposición horizontal. Generalmente, diseños complejos lineales diseño se realiza mediante anidada. Al establecer la orientación propiedad a dirección de disposición de conjunto, Android: orientación = "vertical" está dispuesto verticalmente; Android: orientación = "horizontal" está dispuesto horizontalmente.

2,1 usando un diseño lineal para lograr la pantalla de inicio de sesión

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="线性布局实例"
        android:textSize="24sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:text="用户名："
            android:textSize="24sp" />

        <EditText
            android:id="@+id/editText"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="Name" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView3"
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:text="密码："
            android:textSize="24sp" />

        <EditText
            android:id="@+id/editText2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="password" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="登录" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="注册" />
    </LinearLayout>
</LinearLayout>

Aquí directamente en un gran trazado lineal vertical que añadir la disposición lineal de tres niveles, para lograr la muñeca . Por último, la atención especial aquí una disposición lineal ". 1" : Android la layout_weight = , este atributo se utiliza para ajustar los pesos controles linealmente de disposición varios proporción en peso; atributos layout_height layout_width y los respectivos pequeño control wrap_content y match_parent se refiere al control la anchura / altura, o el propio contenido que comprende el control de los padres de llenado. Pero demasiado anidado va a consumir una gran cantidad de recursos del sistema, y aparecerá estructura complicada, es posible utilizar un diseño lineal junto con la disposición relativa.

3 disposición relativa

Un diseño de la disposición relativa es de uso común, lo que permite una vista de la ubicación especificada con relación a otra vista padre o la vista. Puede ser alineado a la izquierda, o alineado intermedio la vista padre verticalmente dispuesta. Del mismo modo, damos un ejemplo.

3.1 Uso disposición relativa para lograr la pantalla de inicio de sesión

Aún por encima de la implementación de la interfaz de inicio de sesión utilizando una disposición relativa a problemas un poco.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="相对布局"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/user"
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_below="@id/title"
        android:gravity="center_vertical"
        android:text="用户名:"
        android:textSize="24sp" />

    <EditText
        android:id="@+id/editText3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/user"
        android:layout_alignParentEnd="true"
        android:layout_toRightOf="@id/user"
        android:inputType="textPersonName"
        android:text="Name" />

    <TextView
        android:id="@+id/password"
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_below="@id/user"
        android:gravity="center_vertical"
        android:text="密  码："
        android:textSize="24sp" />

    <EditText
        android:id="@+id/editText4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/password"
        android:layout_alignParentEnd="true"
        android:layout_toRightOf="@id/password"
        android:ems="10"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/password"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="90dp"
        android:layout_marginTop="20dp"
        android:text="登录" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/button3"
        android:layout_marginLeft="45dp"
        android:layout_toRightOf="@id/button3"
        android:text="注册" />
</RelativeLayout>

Figura efecto logra:

aquí se centra en el uso de varios atributos:
1. posicionado de acuerdo con el contenedor primario (Fig. Fuente: Tutorial novato del RelativeLayout https://www.runoob.com/w3cnote/android-tutorial-relativelayout.html ) :

popular decir que puede seleccionar directamente sus posiciones relativas en el recipiente de matriz, tales como: android: layout_alignParentEnd = "true" y android: layout_centerVertical = "true", respectivamente: y el control de los padres alineado a la derecha , centrada verticalmente en el control de los padres , otros comandos también están disponibles en.
2. De acuerdo con otro diseño de control :
que pueden ser seleccionados y otros control similar para seleccionar la alineación , la orientación relativa y similares, como androide: layout_below = "@ id / contraseña" y android: layout_alignTop = "@ id / user" representa dos comandos: el siguiente es el control @id , y los controles de la parte superior @Id alineado , otros comandos y así sucesivamente.

4 Resumen

Este documento se centra en diseño de la interfaz varios describe Android brevemente, donde los dos diseño más común para la disposición lineal (el LinearLayout) y la colocación relativa (la RelativeLayout) , también descrito en este documento se centran en, sobre el diseño de la interfaz de Android es Android un paso esencial en el desarrollo.