【移動應用開發(fā)技術(shù)】Android中怎么利用EditText實現(xiàn)一個扁平化的登錄界面

【移動應用開發(fā)技術(shù)】Android中怎么利用EditText實現(xiàn)一個扁平化的登錄界面

這篇文章給大家介紹Android中怎么利用EditText實現(xiàn)一個扁平化的登錄界面，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。<RelativeLayout

xmlns:android="/apk/res/android"

xmlns:app="/apk/res-auto"

xmlns:tools="/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.整體輸入框的布局（輸入框中豎線的實現(xiàn)）3.監(jiān)聽edittext是否有輸入4.將checkbox的顏色與界面統(tǒng)一1.如何將一張圖片圓形化的展示出來我是用的是一個開源的項目CircleImageView，它可以用來輕松的實現(xiàn)圖片的圓形化首先在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.整體輸入框的布局（輸入框中豎線的實現(xiàn)）整個輸入框就是常規(guī)的ImageView加上textView實現(xiàn)的，分隔圖片和提示文字的豎線，需要我們用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"

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

xmlns:android="/apk/res/android">

<size

android:width="1dp"/>

<solid

android:color="@color/colorCursor"/>

</shape>"colorCursor"是自己界面的風格3.監(jiān)聽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)

{

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

}

});

}

}首先大家可以從布局中看出刪除按鈕默認是隱藏的androi