Android中怎么利用EditText实现一个扁平化的登录界面-创新互联

这篇文章给大家介绍Android中怎么利用EditText实现一个扁平化的登录界面,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

创新互联云计算的互联网服务提供商,拥有超过13年的服务器租用、四川移动机房托管、云服务器、网络空间、网站系统开发经验,已先后获得国家工业和信息化部颁发的互联网数据中心业务许可证。专业提供云主机、网络空间、主机域名、VPS主机、云服务器、香港云服务器、免备案服务器等。


 

 

 

  

  

  

  

 

 

  

  

  

  

 

 

 

几个重点的问题

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

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

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

 

2.整体输入框的布局(输入框中竖线的实现)

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

这样一条竖线就写好了,距离大小根据你的输入框去调就好。
在写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);
 }

关于Android中怎么利用EditText实现一个扁平化的登录界面就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


本文标题:Android中怎么利用EditText实现一个扁平化的登录界面-创新互联
URL链接:http://cdiso.cn/article/gijij.html

其他资讯