近几日有些时间。所以想找些效果来研究。逛逛论坛发现 Edittext上面能悬浮文字提示。当EditText在输入的时候出输入框上方 能出现悬浮文字提示。我找了很多资料看了一些论坛。最后被我无意间找到了 有一个自定义的控件:FloatlabeledEdittext 能让嵌套在布局之内的EditText在输入的时候出输入框上方现悬浮文字提示。别急,后面会给大家源码地址的。好东西当然要分享啦!同时感谢原作者无私的分享,后面介绍下怎么用吧!
顺便把效果图贴出来先:
下面是自定义类FloatLabeledEditText 的代码:
1. 主要就给edittext添加addTextChangedListener 监听,有输入文字的时候执行方法setShowHint(final boolean show)判断显示hint文字
package com.eightzero.floatlabelededittext.view;
import com.example.floatlabelededittext.R;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.text.Editable;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.FrameLayout;
import android.widget.TextView;
/**
* 让嵌套在floatlabelededittext布局之内的EditText在输入的时候出输入框上方现悬浮文字提示
* 使用方法 布局文件 EditText 外层套上com.eightzero.floatlabelededittext.view.FloatLabeledEditText 即可
*/
public class FloatLabeledEditText extends FrameLayout {
private static final int DEFAULT_PADDING_LEFT= 2;
private TextView mHintTextView;
private EditText mEditText;
private Context mContext;
public FloatLabeledEditText(Context context) {
super(context);
mContext = context;
}
public FloatLabeledEditText(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
setAttributes(attrs);
}
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public FloatLabeledEditText(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
mContext = context;
setAttributes(attrs);
}
private void setAttributes(AttributeSet attrs) {
mHintTextView = new TextView(mContext);
final TypedArray a = mContext.obtainStyledAttributes(attrs, R.styleable.FloatLabeledEditText);
final int padding = a.getDimensionPixelSize(R.styleable.FloatLabeledEditText_fletPadding, 0);
final int defaultPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_PADDING_LEFT, getResources().getDisplayMetrics());
final int paddingLeft = a.getDimensionPixelSize(R.styleable.FloatLabeledEditText_fletPaddingLeft, defaultPadding);
final int paddingTop = a.getDimensionPixelSize(R.styleable.FloatLabeledEditText_fletPaddingTop, 0);
final int paddingRight = a.getDimensionPixelSize(R.styleable.FloatLabeledEditText_fletPaddingRight, 0);
final int paddingBottom = a.getDimensionPixelSize(R.styleable.FloatLabeledEditText_fletPaddingBottom, 0);
Drawable background = a.getDrawable(R.styleable.FloatLabeledEditText_fletBackground);
if (padding != 0) {
mHintTextView.setPadding(padding, padding, padding, padding);
} else {
mHintTextView.setPadding(paddingLeft, paddingTop, paddingRight, paddingBottom);
}
if (background != null) {
setHintBackground(background);
}
mHintTextView.setTextAppearance(mContext, a.getResourceId(R.styleable.FloatLabeledEditText_fletTextAppearance, android.R.style.TextAppearance_Small));
//Start hidden
mHintTextView.setVisibility(INVISIBLE);
AnimatorProxy.wrap(mHintTextView).setAlpha(0);
addView(mHintTextView, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
a.recycle();
}
@SuppressLint("NewApi")
private void setHintBackground(Drawable background) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
mHintTextView.setBackground(background);
} else {
mHintTextView.setBackgroundDrawable(background);
}
}
@Override
public final void addView(View child, int index, ViewGroup.LayoutParams params) {
if (child instanceof EditText) {
if (mEditText != null) {
throw new IllegalArgumentException("Can only have one Edittext subview");
}
final LayoutParams lp = new LayoutParams(params);
lp.gravity = Gravity.BOTTOM;
lp.topMargin = (int) (mHintTextView.getTextSize() + mHintTextView.getPaddingBottom() + mHintTextView.getPaddingTop());
params = lp;
setEditText((EditText) child);
}
super.addView(child, index, params);
}
private void setEditText(EditText editText) {
mEditText = editText;
mEditText.addTextChangedListener(new TextWatcher() {
@Override
public void afterTextChanged(Editable s) {
setShowHint(!TextUtils.isEmpty(s));
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
});
mEditText.setOnFocusChangeListener(new OnFocusChangeListener() {
@Override
public void onFocusChange(View view, boolean gotFocus) {
onFocusChanged(gotFocus);
}
});
mHintTextView.setText(mEditText.getHint());
if(!TextUtils.isEmpty(mEditText.getText())){
mHintTextView.setVisibility(VISIBLE);
}
}
private void onFocusChanged(boolean gotFocus) {
if (gotFocus && mHintTextView.getVisibility() == VISIBLE) {
ObjectAnimator.ofFloat(mHintTextView, "alpha", 0.33f, 1f).start();
} else if (mHintTextView.getVisibility() == VISIBLE) {
AnimatorProxy.wrap(mHintTextView).setAlpha(1f); //Need this for compat reasons
ObjectAnimator.ofFloat(mHintTextView, "alpha", 1f, 0.33f).start();
}
}
private void setShowHint(final boolean show) {
AnimatorSet animation = null;
if ((mHintTextView.getVisibility() == VISIBLE) && !show) {
animation = new AnimatorSet();
ObjectAnimator move = ObjectAnimator.ofFloat(mHintTextView, "translationY", 0, mHintTextView.getHeight() / 8);
ObjectAnimator fade = ObjectAnimator.ofFloat(mHintTextView, "alpha", 1, 0);
animation.playTogether(move, fade);
} else if ((mHintTextView.getVisibility() != VISIBLE) && show) {
animation = new AnimatorSet();
ObjectAnimator move = ObjectAnimator.ofFloat(mHintTextView, "translationY", mHintTextView.getHeight() / 8, 0);
ObjectAnimator fade;
if (mEditText.isFocused()) {
fade = ObjectAnimator.ofFloat(mHintTextView, "alpha", 0, 1);
} else {
fade = ObjectAnimator.ofFloat(mHintTextView, "alpha", 0, 0.33f);
}
animation.playTogether(move, fade);
}
if (animation != null) {
animation.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
mHintTextView.setVisibility(VISIBLE);
}
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mHintTextView.setVisibility(show ? VISIBLE : INVISIBLE);
AnimatorProxy.wrap(mHintTextView).setAlpha(show ? 1 : 0);
}
});
animation.start();
}
}
public EditText getEditText() {
return mEditText;
}
public void setHint(String hint) {
mEditText.setHint(hint);
mHintTextView.setText(hint);
}
public CharSequence getHint() {
return mHintTextView.getHint();
}
}
使用的方法:
1.在EditText控件的外面放一层自定义控件 FloatLabeledEditText 就可以了
<com.eightzero.floatlabelededittext.view.FloatLabeledEditText
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="This is the hint" />
</com.eightzero.floatlabelededittext.view.FloatLabeledEditText>
<!-- add some padding -->
<com.eightzero.floatlabelededittext.view.FloatLabeledEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
float:fletPadding="10dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username" />
</com.eightzero.floatlabelededittext.view.FloatLabeledEditText>
<!-- password input -->
<com.eightzero.floatlabelededittext.view.FloatLabeledEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
float:fletPaddingBottom="10dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword" />
</com.eightzero.floatlabelededittext.view.FloatLabeledEditText>
<!-- change color of hint text-->
<com.eightzero.floatlabelededittext.view.FloatLabeledEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
float:fletPaddingBottom="10dp"
float:fletTextAppearance="@style/floatlabelededittext">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Styled Hint"
android:inputType="textPassword" />
</com.eightzero.floatlabelededittext.view.FloatLabeledEditText>
我还找到了一个类似的控件是5.0之后出的一个控件 是系统自带的。顺便也分享下吧!原作者的资源也分享出来,可自行下载,在下面。
效果如下:
使用方法就介绍到这。希望能帮到你,我把源码分享出来,有什么问题可以留言,转载请注明出处哦!