如若做一个精美的Login界面(解决了一EditText自带clear的功能,类似iphone的UITextField)
如果做一个精美的Login界面(解决了一EditText自带clear的功能,类似iphone的UITextField)
Button:
为了捕捉用户点击clear图标的事件,要捕捉onTouch事件,在用户抬起手的时候判断如果手指的坐标在clear的图标那里,就清楚EditText的文字:
代码可以在http://blog.csdn.net/baidu_nod/article/details/37655327下载
先上图:
XML为:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFFFF" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:orientation="vertical" android:layout_gravity="center_horizontal"> <ImageButton android:id="@+id/btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="30dp" android:background="@null" android:layout_gravity="center_horizontal" android:src="@drawable/btn_icon" android:textColor="#0A84BD" android:textSize="16sp" /> <EditText android:id="@+id/custom_edittext" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/btn_margin_left_right" android:layout_marginRight="@dimen/btn_margin_left_right" android:background="@drawable/animation_edit_background" android:gravity="left|center_vertical" android:hint="username" android:layout_marginTop="20dp" android:paddingLeft="10dp" android:paddingRight="10dp" android:maxLength="25" android:textColor="#000000" android:textColorHint="#AEAEAE" android:textSize="16sp" /> <EditText android:id="@+id/password" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/btn_margin_left_right" android:layout_marginRight="@dimen/btn_margin_left_right" android:background="@drawable/animation_edit_background" android:gravity="left|center_vertical" android:hint="password" android:inputType="phone|numberDecimal" android:layout_marginTop="10dp" android:paddingLeft="10dp" android:paddingRight="10dp" android:maxLength="25" android:textColor="#000000" android:textColorHint="#AEAEAE" android:textSize="16sp" /> <Button android:id="@+id/btn_confirm" android:layout_width="fill_parent" android:gravity="center" android:text="确定" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:background="@drawable/button_item_selector" android:textColor="#ffffff" android:textSize="16sp" /> </LinearLayout>
重要的是EditText和Button的样式:
关于EditText:
<shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#FFFFFF" /> <stroke android:width="1dp" android:color="#000000" /> <corners android:radius="@dimen/default_button_radius" /> <padding android:bottom="@dimen/default_button_padding" android:left="@dimen/default_button_padding" android:right="@dimen/default_button_padding" android:top="@dimen/default_button_padding" /> </shape>
Button:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#0A84BD" /> <corners android:radius="@dimen/default_button_radius" /> <padding android:bottom="@dimen/default_button_padding" android:left="@dimen/default_button_padding" android:right="@dimen/default_button_padding" android:top="@dimen/default_button_padding" /> </shape>
让EditText自带clear的功能,可以用在EditText的右侧加入一个clear的小图标来实现:
我们用setCompoundDrawablesWithIntrinsicBounds来做,这个函数是在控件的Left,Top,Right,Button设置图标,很有用:
final int btn_margin_left_right = this.getResources().getDimensionPixelSize(R.dimen.btn_margin_left_right); final EditText custom_edittext = (EditText) findViewById(R.id.custom_edittext); custom_edittext.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void afterTextChanged(Editable s) { } @Override public void onTextChanged(CharSequence s, int start, int before, int count) { if (s.length() > 0) { custom_edittext.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.search_bar_close_btn, 0); } else { custom_edittext.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0); } } });
为了捕捉用户点击clear图标的事件,要捕捉onTouch事件,在用户抬起手的时候判断如果手指的坐标在clear的图标那里,就清楚EditText的文字:
custom_edittext.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { final int DRAWABLE_RIGHT = 2; if(event.getAction() == MotionEvent.ACTION_UP) { Drawable[] compoundDrawables = custom_edittext.getCompoundDrawables(); if(compoundDrawables != null) { Drawable image = compoundDrawables[DRAWABLE_RIGHT]; if(image != null) { int leftMargin = custom_edittext.getRight() - custom_edittext.getPaddingRight() - image.getBounds().width() - btn_margin_left_right; if(event.getX() >= leftMargin) { if (custom_edittext != null && custom_edittext.getEditableText() != null) { custom_edittext.getEditableText().clear(); } } } } } return false; } });
代码可以在http://blog.csdn.net/baidu_nod/article/details/37655327下载