Cómo diseñar la interfaz de inicio de sesión de Android

Se siente bien ver una interfaz de inicio de sesión en Internet. Déjame compartirla contigo ~ Primero echemos un vistazo a las representaciones:

Además de los botones, gatito y. Logotipo, esta demostración es un material gráfico, el resto de la interfaz de usuario se implementa mediante código.

1. Fondo

El degradado azul del fondo se establece mediante un archivo xml. El código es el siguiente:

background_login.xml

lt;?xml version="1.0" encoding="utf-8"?gt;

lt ;forma xmlns: androgt;

lt; gradiente

android: startColor="#FFACDAE5"

android: endColor="#FF72CAE1"

android: angle="45"

/gt;

lt;

startColor es el valor del color al comienzo del degradado. , endColor es el color al final del valor del degradado, ángulo es el ángulo del degradado. Entre ellos, en # FFACDAE5, FF es el valor Alfa, AC es el valor R de RGB, DA es el valor G de RGB y E5 es el valor B de RGB. Cada valor varía de 00 a FF, es decir, transparencia. , rojo, verde y azul tienen La puntuación varía de 0 a 255. Si desea establecer un color específico, puede ver la configuración en el selector de color de PS.

2. Marco blanco redondeado

El que está en el renderizado no es un marco blanco. De hecho, el marco es blanco, pero el valor de transparencia está configurado y también se realiza. por un archivo xml.

fondo_login_div.xml

lt;?xml version="1.0" encoding="UTF-8"?gt;

lt;shape xmlns:androgt;

lt; solid android: color="#55FFFFFF" /gt;

lt;!--Establecer esquinas redondeadas

Nota: el radio inferior derecho es la parte inferior izquierda esquina y no la esquina inferior derecha? bottomLeftRadius esquina inferior derecha --gt;

lt; corners android: topLeftRadius="10dp" android: topRightRadius="10dp"

android: bottomRightRadius ="10dp" android ：bottomLeftRadius="10dp"/gt;

lt;/shapegt;

3. Diseño de la interfaz

El diseño de la interfaz es bastante simple. , simplemente pégalo directamente Code~

login.xml

lt;?xml version="1.0" encoding="utf-8"?gt;

lt;LinearLayout

xmlns: andro

android: orientación="vertical"

android: layout_width="fill_parent"

android: layout_height="fill_parent "

android: background="@drawable/background_login"gt;

lt;!-- ¿margen interior relleno? layout_margin margen exterior

? android: layout_alignParentTop ¿La posición del diseño está en la parte superior? --gt;

lt; RelativeLayout

? > ? Android: diseño_width="fill_parent"

? Android: diseño_height="wrap_content"

? ="15dip"

? android: background="@drawable/background_login_div_bg" gt;

?--Cuenta--gt; lt; TextView

? Android: diseño_alignParentTop ="true"

Android: diseño?

_marginTop="5dp"

? android: text="@string/login_label_username"

/gt

lt; p> ? android:

? android: layout_width="fill_parent"

? android: layout_height="wrap_content"

? /login_username_hint"

? android:layout_below="@id/login_user_input"

? android:singleLine="true"

? android:inputType="texto "/gt;

lt;!--Texto de contraseña --gt;

lt;TextView

android:

android: layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@id/username_edit"

android:layout_marginTop="3dp"

android: text="@string/login_label_password"

/gt

lt;

android: diseño_width="fill_parent"

android: diseño_height="wrap_content"

android: diseño_below="@id/login_password_input"

android: contraseña="true"

android: singleLine="true"

android: inputType="textPassword" /gt;

lt;!-- Botón de inicio de sesión --gt;

lt; Botón

android:

android: layout_width="wrap_content"

android: layout_height="wrap_content "

android:layout_below="@id/password_edit"

android:layout_alignRight="@id/password_edit"

android:text="@string/ login_label_signin"

android: fondo="@drawable/blue_button" /gt;

lt; /RelativeLayoutgt

?

lt; p> ? android: layout_width="fill_parent"

? android:

android: texto; ="@string/login_register_link"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="15dp"

android: textColor="#888"

android: textColorLink="#FF0066CC" /gt

lt ImageView android: