Android EditText实现扁平化的登录界面

概述先来看看登录界面写完的效果图2监听editText，可以一键清空3checkBox的颜色统一

先来看看登录界面写完的效果图

2 监听editText，可以一键清空

3 checkBox的颜色统一

代码

下面，说说如何实现这个界面的，我将代码全部贴出来。

<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:ID="@+ID/activity_login" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" androID:background="@color/logoScreenBackground"> <de.hdodenhof.circleimagevIEw.circleimageVIEw  androID:ID="@+ID/iv_icon"  androID:layout_wIDth="90dp"  androID:layout_height="90dp"  androID:layout_centerHorizontal="true"  androID:layout_margintop="60dp"  androID:scaleType="centerCrop"  androID:src="@mipmap/ic_logo" /> <TextVIEw  androID:ID="@+ID/tv_Title"  androID:layout_wIDth="wrap_content"  androID:layout_height="wrap_content"  androID:layout_centerHorizontal="true"  androID:layout_margintop="160dp"  androID:text="AlphaGo"  androID:textcolor="#000"  androID:textSize="23sp"  androID:typeface="monospace" /> <relativeLayout  androID:ID="@+ID/rl_username"  androID:layout_wIDth="wrap_content"  androID:layout_height="wrap_content"  androID:layout_below="@ID/tv_Title"  androID:layout_margintop="40dp"  androID:background="@drawable/rectangle_edittext">  <ImageVIEw   androID:ID="@+ID/iv_userIconname"   androID:layout_wIDth="wrap_content"   androID:layout_height="wrap_content"   androID:layout_centerVertical="true"   androID:paddingBottom="15dp"   androID:paddingleft="30dp"   androID:paddingtop="15dp"   androID:src="@mipmap/ic_edittextuname" />  <VIEw   androID:ID="@+ID/vIEwname"   androID:layout_wIDth="1dip"   androID:layout_height="20dp"   androID:layout_centerVertical="true"   androID:layout_marginleft="10dp"   androID:layout_toRightOf="@ID/iv_userIconname"   androID:background="@color/colorCursor" />  <EditText   androID:ID="@+ID/et_username"   androID:layout_wIDth="match_parent"   androID:layout_height="30dp"   androID:layout_centerVertical="true"   androID:layout_marginleft="10dp"   androID:layout_toRightOf="@ID/vIEwname"   androID:background="@null"   androID:ems="19"   androID:hint=" 用户名"   androID:textcolorHint="@color/colorCursor"   androID:textCursorDrawable="@drawable/color_cursor"   androID:textSize="15sp" />  <ImageVIEw   androID:ID="@+ID/iv_unameClear"   androID:layout_wIDth="wrap_content"   androID:layout_height="wrap_content"   androID:layout_alignParentRight="true"   androID:layout_centerVertical="true"   androID:layout_marginRight="20dp"   androID:src="@mipmap/ic_backspace_grey600_24dp"   androID:visibility="invisible" /> </relativeLayout> <relativeLayout  androID:ID="@+ID/rl_userPassword"  androID:layout_wIDth="wrap_content"  androID:layout_height="wrap_content"  androID:layout_below="@ID/rl_username"  androID:layout_margintop="1dp"  androID:background="@drawable/rectangle_edittext">  <ImageVIEw   androID:ID="@+ID/iv_userIconPwd"   androID:layout_wIDth="wrap_content"   androID:layout_height="wrap_content"   androID:layout_centerVertical="true"   androID:paddingBottom="15dp"   androID:paddingleft="30dp"   androID:paddingtop="15dp"   androID:src="@mipmap/ic_edittextupwd" />  <VIEw   androID:ID="@+ID/vIEwPwd"   androID:layout_wIDth="1dip"   androID:layout_height="20dp"   androID:layout_centerVertical="true"   androID:layout_marginleft="10dp"   androID:layout_toRightOf="@ID/iv_userIconPwd"   androID:background="@color/colorCursor" />  <EditText   androID:ID="@+ID/et_password"   androID:layout_wIDth="match_parent"   androID:layout_height="30dp"   androID:layout_centerVertical="true"   androID:layout_marginleft="10dp"   androID:layout_toRightOf="@ID/vIEwPwd"   androID:background="@null"   androID:drawablepadding="5dp"   androID:ems="19"   androID:hint=" 密码"   androID:inputType="textPassword"   androID:textcolorHint="@color/colorCursor"   androID:textCursorDrawable="@drawable/color_cursor"   androID:textSize="15sp" />  <ImageVIEw   androID:ID="@+ID/iv_pwdClear"   androID:layout_wIDth="wrap_content"   androID:layout_height="wrap_content"   androID:layout_alignParentRight="true"   androID:layout_centerVertical="true"   androID:layout_marginRight="20dp"   androID:src="@mipmap/ic_backspace_grey600_24dp"   androID:visibility="invisible" /> </relativeLayout> <CheckBox  androID:ID="@+ID/cb_checkBox"  androID:layout_wIDth="wrap_content"  androID:layout_height="wrap_content"  androID:layout_below="@ID/rl_userPassword"  androID:layout_centerHorizontal="true"  androID:layout_margintop="20dp"  androID:background="@null"  androID:checked="false"  androID:duplicateParentState="false"  androID:text="记住密码"  androID:textcolor="#666666"  androID:textSize="15sp"  app:buttonTint="@color/colorLoginbutton" /> <button  androID:ID="@+ID/btn_login"  androID:layout_wIDth="340dp"  androID:layout_height="wrap_content"  androID:layout_below="@ID/cb_checkBox"  androID:layout_centerHorizontal="true"  androID:layout_margintop="20dp"  androID:background="@drawable/round_corner_bg"  androID:gravity="center"  androID:padding="10dp"  androID:text="登录"  androID:textcolor="#fff"  androID:textSize="18sp" /></relativeLayout>

几个重点的问题

从图中可以看出整个布局是从上到下的分布，那我们就按这样的顺讯来分析
1.如何一张图片圆形化的展示出来
2.整体输入框的布局（输入框中竖线的实现）
3.监听edittext是否有输入
4.将checkBox的颜色与界面统一

1.如何将一张图片圆形化的展示出来

我是用的是一个开源的项目circleimageVIEw，它可以用来轻松的实现图片的圆形化
首先在build.gradle中添加依赖compile 'de.hdodenhof:circleimagevIEw:2.1.0'
在xml布局中用<de.hdodenhof.circleimagevIEw.circleimageVIEw>来代替ImageVIEw

 <de.hdodenhof.circleimagevIEw.circleimageVIEw  androID:ID="@+ID/iv_icon"  androID:layout_wIDth="90dp"  androID:layout_height="90dp"  androID:layout_centerHorizontal="true"  androID:layout_margintop="60dp"  androID:scaleType="centerCrop"  androID:src="@mipmap/ic_logo" />

2.整体输入框的布局（输入框中竖线的实现）

整个输入框就是常规的ImageVIEw加上textVIEw实现的，分隔图片和提示文字的竖线，需要我们用vIEw自己去写。

<VIEw   androID:ID="@+ID/vIEwPwd"   androID:layout_wIDth="1dip"   androID:layout_height="20dp"   androID:layout_centerVertical="true"   androID:layout_marginleft="10dp"   androID:layout_toRightOf="@ID/iv_userIconPwd"   androID:background="@color/colorCursor" />

这样一条竖线就写好了，距离大小根据你的输入框去调就好。
在写editText的时候要想十分的简洁，需要将背景设置为"@null"，自己去写一个"shape"

<shape xmlns:androID="http://schemas.androID.com/apk/res/androID"> <size androID:wIDth="1dp"/> <solID androID:color="@color/colorCursor"/></shape>

"colorCursor"是自己界面的风格

3.监听EditText是否有输入

我先将代码贴出来

public class EditTextClearTools { public static voID addClearListener(final EditText et,final ImageVIEw iv){  et.addTextChangedListener(new TextWatcher() {   @OverrIDe   public voID beforeTextChanged(CharSequence s,int start,int count,int after) {   }   @OverrIDe   public voID onTextChanged(CharSequence s,int before,int count) {   }   @OverrIDe   public voID afterTextChanged(Editable s) {    //如果有输入内容长度大于0那么显示clear按钮    String str = s + "" ;    if (s.length() > 0){     iv.setVisibility(VIEw.VISIBLE);    }else{     iv.setVisibility(VIEw.INVISIBLE);    }   }  });  iv.setonClickListener(new VIEw.OnClickListener() {   @OverrIDe   public voID onClick(VIEw v) {    et.setText("");   }  }); }}

首先大家可以从布局中看出删除按钮默认是隐藏的androID:visibility="invisible"
然后监听EditText的输入事件，输入的内容长度如果大于0,就将删除图标显示出来，并可以清空输入。
上面的代码是一个工具类参考这篇博客--AndroidMsky，这篇博客也写了一个登录的界面。

在程序中调用的代码：

protected voID onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentVIEw(R.layout.activity_logo_activty);  init(); } private voID init(){  EditText username = (EditText) findVIEwByID(R.ID.et_username);  EditText password = (EditText) findVIEwByID(R.ID.et_password);  ImageVIEw unameClear = (ImageVIEw) findVIEwByID(R.ID.iv_unameClear);  ImageVIEw pwdClear = (ImageVIEw) findVIEwByID(R.ID.iv_pwdClear);  EditTextClearTools.addClearListener(username,unameClear);  EditTextClearTools.addClearListener(password,pwdClear); }

以上就是个登录界面的整体实现，这里只是一个Demo级的例子，大家有更好的实现方法，可以多多交流，如有错误请您不吝赐教。

还有如果你看到这里了，很感谢你，读完我的文章，AndroID的路上又多了一个可以一起探讨和交流的伙伴。

项目地址：https://github.com/DongXUU/LoginDemo，大家可以下载完整的项目

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android EditText实现扁平化的登录界面全部内容，希望文章能够帮你解决Android EditText实现扁平化的登录界面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。