Android EditText實現扁平化的登錄界面

2019-10-22 18:21:01

字體：大中小

來源：轉載

供稿：網友

先來看看登錄界面寫完的效果圖

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，大家可以下載完整的項目

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。

注：相關教程知識閱讀請移步到Android開發頻道。

上一篇：Android自定義EditText實現淘寶登錄功能

下一篇：Android高級xml布局之輸入框EditText設計