android studio 做登陆界面

先来一个最简单的 AndroidManifest.xml

<?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"
    android:padding="16dp">

    <EditText
        android:id="@+id/edit_text_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Username" />

    <EditText
        android:id="@+id/edit_text_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/button_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Log in" />

</LinearLayout>

这个没有背景什么的，特别简陋。

接着又写了一个稍微花哨点的。

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background">

    <ImageView
        android:id="@+id/image_logo"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="72dp"
        android:src="@drawable/logo" />

    <EditText
        android:id="@+id/edit_text_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/image_logo"
        android:layout_marginHorizontal="24dp"
        android:layout_marginTop="48dp"
        android:background="@drawable/edit_text_bg"
        android:drawableLeft="@drawable/ic_user"
        android:drawablePadding="16dp"
        android:hint="Username"
        android:padding="16dp"
        android:textColor="@color/dark_gray"
        android:textColorHint="@color/light_gray" />

    <EditText
        android:id="@+id/edit_text_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/edit_text_username"
        android:layout_marginHorizontal="24dp"
        android:background="@drawable/edit_text_bg"
        android:drawableLeft="@drawable/ic_password"
        android:drawablePadding="16dp"
        android:hint="Password"
        android:inputType="textPassword"
        android:padding="16dp"
        android:textColor="@color/dark_gray"
        android:textColorHint="@color/light_gray" />

    <Button
        android:id="@+id/button_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/edit_text_password"
        android:layout_marginHorizontal="24dp"
        android:layout_marginTop="36dp"
        android:background="@drawable/button_bg"
        android:text="Log in"
        android:textColor="@color/white" />

</RelativeLayout>

附加 edit_text_bg.xml，button_bg.xml，colors.xml，background.xml、edit_text_bg.xml、button_bg.xml

　　colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="red">#FF0000</color>
    <color name="dark_gray">#333333</color>
    <color name="light_gray">#CCCCCC</color>
    <color name="button_bg_normal">#2196F3</color>
    <color name="button_bg_pressed">#1976D2</color>
</resources>

　　colors.xml文件应该放在values文件夹中

　　background.xml

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

    <gradient
        android:startColor="#FFC107"
        android:endColor="#FF9800"
        android:type="linear" />

</shape>

　　edit_text_bg.xml

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

    <solid android:color="@color/white" />

    <corners android:radius="8dp" />

    <stroke
        android:width="1dp"
        android:color="@color/light_gray" />

</shape>

　　button_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <gradient
                android:startColor="@color/button_bg_pressed"
                android:endColor="@color/button_bg_normal"
                android:angle="270" />

            <corners android:radius="8dp" />

            <padding
                android:left="16dp"
                android:top="12dp"
                android:right="16dp"
                android:bottom="12dp" />
        </shape>
    </item>

    <item>
        <shape>
            <gradient
                android:startColor="@color/button_bg_normal"
                android:endColor="@color/button_bg_normal"
                android:angle="270" />

            <corners android:radius="8dp" />

            <padding
                android:left="16dp"
                android:top="12dp"
                android:right="16dp"
                android:bottom="12dp" />
        </shape>
    </item>
</selector>

　　background.xml，edit_text_bg.xml和button_bg.xml文件应该放在drawable文件夹中

最后由三张图片，分别是logo，用户图标，密码图标。

　　logo.png

在drawable文件夹中放置一张适当大小的Logo图片即可。

　　ic_user.png

在drawable文件夹中放置一张适当大小的用户图标图片即可。

　　ic_password.png

在drawable文件夹中放置一张适当大小的密码图标图片即可。

最后想让账号只能使用11位手机号，只需替代部分EditText

<EditText
    android:id="@+id/et_phone_number"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/phone_number"
    android:inputType="phone"
    android:maxLength="11"
    android:maxLines="1"
    android:textColor="@color/black"
    android:textColorHint="@color/gray"
    android:textSize="16sp" />