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>

完

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