El texto de edición del diseño de la interfaz de usuario de inicio de sesión y registro del usuario de Android (es decir, el cuadro de texto para ingresar el nombre de usuario y la contraseña)

Hola a todos, hoy les traje el diseño de la interfaz de usuario del blog anterior, y hoy es el diseño del cuadro de texto para hacer el cuadro de texto más hermoso y lograr una buena interacción con el usuario.

En la actualidad, existen dos pasos: 1. Obtener el diseño de las dos interfaces. 

2.Haga que el cuadro de texto sea hermoso y tenga un efecto de clic

Déjame mostrarte las representaciones primero: podemos ver que los temas de las dos interfaces son los mismos 

     Características: 1. El borde de EditText está coloreado.

 2. es redondeado

 3. Podemos ver que los colores de los bordes de los dos cuadros de texto para ingresar el número de móvil e ingresar la contraseña son diferentes

(Esto se debe a que cuando hacemos clic en el cuadro de texto, el color del cuadro de texto actual se volverá más oscuro y el color del cuadro de texto desenfocado no cambiará)

                

El primer paso es obtener el código en el diseño.

1. Código de diseño de la interfaz de inicio de sesión

<?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" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/userlogin_logo" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <EditText
            android:id="@+id/signup_phone_num_Edta"
            android:layout_width="match_parent"
            android:layout_height="45dip"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/bg_edittext"
            android:hint="请输入11位手机号"
            android:inputType="number"
            android:paddingLeft="10dip"
            android:singleLine="true"
            android:textColorHint="#AAAAAA" />

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <EditText
                android:id="@+id/signup_pswd_Edta"
                android:layout_width="match_parent"
                android:layout_height="45dip"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:background="@drawable/bg_edittext"
                android:hint="请输入密码"
                android:inputType="textPassword"
                android:paddingLeft="10dip"
                android:singleLine="true"
                android:textColorHint="#AAAAAA" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/iv_hide"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_marginRight="15dp"
                    android:layout_marginTop="13dp"
                    android:padding="14dp"
                    android:src="@drawable/agt" />

                <ImageView
                    android:id="@+id/iv_show"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_marginRight="15dp"
                    android:layout_marginTop="13dp"
                    android:padding="14dp"
                    android:src="@drawable/agu"
                    android:visibility="gone" />
            </LinearLayout>
        </RelativeLayout>

        <Button
            android:id="@+id/signup_Btna"
            android:layout_width="match_parent"
            android:layout_height="45dip"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/shape_button"
            android:gravity="center"
            android:paddingLeft="10dip"
            android:text="登陆"
            android:textColor="#ffffff" />

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="5dp" >

            <CheckBox
                android:id="@+id/cb_passworda"
                android:layout_width="wrap_content"
                android:layout_height="25dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="25dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginLeft="40dp"
                android:gravity="center"
                android:text="记住密码"
                android:textColor="#00868B" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="5dp" >

            <CheckBox
                android:id="@+id/cb_logina"
                android:layout_width="wrap_content"
                android:layout_height="25dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="25dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginLeft="40dp"
                android:gravity="center"
                android:text="自动登录"
                android:textColor="#00868B" />
        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="bottom" >

        <TextView
            android:id="@+id/goto_reg_texta"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="15dp"
            android:layout_marginLeft="25dp"
            android:background="@drawable/main_bt_pressed"
            android:text="账户注册"
            android:textColor="#00868B" />
    </LinearLayout>

</LinearLayout>

2. Código de diseño de la interfaz de registro

<?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" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
         >

        <ImageView
            android:id="@+id/backImgb"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:scaleType="centerInside"
            android:src="@drawable/back_normal" />

        <TextView
            android:id="@+id/registerTextb"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:gravity="center_vertical"
            android:text="注册"
            android:textColor="#00868B"
            android:textSize="20sp" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="8"
        android:orientation="vertical" >

        <EditText
            android:id="@+id/phone_num_Edtb"
            android:layout_width="match_parent"
            android:layout_height="45dip"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/bg_edittext"
            android:hint="手机号"
            android:inputType="number"
            android:padding="10dip"
            android:singleLine="true"
            android:textColorHint="#AAAAAA" />

        <EditText
            android:id="@+id/pswd_Edtb"
            android:layout_width="match_parent"
            android:layout_height="45dip"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/bg_edittext"
            android:hint="6-10位密码"
            android:inputType="textPassword"
            android:padding="10dip"
            android:singleLine="true"
            android:textColorHint="#AAAAAA" />

        <EditText
            android:id="@+id/confirm_pswd_Edtb"
            android:layout_width="match_parent"
            android:layout_height="45dip"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/bg_edittext"
            android:hint="确认密码"
            android:inputType="textPassword"
            android:padding="10dip"
            android:singleLine="true"
            android:textColorHint="#AAAAAA" />

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

            <EditText
                android:id="@+id/verify_Edtb"
                android:layout_width="match_parent"
                android:layout_height="45dip"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="10dp"
                android:layout_weight="1"
                android:background="@drawable/bg_edittext"
                android:hint="验证码"
                android:inputType="number"
                android:padding="5dip"
                android:singleLine="true"
                android:textColorHint="#AAAAAA" />

            <Button
                android:id="@+id/verify_Btnb"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginRight="15dp"
                android:layout_marginTop="10dp"
                android:layout_weight="2"
                android:text="验证码"
                android:textColor="#00868B" />
        </LinearLayout>

        <Button
            android:id="@+id/reg_Btnb"
            android:layout_width="fill_parent"
            android:layout_height="45dip"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/shape_button"
            android:text="注册"
            android:textColor="#fff" />
    </LinearLayout>

</LinearLayout>

El segundo paso es arreglar las esquinas redondeadas y cambiar el color del borde al enfocar

1. (Cualquiera con experiencia en desarrollo puede ver que el diseño del efecto de visualización está en un archivo, es decir, bg_edittext.xml)

2. Hay dos archivos en bg_edittext.xml, bg_edittext_normal (efecto de estado desenfocado) y bg_edittext_focused (efecto de estado enfocado)

   Mira el codigo

1. bg_edittext.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/bg_edittext_normal" android:state_window_focused="false"/>
    <item android:drawable="@drawable/bg_edittext_focused" android:state_focused="true"/>

</selector>

2. bg_edittext_normal

<?xml version="1.0" encoding="UTF-8"?>   
<shape xmlns:android="http://schemas.android.com/apk/res/android">   
    <solid android:color="#FFFFFF" />   
    <corners android:radius="3dip"/>  
    <stroke    
        android:width="1dip"    
        android:color="#BDC7D8" />   
</shape> 

3. bg_edittext_focused

<?xml version="1.0" encoding="UTF-8"?>   
<shape xmlns:android="http://schemas.android.com/apk/res/android">   
    <solid android:color="#FFFFFF" />   
    <corners android:radius="3dip"/>  
    <stroke    
        android:width="1dip"    
        android:color="#728ea3" />   
</shape>  

En la sección anterior, hemos dejado muy claras las esquinas redondeadas. Si no sabe cómo ir al blog anterior para ver

Estoy aquí hoy. Si tiene alguna pregunta, puede dejar un mensaje para ver que regresará

No me gusta el aerosol