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

最后提供用户图标和密码图标，logo就随便了，别忘了修改文件名