Le texte édité de la conception de l'interface utilisateur de connexion et d'enregistrement de l'utilisateur Android (c'est-à-dire la zone de texte pour saisir le nom d'utilisateur et le mot de passe)

Bonjour à tous, aujourd'hui, j'ai apporté la conception de l'interface utilisateur du blog précédent, et aujourd'hui la conception de la zone de texte pour rendre la zone de texte plus belle et poursuivre une bonne interaction utilisateur.

Il y a deux étapes aujourd'hui: 1. Obtenir la disposition des deux interfaces 

2.Rendez la zone de texte belle et ayez un effet de clic

Laissez-moi vous montrer d'abord les rendus: on voit que les thèmes des deux interfaces sont les mêmes 

     Caractéristiques: 1. La bordure de EditText est colorée

 2. est arrondi

 3. Nous pouvons voir que les couleurs de bordure des deux zones de texte pour saisir le numéro de portable et saisir le mot de passe sont différentes

(En effet, lorsque nous cliquons sur la zone de texte, la couleur de la zone de texte actuelle deviendra plus sombre et la couleur de la zone de texte floue ne changera pas)

                

La première étape consiste à obtenir le code sur la mise en page

1. Code de disposition de l'interface de connexion

<?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. Code de disposition de l'interface d'enregistrement

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

La deuxième étape consiste à fixer les coins arrondis et à changer la couleur de la bordure lors de la mise au point

1. (Toute personne ayant de l'expérience en développement peut voir que la conception de l'effet d'affichage est dans un seul fichier, c'est-à-dire bg_edittext.xml)

2. Il y a deux fichiers dans bg_edittext.xml, bg_edittext_normal (effet d'état non focalisé) et bg_edittext_focused (effet d'état focalisé)

   Regardez le code

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>  

Dans la section précédente, nous avons rendu les coins arrondis très clairs. Si vous ne savez pas comment accéder au blog précédent pour voir

Je suis ici aujourd'hui. Si vous avez des questions, vous pouvez laisser un message pour voir que vous reviendrez

Je n'aime pas le spray