android studio 做登陆界面

先来一个最简单的 AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

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

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

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

   AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

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

附加 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"?> #FFBB86FC #FF6200EE #FF3700B3 #FF03DAC5 #FF018786 #FF000000 #FFFFFFFF #FF0000 #333333 #CCCCCC #2196F3 #1976D2 　　colors.xml文件应该放在values文件夹中

background.xml

<?xml version="1.0" encoding="utf-8"?>

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

　　edit_text_bg.xml <?xml version="1.0" encoding="utf-8"?>

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

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

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

　　button_bg.xml <?xml version="1.0" encoding="utf-8"?>

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

　　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

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