Android EditText實(shí)現(xiàn)扁平化的登錄界面

更新時(shí)間：2017年12月07日 11:30:26 作者：MartinDong

這篇文章主要為大家詳細(xì)介紹了Android EditText實(shí)現(xiàn)扁平化的登錄界面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

先來(lái)看看登錄界面寫(xiě)完的效果圖

2 監(jiān)聽(tīng)editText，可以一鍵清空

3 checkBox的顏色統(tǒng)一

代碼

下面，說(shuō)說(shuō)如何實(shí)現(xiàn)這個(gè)界面的，我將代碼全部貼出來(lái)。

<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=" 用戶(hù)名"
   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>

幾個(gè)重點(diǎn)的問(wèn)題

從圖中可以看出整個(gè)布局是從上到下的分布，那我們就按這樣的順訊來(lái)分析
1.如何一張圖片圓形化的展示出來(lái)
2.整體輸入框的布局（輸入框中豎線的實(shí)現(xiàn)）
3.監(jiān)聽(tīng)edittext是否有輸入
4.將checkbox的顏色與界面統(tǒng)一

1.如何將一張圖片圓形化的展示出來(lái)

我是用的是一個(gè)開(kāi)源的項(xiàng)目CircleImageView，它可以用來(lái)輕松的實(shí)現(xiàn)圖片的圓形化
首先在build.gradle中添加依賴(lài)compile 'de.hdodenhof:circleimageview:2.1.0'
在xml布局中用<de.hdodenhof.circleimageview.CircleImageView>來(lái)代替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.整體輸入框的布局（輸入框中豎線的實(shí)現(xiàn)）

整個(gè)輸入框就是常規(guī)的ImageView加上textView實(shí)現(xiàn)的，分隔圖片和提示文字的豎線，需要我們用view自己去寫(xiě)。

<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" />

這樣一條豎線就寫(xiě)好了，距離大小根據(jù)你的輸入框去調(diào)就好。
在寫(xiě)editText的時(shí)候要想十分的簡(jiǎn)潔，需要將背景設(shè)置為"@null"，自己去寫(xiě)一個(gè)"shape"

<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <size android:width="1dp"/>
 <solid android:color="@color/colorCursor"/>
</shape>

"colorCursor"是自己界面的風(fēng)格

3.監(jiān)聽(tīng)EditText是否有輸入

我先將代碼貼出來(lái)

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) {
    //如果有輸入內(nèi)容長(zhǎng)度大于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("");
   }
  });
 }

}

首先大家可以從布局中看出刪除按鈕默認(rèn)是隱藏的android:visibility="invisible"
然后監(jiān)聽(tīng)EditText的輸入事件，輸入的內(nèi)容長(zhǎng)度如果大于0,就將刪除圖標(biāo)顯示出來(lái)，并可以清空輸入。
上面的代碼是一個(gè)工具類(lèi)參考這篇博客--AndroidMsky，這篇博客也寫(xiě)了一個(gè)登錄的界面。

在程序中調(diào)用的代碼：

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);
 }

以上就是個(gè)登錄界面的整體實(shí)現(xiàn)，這里只是一個(gè)Demo級(jí)的例子，大家有更好的實(shí)現(xiàn)方法，可以多多交流，如有錯(cuò)誤請(qǐng)您不吝賜教。

還有如果你看到這里了，很感謝你，讀完我的文章，Android的路上又多了一個(gè)可以一起探討和交流的伙伴。

項(xiàng)目地址：https://github.com/DongXUU/LoginDemo，大家可以下載完整的項(xiàng)目

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: