This is the 9th day of my participation in the August More Text Challenge. For details, see:August is more challenging
preface
I feel that the input box of huawei Cloud APP login interface is very good, so I want to imitate one
The source code is available at the end of the article
The renderings are shown below
An analysis of.
- 1. Combine multiple controls to complete the static effect of the input box
- 2. Hint value animation
- 3. Some features
Second, the steps
1. Customize a control
public class MyEditVIew extends RelativeLayout {
public MyEditVIew(Context context) {
super(context,null);
}
public MyEditVIew(Context context, AttributeSet attrs) {
super(context, attrs,0);
}
public MyEditVIew(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); }}Copy the code2. Write a similar layout (code at the end)
// The code is in the last source section
Copy the code3. Pump the layout into the View
LayoutInflater.from(context).inflate(R.layout.my_edit_view, this);
Copy the code4. Prompt text up and down animation
// The prompt text is animated
private void minTextshow(TextView textView) {
AnimationSet animationSet = new AnimationSet(true);
Animation mHiddenAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF,
0.0 f, Animation.RELATIVE_TO_SELF, 0.0 f,
Animation.RELATIVE_TO_SELF, 1.0 f, Animation.RELATIVE_TO_SELF,
0.0 f);
Animation alphaAnimation = new AlphaAnimation(0.1f);
animationSet.addAnimation(mHiddenAction);
animationSet.addAnimation(alphaAnimation);
animationSet.setDuration(300);
textview.startAnimation(animationSet);
}
// The hint text hides the animation
private void minTexthide(TextView textView) {
AnimationSet animationSet = new AnimationSet(true);
Animation mShowAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0 f,
Animation.RELATIVE_TO_SELF, 0.0 f, Animation.RELATIVE_TO_SELF,
0.0 f, Animation.RELATIVE_TO_SELF, 1.0 f);
mShowAction.setRepeatMode(Animation.REVERSE);
Animation alphaAnimation = new AlphaAnimation(1f.0);
animationSet.addAnimation(mShowAction);
animationSet.addAnimation(alphaAnimation);
animationSet.setRepeatMode(Animation.REVERSE);
animationSet.setDuration(300);
textview.startAnimation(animationSet);
CountDownTimer countDownTimer = new CountDownTimer(300.300) {
@Override
public void onTick(long millisUntilFinished) {
}
@Override
public void onFinish() {
textview.setText("");
}
}.start();
}
Copy the code5. Password decryption display TransformationMethod, HideReturnsTransformationMethod
The main code
// Set the text to be unencrypted
HideReturnsTransformationMethod method = HideReturnsTransformationMethod.getInstance();
edittext.setTransformationMethod(method);
// Set text encryption
TransformationMethod method = PasswordTransformationMethod.getInstance();
edittext.setTransformationMethod(method);
Copy the code6. Other tips
1. Move the cursor to the end
// Move the cursor to the end
edittext.setSelection(edittext.getText().toString().length());
Copy the code2. Remove carriage returns and Spaces from the keyboard
public static void setEditTextInputSpace(EditText editText) {
InputFilter filter = new InputFilter() {
@Override
public CharSequence filter(CharSequence source, int start, int end, Spanned dest, int dstart, int dend) {
if (source.equals("") || source.toString().contentEquals("\n")) {
return "";
} else {
returnnull; }}}; editText.setFilters(new InputFilter[]{filter});
}
Copy the code3. Provide a method to retrieve a value from a custom view
public String getText(a) {
return edittext.getText().toString();
}
Copy the code7. The source code
1.MyEditVIew.java
public class MyEditVIew extends RelativeLayout {
private TextView textview;
private EditText edittext;
private boolean mtextisshow; // Check whether the text is displayed
private boolean imgisshow; // Check whether the image is displayed
private String hintText;
private ImageView imageView;
private ImageView iV_clean;
public MyEditVIew(Context context) {
super(context,null);
}
public MyEditVIew(Context context, AttributeSet attrs) {
super(context, attrs,0);
init(context, attrs);
setEditTextInputSpace(edittext);
textAddChanged();
imageOnClick();
}
public MyEditVIew(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
// Pump the layout to get the value of the custom property
private void init(Context context, AttributeSet attrs) {
LayoutInflater.from(context).inflate(R.layout.my_edit_view, this);
textview = findViewById(R.id.textview);
edittext = findViewById(R.id.edittext);
imageView = findViewById(R.id.imageView);
iV_clean=findViewById(R.id.iV_clean);
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.MyEditVIew);
hintText = ta.getString(R.styleable.MyEditVIew_myhintText);
}
// Text input listening and some logic processing (not optimized)
private void textAddChanged(a){
edittext.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) {
int textSum = s.toString().trim().length();
if (textSum == 0) {
if (mtextisshow == true) {
minTexthide(textview);
mtextisshow = false; iV_clean.setVisibility(INVISIBLE); edittext.setHint(hintText); }}else {
if (imgisshow) {
// Set the text to be unencrypted
HideReturnsTransformationMethod method = HideReturnsTransformationMethod.getInstance();
edittext.setTransformationMethod(method);
edittext.setSelection(edittext.getText().toString().length());
} else {
// Set text encryption
TransformationMethod method = PasswordTransformationMethod.getInstance();
edittext.setTransformationMethod(method);
// Move the cursor to the end
edittext.setSelection(edittext.getText().toString().length());
}
if (mtextisshow == false) {
textview.setText(hintText);
minTextshow(textview);
iV_clean.setVisibility(VISIBLE);
mtextisshow = true; }}}}); }// Two image click events, encrypt, clear text
private void imageOnClick(a){
imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (imgisshow) {
imageView.setImageResource(R.mipmap.password_show);
HideReturnsTransformationMethod method = HideReturnsTransformationMethod.getInstance();
edittext.setTransformationMethod(method);
edittext.setSelection(edittext.getText().toString().length());
imgisshow = false;
} else {
imageView.setImageResource(R.mipmap.pwd_invisible);
TransformationMethod method = PasswordTransformationMethod.getInstance();
edittext.setTransformationMethod(method);
edittext.setSelection(edittext.getText().toString().length());
imgisshow = true; }}}); iV_clean.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
edittext.setText(""); }}); }// The prompt text is animated
private void minTextshow(TextView textView) {
AnimationSet animationSet = new AnimationSet(true);
Animation mHiddenAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF,
0.0 f, Animation.RELATIVE_TO_SELF, 0.0 f,
Animation.RELATIVE_TO_SELF, 1.0 f, Animation.RELATIVE_TO_SELF,
0.0 f);
Animation alphaAnimation = new AlphaAnimation(0.1f);
animationSet.addAnimation(mHiddenAction);
animationSet.addAnimation(alphaAnimation);
animationSet.setDuration(300);
textview.startAnimation(animationSet);
}
// The hint text hides the animation
private void minTexthide(TextView textView) {
AnimationSet animationSet = new AnimationSet(true);
Animation mShowAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0 f,
Animation.RELATIVE_TO_SELF, 0.0 f, Animation.RELATIVE_TO_SELF,
0.0 f, Animation.RELATIVE_TO_SELF, 1.0 f);
mShowAction.setRepeatMode(Animation.REVERSE);
Animation alphaAnimation = new AlphaAnimation(1f.0);
animationSet.addAnimation(mShowAction);
animationSet.addAnimation(alphaAnimation);
animationSet.setRepeatMode(Animation.REVERSE);
animationSet.setDuration(300);
textview.startAnimation(animationSet);
CountDownTimer countDownTimer = new CountDownTimer(300.300) {
@Override
public void onTick(long millisUntilFinished) {
}
@Override
public void onFinish() {
textview.setText("");
}
}.start();
}
// Remove carriage returns and Spaces from the keyboard
public static void setEditTextInputSpace(EditText editText) {
InputFilter filter = new InputFilter() {
@Override
public CharSequence filter(CharSequence source, int start, int end, Spanned dest, int dstart, int dend) {
if (source.equals("") || source.toString().contentEquals("\n")) {
return "";
} else {
returnnull; }}}; editText.setFilters(new InputFilter[]{filter});
}
// Provide a reachable value
public String getText(a) {
returnedittext.getText().toString(); }}Copy the code2.my_edit_view.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="4dp"
android:paddingRight="4dp"
>
<TextView
android:id="@+id/textview"
android:textSize="12sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#b1b1b1"
android:layout_marginRight="16dp"
android:layout_marginLeft="16dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="@+id/edittext"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="@null"
android:hint="Password"
android:textSize="22sp"
android:layout_width="0dp"
android:layout_marginLeft="16dp"
android:layout_marginBottom="6dp"
android:lines="1"
/>
<ImageView
android:id="@+id/iV_clean"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/clean"
android:visibility="invisible"
android:layout_marginRight="4dp"/>
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/pwd_invisible"
android:layout_marginRight="16dp"/>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#b1b1b1"
android:layout_marginRight="16dp"
android:layout_marginLeft="16dp"/>
</LinearLayout>
Copy the code3. The attrs file
<declare-styleable name="MyEditVIew">
<attr name="myhintText" format="string"/>
</declare-styleable>
Copy the codeconclusion
Hope to be helpful to you, welcome to leave comments