Android仿QQ登录界面

Android仿QQ登录界面.

预览效果:

QQ

主要知识点:

1.相对布局|线性布局【RelativeLayout】【LinearLayout】.

2.自定义下划线under_line.

设置输入框的形状shape，边框线颜色stroke以及边框线大小width，圆角大小corners.

3.输入框EditText属性.

4.登录按钮颜色，状态.

层级分析:

该图片来源于

知识点详解:

输入框的外形(下划线):首先在drawable目录下新建一个Rescourse文件under_line，也就是下划线，然后设置shape属性为矩形rectangle，设置corners属性为5dp，圆角的大小是5dp，设置矩形边框的颜色，边框线的宽度，这便完成了对输入框的包装，但它只是类似一个模板或者图片一样的放在那里，真正实现输入QQ账号和密码功能的是EditText.

附上代码

underline

顺便附上颜色属性

color

输入框EditText的使用：

EditText的属性种类很多，下面只列举Demo里会用到的

edittext

第一个属性:alignParentStart 紧贴父元素结束的布局开始（就是左侧对齐）

第二个属性：alignParentTop同理（顶部对齐）

第三个属性：marginEnd距右侧的长度 End同right 用来调整控件与右父元素的位置

第四个属性：hint常作为提示性文字 这里我们提示输入QQ hintColor即使文字颜色

第五个属性：layout_toStartof xx 即是在xx的上方 与xx对齐

第六个属性:inputType输入样式 大家可以试一下 number textpassword的区别

第七个属性：不可长时间点击

注：由于EditView自带下划线 而且会与我们自定义的下划线不重合 所以不好看 故使用下面方法除去原有的下划线 

原有下划线

而自定义的下划线则通过在 父元素RelativeLayout 中使用

xml配置颜色状态：

登录按钮 大家注意background是自己配置的

loginbutton

1.login_button_press按下状态的xml文件

主要设置了圆角属性和颜色 下同理 只是颜色不同 区分按下和正常状态

.login_button_press

2.login_button_normal正常状态的xml文件

.login_button_normal

3.login_button按钮的最终Xml文件

设置了foucused聚焦属性，即是当鼠标停留在按钮上时被激活 

login_button

附上源码和资源文件:注：借鉴的网上的人