前言

考核時間過了才發的哈

老規矩最后有原始碼

文章目錄

前言
效果圖
一.分析
二、步驟
- 1.自定義一個控制元件
- 2.寫一個相似布局(代碼在最后)
- 3.將布局打氣到view中
- 4.小提示文字上浮下潛影片
- 5.密碼加密解密顯示
- 6.其他一些小知識點
- 7.原始碼
總結

效果圖

在這里插入圖片描述

一.分析

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

二、步驟

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>

總結

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/239544.html

標籤：其他

上一篇：Android studio4.1下報錯Failed to open zip file. Gradle‘s dependency cache may be corrupt

下一篇：【大廠訣竅】Android開發3年當了2年咸魚每天CRUD，復習2個月幸運拿下美團offer！

Android自定義view之模仿登錄界面文本輸入框（華為云APP）

前言