使用AndroidStudio设计一个简单的登录界面

设计一个简单登录界面

基于AndroidStudio 4.0.1 版本：

---

前言

使用线性布局以及相对布局来设计一个简单的登录界面。

---

一、效果图

示例：使用线性以及相对布局设计一个简单的登录界面：

二、设计步骤

1.打开AndroidStudio新建一个Activity

我这边新建的Activity是LoginActivity.java和activity_login.xml

步骤如下（示例）：

2.开始设计登录界面

代码如下（示例）：

注意：因为我在activity_login.xml中对两个输入框以及Button进行了样式设置，所以最后3块的代码是提供给activity_login.xml引用的。

activity_login.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:layout_gravity="center" //当前控件相对于父控件的位置
    android:gravity="center"> //当前控件内的控件相对于当前控件的位置

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" //设置布局排列方式
        android:padding="20dp"> //设置内边距为20dp

        <EditText
            android:id="@+id/name" //设置id
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/et_edt1" //引用资源文件et_edt1设置外边框
            android:hint="手机号：" //提示信息
            android:padding="10dp"
            android:textSize="24sp"></EditText> //设置文字大小

        <EditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/name" //该EditText位于id为name的下面
            android:layout_marginTop="10dp" //上外边距为10dp
            android:background="@drawable/et_edt2" //引用资源文件et_edt2设置外边框
            android:hint="密码："
            android:padding="10dp"
            android:textSize="24sp"></EditText>


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/password"
            android:layout_marginTop="10dp"
            android:orientation="horizontal">

            <Button
                android:id="@+id/reg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="150dp"
                android:background="@drawable/bg_btn_style_red"
                android:onClick="reg"
                android:text="注册"></Button>

            <Button
                android:id="@+id/login"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/reg"
                android:background="@drawable/bg_btn_style_red" //设置背景色
                android:onClick="login"
                android:text="登录"></Button>
        </RelativeLayout>


        <RadioGroup
            android:id="@+id/rg_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="200dp"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/rb_man"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="男"></RadioButton>

            <RadioButton
                android:id="@+id/rb_woman"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="女"></RadioButton>
        </RadioGroup>
    </RelativeLayout>

</LinearLayout>

et_edt1.xmll代码如下（示例）：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="3dp"
        android:color="#ffff5454"></stroke>
    <corners android:radius="10dp" />

</shape>

et_edt2.xmll代码如下（示例）：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="3dp"
        android:color="#ffff5454"></stroke>
    <corners android:radius="10dp" />

</shape>

bg_btn_style_red.xml代码如下（示例）：

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

<selector
        xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <corners android:radius="8dp" />
            <solid android:color="#7fff5454" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:radius="8dp" />
            <solid android:color="#ffd24242" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="8dp" />
            <solid android:color="#ffff5454" />
        </shape>
    </item>
</selector>

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了线性布局、相对布局以及相应属性的使用。