Android EditText——扁平化的登录界面
2017-02-07 16:59
288 查看
在2016年底写了一个小项目,登录界面一开始是自己随便写的,基本看得过去,也凑活能用,然后美工看了一眼,默默地回去做了一张登陆的图丢给我,看完美工的图,我对自己的审美产生了怀疑,,,
没有对比就没有伤害,所以我绝不会放出自己写的登录界面来对(diu)比(ren)。
1.登录界面
2 监听editText,可以一键清空
3 checkBox的颜色统一
- 1.如何一张图片圆形化的展示出来
- 2.整体输入框的布局(输入框中竖线的实现)
- 3.监听edittext是否有输入
- 4.将checkbox的颜色与界面统一
1.如何将一张图片圆形化的展示出来
我是用的是一个开源的项目CircleImageView,它可以用来轻松的实现图片的圆形化
首先在build.gradle中添加依赖
在xml布局中用
2.整体输入框的布局(输入框中竖线的实现)
整个输入框就是常规的ImageView加上textView实现的,分隔图片和提示文字的竖线,需要我们用view自己去写。
“colorCursor”是自己界面的风格
3.监听EditText是否有输入
我先将代码贴出来
首先大家可以从布局中看出删除按钮默认是隐藏的
然后监听EditText的输入事件,输入的内容长度如果大于0,就将删除图标显示出来,并可以清空输入。
上面的代码是一个工具类参考这篇博客–AndroidMsky,这篇博客也写了一个登录的界面。
在程序中调用的代码:
以上就是个登录界面的整体实现,这里只是一个Demo级的例子,大家有更好的实现方法,可以多多交流
如有错误请您不吝赐教。
还有如果你看到这里了,很感谢你,读完我的文章,Android的路上又多了一个可以一起探讨和交流的伙伴。
如要转载请标明MartinDung和原文的链接http://blog.csdn.net/qq_30321715/article/details/54912341,谢谢。
项目地址:https://github.com/DongXUU/LoginDemo,大家可以下载完整的项目
没有对比就没有伤害,所以我绝不会放出自己写的登录界面来对(diu)比(ren)。
登陆界面
先来看看登录界面写完的效果图1.登录界面
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" / c47b > <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自己去写。
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的路上又多了一个可以一起探讨和交流的伙伴。
如要转载请标明MartinDung和原文的链接http://blog.csdn.net/qq_30321715/article/details/54912341,谢谢。
项目地址:https://github.com/DongXUU/LoginDemo,大家可以下载完整的项目
相关文章推荐
- Android基础学习总结(六)——TextInputLayout+EditText 轻松实现登录界面
- Android实战简易教程<三十二>(自定义View登录注册界面EditText-实现一键清空)
- Android自定义EditText实现登录界面
- Android实战简易教程-第三十二枪(自定义View登录注册界面EditText-实现一键清空)
- Android实战简易教程-第三十二枪(自定义View登录注册界面EditText-实现一键清空)
- 【Android 界面效果12】EditText中的多行输入问题
- 关于android textview,edittext,导致界面的卡顿
- [置顶] Android开发之使一打开activity等界面Edittext获取焦点,弹出软键盘java代码实现
- Android EditText实现扁平化的登录界面
- Android中如何取消调转界面后EditText默认获取聚焦问题
- 16-Android界面控件之EditText的一些属性
- android EditText获取焦点后与输入框界面冲突解决方法
- Android开发之使一打开activity等界面Edittext获取焦点,弹出软键盘java代码实现
- Android EditText用户友好的输入界面
- Android之SQLite登录注册与EditText清除功能
- Android 平板 控制软键盘只弹出一半,自动盯着界面中EditText,从而让界面可以自由看全的方法:
- android:使android界面打开时EditText不自动获得焦点
- 自定义Android的EditText实现仿淘宝登录功能
- Android扁平化输入框和按钮(登录界面)
- edittext登录界面,用户名修改,密码自动删除效果