专栏首页恩蓝脚本Android EditText实现扁平化的登录界面

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

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

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 start, 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,大家可以下载完整的项目

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于popupWindow实现悬浮半透明效果

    本文实例为大家分享了popupWindow实现悬浮半透明效果的具体代码,供大家参考,具体内容如下

    砸漏
  • Android开关控件Switch的使用案例

    在很多app的设置页面,或者是一些功能的开关界面,我们常常用到 Switch(开关) 来展示状态,今天说说Switch控件。

    砸漏
  • Android自定义View实现箭头沿圆转动实例代码

    以上所述是小编给大家介绍的Android自定义View实现箭头沿圆转动实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非...

    砸漏
  • [android] 练习样式主题自定义activity切换动画

    主要练习了自定义样式和主题,继承android系统默认的样式并修改,练习xml定义淡入淡出动画

    陶士涵
  • Android GPS获取当前经纬度坐标

    APP中可能会遇到一种需求,就是将当前所在位置的坐标传到服务器上,今天我提供三种途径去获取经纬度坐标信息,第一种是通过Android API来实现,第二种通过百...

    砸漏
  • Android开发之进度条ProgressBar的示例代码

    ProgressBar一般用于显示一个过程,例如数据加载过程,文件下载进度,音乐播放进度等。

    砸漏
  • 详解Android布局优化

    怎样才能写出优秀的Android App,是每一个程序员追求的目标。那么怎么才能写出一个优秀的App呢?相信很多初学者也会有这种迷茫。一句话来回答这个问题:细节...

    砸漏
  • Android禁止EditText自动弹出软键盘的方法及遇到问题

    一般在AndroidManifest.xml中添加了android:windowSoftInputMode="adjustResize"或者adjustPan的...

    砸漏
  • Android retrofit上传文件实例(包含头像)

    拦截器:https://www.zalou.cn/article/133257.htm

    砸漏
  • Android GradientDrawable(shape标签定义) 静态使用和动态使用(圆角,渐变实现)

    Android GradientDrawable使用优势:   1. 快速实现一些基本图形(线,矩形,圆,椭圆,圆环)   2. 快速实现一些圆角,渐变,阴影等...

    用户1155943

扫码关注云+社区

领取腾讯云代金券