Android自定義view之模仿登陸界面文本輸入框（華爲雲APP）

前言

考覈時間過了才發的哈

---

老規矩最後有源碼

文章目錄

• 前言
• 效果圖
• 一.分析
• 2、步驟
• • 1.自定義一個控件
  • 2.寫一個類似佈局(代碼在最後)
  • 3.將佈局打氣到view中
  • 4.小提示文字上浮下潛動畫
  • 5.密碼加密解密顯示
  • 6.其餘一些小知識點
  • 7.源碼
• 總結

---

效果圖

---

一.分析

1.組合多個控件完成此輸入框靜態效果
2.hint值上浮下潛動畫
3.一些功能

2、步驟

1.自定義一個控件

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);
    }

}

2.寫一個類似佈局(代碼在最後)

//代碼在最後源碼部分

3.將佈局打氣到view中

LayoutInflater.from(context).inflate(R.layout.my_edit_view, this);

4.小提示文字上浮下潛動畫

//小提示文字出現動畫
    private void minTextshow(TextView textView) { 
 
   
        AnimationSet animationSet = new AnimationSet(true);
        Animation mHiddenAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF,
                0.0f, Animation.RELATIVE_TO_SELF, 0.0f,
                Animation.RELATIVE_TO_SELF, 1.0f, Animation.RELATIVE_TO_SELF,
                0.0f);
        Animation alphaAnimation = new AlphaAnimation(0, 1f);
        animationSet.addAnimation(mHiddenAction);
        animationSet.addAnimation(alphaAnimation);
        animationSet.setDuration(300);
        textview.startAnimation(animationSet);
    }

    //小提示文字隱藏動畫
    private void minTexthide(TextView textView) { 
 
   
        AnimationSet animationSet = new AnimationSet(true);
        Animation mShowAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f,
                Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
                0.0f, Animation.RELATIVE_TO_SELF, 1.0f);
        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();
    }

5.密碼加密解密顯示

主要代碼

//設置文字非加密
 HideReturnsTransformationMethod method = HideReturnsTransformationMethod.getInstance();
 edittext.setTransformationMethod(method);
 //設置文字加密
 TransformationMethod method = PasswordTransformationMethod.getInstance();
 edittext.setTransformationMethod(method);

6.其餘一些小知識點

1.將光標移到最後

//將光標移到最後
edittext.setSelection(edittext.getText().toString().length());

2.將鍵盤中的回車和空格去除

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 { 
 
   
                    return null;
                }
            }
        };
        editText.setFilters(new InputFilter[]{ 
 
   filter});
    }

3.給自定義view對外提供一個獲取值的方法

public String getText() { 
 
   
        return edittext.getText().toString();
    }

7.源碼

1.MyEditVIew.java

public class MyEditVIew extends RelativeLayout { 
 
   
    private TextView textview;
    private EditText edittext;
    private boolean mtextisshow;     //文字是否顯示判斷
    private boolean imgisshow;       //圖片是否顯示判斷
    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);
    }
    //打氣佈局，獲取自定義屬性的值
    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);
    }
    //文字輸入監聽以及一些邏輯處理（未優化）
    private void textAddChanged(){ 
 
   
        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) { 
 
   
                        //設置文字非加密
                        HideReturnsTransformationMethod method = HideReturnsTransformationMethod.getInstance();
                        edittext.setTransformationMethod(method);
                        edittext.setSelection(edittext.getText().toString().length());
                    } else { 
 
   
                        //設置文字加密
                        TransformationMethod method = PasswordTransformationMethod.getInstance();
                        edittext.setTransformationMethod(method);
                        //將光標移到最後
                        edittext.setSelection(edittext.getText().toString().length());
                    }
                    if (mtextisshow == false) { 
 
   
                        textview.setText(hintText);
                        minTextshow(textview);
                        iV_clean.setVisibility(VISIBLE);
                        mtextisshow = true;

                    }

                }
            }
        });
    }
    //兩個圖片的點擊事件，加密，清除文字
    private void imageOnClick(){ 
 
   
        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("");
            }
        });
    }
    //小提示文字出現動畫
    private void minTextshow(TextView textView) { 
 
   
        AnimationSet animationSet = new AnimationSet(true);
        Animation mHiddenAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF,
                0.0f, Animation.RELATIVE_TO_SELF, 0.0f,
                Animation.RELATIVE_TO_SELF, 1.0f, Animation.RELATIVE_TO_SELF,
                0.0f);
        Animation alphaAnimation = new AlphaAnimation(0, 1f);
        animationSet.addAnimation(mHiddenAction);
        animationSet.addAnimation(alphaAnimation);
        animationSet.setDuration(300);
        textview.startAnimation(animationSet);
    }

    //小提示文字隱藏動畫
    private void minTexthide(TextView textView) { 
 
   
        AnimationSet animationSet = new AnimationSet(true);
        Animation mShowAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f,
                Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
                0.0f, Animation.RELATIVE_TO_SELF, 1.0f);
        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();
    }

    //將鍵盤中的回車和空格去除
    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 { 
 
   
                    return null;
                }
            }
        };
        editText.setFilters(new InputFilter[]{ 
 
   filter});
    }

    //提供一個可獲取的值
    public String getText() { 
 
   
        return edittext.getText().toString();
    }
}

2.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="密碼"
        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>

3.attrs文件

<declare-styleable name="MyEditVIew">
        <attr name="myhintText" format="string"/>
    </declare-styleable>

總結

但願對您有所幫助，歡迎各位大佬留言點評

本文同步分享在 博客「計蒙不吃魚」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。