您好,登錄后才能下訂單哦!
這篇文章給大家介紹Android中怎么利用EditText實(shí)現(xiàn)一個(gè)扁平化的登錄界面,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
<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>
幾個(gè)重點(diǎn)的問(wèn)題
從圖中可以看出整個(gè)布局是從上到下的分布,那我們就按這樣的順訊來(lái)分析
1.如何一張圖片圓形化的展示出來(lái)
2.整體輸入框的布局(輸入框中豎線的實(shí)現(xiàn))
3.監(jiān)聽edittext是否有輸入
4.將checkbox的顏色與界面統(tǒng)一
1.如何將一張圖片圓形化的展示出來(lái)
我是用的是一個(gè)開源的項(xiàng)目CircleImageView,它可以用來(lái)輕松的實(shí)現(xiàn)圖片的圓形化
首先在build.gradle中添加依賴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自己去寫。
<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的時(shí)候要想十分的簡(jiǎn)潔,需要將背景設(shè)置為"@null",自己去寫一個(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)聽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)聽EditText的輸入事件,輸入的內(nèi)容長(zhǎng)度如果大于0,就將刪除圖標(biāo)顯示出來(lái),并可以清空輸入。
上面的代碼是一個(gè)工具類參考這篇博客--AndroidMsky,這篇博客也寫了一個(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); }
關(guān)于Android中怎么利用EditText實(shí)現(xiàn)一個(gè)扁平化的登錄界面就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。