android登录界面扁平,Android EditText实现扁平化的登录界面
先来看看登录界面写完的效果图
2 监听editText,可以一键清空
3 checkBox的颜色统一
代码
下面,说说如何实现这个界面的,我将代码全部贴出来。
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">
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" />
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" />
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">
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" />
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" />
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" />
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" />
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">
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" />
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" />
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" />
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" />
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" />
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" />
几个重点的问题
从图中可以看出整个布局是从上到下的分布,那我们就按这样的顺讯来分析
1.如何一张图片圆形化的展示出来
2.整体输入框的布局(输入框中竖线的实现)
3.监听edittext是否有输入
4.将checkbox的颜色与界面统一
1.如何将一张图片圆形化的展示出来
我是用的是一个开源的项目CircleImageView,它可以用来轻松的实现图片的圆形化
首先在build.gradle中添加依赖compile 'de.hdodenhof:circleimageview:2.1.0'
在xml布局中用来代替ImageView
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"
"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的路上又多了一个可以一起探讨和交流的伙伴。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
android登录界面扁平,Android EditText实现扁平化的登录界面相关推荐
- 怎么用Android做登录界面,利用Android怎么制作一个APP登录界面
利用Android怎么制作一个APP登录界面 发布时间:2020-12-02 17:09:10 来源:亿速云 阅读:79 作者:Leah 这期内容当中小编将会给大家带来有关利用Android怎么制作一 ...
- android 表格xml,【Android】利用表格布局,Android中xml文件与java的交互制作登录界面...
登录界面是图形编程.网页编程的一个经典而又基础的程序. 在安卓中,如图所示一个基本登录界面: 点击取消按钮就关闭这个程序,点击登录按钮则显示用户输入的用户名与密码. 一.基本布局 这个程序利用到安卓中 ...
- android自动登录简书,Android开发之简单登录界面
用户界面基础 Android系统的四大组件分别是活动(Activity).服务(Service).广播接收器(Broadcast Receiver).内容提供器(Content Provider). ...
- Android菜鸟的成长笔记(3)——给QQ登录界面说So Easy
上一篇:Android菜鸟的成长笔记(2)--第一个Android应用 我们前面已经做了第一个Android应用程序,虽然有点像QQ的登录界面,但是很多地方还是很难看,这一篇咱们来将这个界面做成一个标 ...
- android 登录保存密码,android 如何实现登陆界面的记住密码功能
今天 写了一个有关登录记住密码的列子 其实这个例子的关键使用到了AutoCompleteTextView 以及sharedPreference的两个关键知识点,大家知道 AutoCompleteTex ...
- android登陆页布局,Android布局Skype登录界面实例
郑州app开发Android布局Skype登录界面,下面是布局的代码: {?xml version="1.0" encoding="utf-8"?} {Line ...
- android ui 扁平化,android 自定义标签的使用,实现扁平化UI设计
2014年8月6日11:06:44 android对自定义标签的使用,实现扁平化UI设计: 1.attrs.xml文件中自定义标签 如: //reference指的是是从string.xml引用过来 ...
- android开发实例之minitwitter登录界面 代码,Android实例miniTwitter登录界面
先上效果图: 布局分析:分成三个部分,该Activity是一个无标题的,设置无标题需要在setContentView之前设置,否则会报错: requestWindowFeature(Window.FE ...
- android登录界面居中,Android TextView前加图标垂直居中第一行(仿大众点评购买须知/提示语)...
如上图,需求在每条提示语句前加一个小圆点,我刚看到需求就想到用 android:drawableLeft 来做,可做完发现:当TextView内容为单行的时候是没有问题的,多行的时候,添加的这个dra ...
最新文章
- MPB:山大倪金凤组-白蚁肠道木质纤维素降解细菌的分离与培养
- VS Code修改菜单栏字体大小
- OO第三单元JML总结
- matlab中quat2angle,RPY_Euler_Quaternion_AngleAxis角度转化:Matlab、Python、Halc
- qt 在label上以光标位置进行缩放_缩放|位移|渐变简单动画
- js 字符串、数值之间的转换
- oracle视图用法,oracle视图大全
- EMNLP2020 | 模型压缩系列:BERT-of-Theseus(一种基于模块替换的模型压缩方法)
- Linux 学习之路(一)——Linux 发行版本的选择以及opensuse 13.1 安装
- 树莓派 linux安装中文语言包6,树莓派安装XBMC并让其支持中文,
- 黑金开发板液晶显示图片
- mysql got error 1045_mysqldump 备份的问题Got error: 1045、ERROR 1045 (28000)、Got error: 1449
- android开发转盘按钮,Android中的转盘
- 1000瓶毒药里有1瓶有毒,问需要多少只老鼠能试出来哪瓶有毒
- CPU卡FM1208发卡操作流程(不带密钥验证)
- 高数 | 【定积分、变限积分】【一元函数积分学李林880】 及 巧解例题
- 如何重新修改VHDX硬盘大小?
- iPhone中通过ics来添加农历与天气预报
- ActionListenner
- USB 协议整理 九:USB 协议调试工程说明