Android初学者的简单登录,利用外形资源和selector选择器

Android 简单的登录

目标：
Adnroid studio 的效果

---

点击输入框要变色
夜神模拟器上的效果图

---

思路：利用相对布局写成框架，在利用外形资源和selector选择器实现边框圆角，内边距，点击变色等效果。

代码展示过程：只能先展示外形资源和选择器，然后在展示最终骨架不然可能各位看官逻辑会有少许混乱

---

外形资源和选择器的一些常用属性

---

相对布局一些常用属性：

---

新建一个shap(外形资源) et_shap.xml 用在鼠标获得文本框焦点之后

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

    <solid
        android:color="#FF31DAD5"
        ></solid>
<stroke
    android:color="#000"
    android:width="3dp"

    ></stroke>
<padding
    android:top="5dp"
    android:right="10dp"
    android:bottom="5dp"
    android:left="120dp"
    ></padding>

    <corners
        android:radius="15dp"
        ></corners>
</shape>

---

新建一个shap(外形资源) et_shap2.xml 用在鼠标获得文本框焦点之前

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

    <solid
        android:color="#8b7979"
        ></solid>

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

    <stroke
        android:width="1dp"
        android:color="#000"
        ></stroke>
    <padding
        android:top="5dp"
        android:right="10dp"
        android:bottom="5dp"
        android:left="120dp"
        ></padding>

</shape>

---

因为邮箱的外形资源不同所以还要另外的一个外形资源。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
    >
<stroke
    android:width="2dp"
    android:color="#dcd3d3"
    ></stroke>

    <padding
        android:left="120dp"
        ></padding>

</shape>

---

再是选择器 et_selector.xml
选择器里面用两个外形资源
一个是获取焦点的外形资源
另外一个是失去焦点的外形资源

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

    <item
        android:state_focused="true"
        android:drawable="@drawable/et_shap2"
        ></item>

    <item
        android:state_focused="false"
        android:drawable="@drawable/et_shape"
        ></item>
</selector>

最后是布局 activity_home_work.xml

<?xml version="1.0" encoding="utf-8"?>
<!--相对布局-->
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" tools:context="androidstudio.androidfour.HomeWork">
<!---增加一个相对布局-->

    <!--文本框  引用外形资源et_selector-->
    <EditText
        android:id="@+id/et_homeWork_user"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:inputType="text"
        android:hint="请输入用户名"
        android:background="@drawable/et_selector"
        />
    <!---文本视图-->
    <TextView
        android:id="@+id/TV_homework_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableStart="@drawable/icon_user"
        android:text="用户名:"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_marginTop="7dp"
        />







    <!--文本框  引用外形资源et_selector-->
        <EditText
            android:id="@+id/et_homeWork_pwd"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:inputType="text"
            android:hint="请输入密码"
            android:layout_gravity="center"
            android:layout_below="@id/et_homeWork_user"

            android:background="@drawable/et_selector"
            />
    <!---文本视图-->
    <TextView

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableStart="@drawable/icon_user"
        android:text="    密码:"
        android:textSize="20sp"
        android:layout_below="@id/et_homeWork_user"
        android:textStyle="bold"
        android:layout_marginTop="7dp"
        />




    <!--文本框  引用外形资源et_shape_text-->
        <EditText
            android:id="@+id/et_homeWork_email"
            android:layout_below="@id/et_homeWork_pwd"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:inputType="text"
            android:background="@drawable/et_shape_text"
            />

    <!---文本视图-->
    <TextView

        android:layout_below="@id/et_homeWork_pwd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="right|center"
        android:text="          邮箱:"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_marginTop="7dp"
        />
    <!--登录的按钮-->
    <Button
        android:layout_below="@id/et_homeWork_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="登录"
        />

</RelativeLayout>

完

谢谢各位！如有不懂的地方 | 博文有错误的地方 请您评论，万分感激！！！！ 谢谢