Android login interface implementation-supports clear input box and vibration effect, android input box

Source: Internet
Author: User

Android login interface implementation-supports clear input box and vibration effect, android input box
Demo Effect

The main code is as follows:

A custom EditText, used to display clear buttons when there is text:

Import android. content. context; import android. graphics. drawable. drawable; import android. text. editable; import android. text. textWatcher; import android. util. attributeSet; import android. view. motionEvent; import android. view. view; import android. view. animation. animation; import android. view. animation. cycleInterpolator; import android. view. animation. translateAnimation; import android. widget. editText; public cl Ass ClearEditText extends EditText implements View. onFocusChangeListener, TextWatcher {// reference of the delete button private Drawable mClearDrawable; // check whether the control has focus private boolean hasFoucs; public ClearEditText (Context context) {this (context, null );} public ClearEditText (Context context, AttributeSet attrs) {// The constructor is also very important here. Without this attribute, you cannot define this (context, attrs, android. r. attr. editTextStyle);} public ClearEditText (Cont Ext context, AttributeSet attrs, int defStyle) {super (context, attrs, defStyle); init ();} private void init () {// obtain the DrawableRight of EditText, if this parameter is not set, use the default image mClearDrawable = getCompoundDrawables () [2]; if (mClearDrawable = null) {// throw new NullPointerException ("You can add drawableRight attribute in XML"); mClearDrawable = getResources (). getDrawable (R. drawable. selector_ic_delete);} // getIntr InsicWidth () is the width of Drawable on the mobile phone. Therefore, different values are obtained at different resolutions. The key is mClearDrawable. setBounds (0, 0, mClearDrawable. getIntrinsicWidth (), mClearDrawable. getIntrinsicHeight (); // by default, the hidden icon setClearIconVisible (false) is set. // setOnFocusChangeListener (this) is used to set a listener with a changed focus ); // set the listening addTextChangedListener (this);}/*** in the input box because we cannot directly set the click event for EditText, so we use the place where we press it to simulate the Click Event * When we press the position in the EditText width-the distance from the icon to the right of the control-the width of the icon and * Edi Width of tText-even if the distance between the icon and the right of the control is clicked, the vertical direction is not considered */@ Override public boolean onTouchEvent (MotionEvent event) {if (event. getAction () = MotionEvent. ACTION_UP) {if (getCompoundDrawables () [2]! = Null) {boolean touchable = event. getX ()> (getWidth ()-getTotalPaddingRight () & (event. getX () <(getWidth ()-getPaddingRight (); if (touchable) {this. setText ("") ;}} return super. onTouchEvent (event);}/*** when the ClearEditText focus changes, determine the display and hide of the clear icon in the string length settings */@ Override public void onFocusChange (View v, boolean hasFocus) {this. hasFoucs = hasFocus; if (hasFocus) {setClearIconVisible (getT Ext (). length ()> 0) ;}else {setClearIconVisible (false) ;}}/*** sets the display and hide of the clear icon, call setCompoundDrawables to plot it for EditText * @ param visible */protected void setClearIconVisible (boolean visible) {Drawable right = visible? MClearDrawable: null; setCompoundDrawables (getCompoundDrawables () [0], getCompoundDrawables () [1], right, getCompoundDrawables () [3]);} /*** callback method when the content in the input box changes */@ Override public void onTextChanged (CharSequence s, int start, int count, int after) {if (hasFoucs) {setClearIconVisible (s. length ()> 0) ;}}@ Override public void beforeTextChanged (CharSequence s, int start, int count, int after) {}@ Override public void afterTextChanged (Editable s) {}/*** set shaking animation */public void setShakeAnimation () {this. setAnimation (shakeAnimation (5);}/*** shake Animation * @ param counts 1 second shake how many times * @ return */public static Animation shakeAnimation (int counts) {Animation translateAnimation = new TranslateAnimation (0, 10, 0, 0); translateAnimation. setInterpolator (new CycleInterpolator (counts); translateAnimation. setDuration (1000); return translateAnimation ;}}

MainActivity. java mainly refers to the Click Event of a button in a pop-up sentence.

Import android. OS. bundle; import android. view. view; import android. widget. button; import android. widget. toast; import android. app. activity; public class MainActivity extends Activity {private Button btnLogin; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_login); btnLogin = (Button) this. findViewById (R. id. btnLogin);} public void login (View view) {Toast. makeText (this, "login", Toast. LENGTH_LONG ). show ();}}

The layout file is as follows:

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "fill_parent" android: layout_height = "fill_parent" android: background = "# ffffffff" android: orientation = "vertical" android: padding = "4.0dip"> <com. xuliugen. clearedittext. clearEditText android: id = "@ + id/etxtEmail" style = "@ style/editText" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: layout_marginTop = "30347dip" android: drawableLeft = "@ drawable/icon_reg_name" android: drawablePadding = "10.0dip" android: hint = "use email login"/> <com. xuliugen. clearedittext. clearEditText android: id = "@ + id/etxtPwd" style = "@ style/editText" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: layout_marginTop = "2020.dip" android: drawableLeft = "@ drawable/icon_reg_password" android: drawablePadding = "10.0dip" android: hint = "Enter the login password" android: inputType = "textPassword"/> <Button android: id = "@ + id/btnLogin" style = "@ style/bigGreenButton" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: layout_marginTop = "2020.dip" android: onClick = "login" android: text = "login"/> </LinearLayout>

There are also some selector files and image resources:
Bg_btn_style_green.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_enabled="false"><shape android:shape="rectangle">            <corners android:radius="2.0dip" />            <solid android:color="@color/green_btn_color_disable" />        </shape></item>    <item android:state_pressed="true"><shape android:shape="rectangle">            <corners android:radius="2.0dip" />            <solid android:color="@color/green_btn_color_pressed" />        </shape></item>    <item><shape android:shape="rectangle">            <corners android:radius="2.0dip" />            <solid android:color="@color/green_btn_color_normal" />        </shape></item></selector>

Bg_edittext_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/input_bar_bg_active" android:state_focused="true"/>    <item android:drawable="@drawable/input_bar_bg_normal"/></selector>

Free projects:
Http://yunpan.cn/cwWymCEMmgTzp (extract code: 317d)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.