Android EditText 아이폰 X버튼 만들기

이번에 만들어 볼 예제는

아이폰 입력창에 기본적으로 제공되는 삭제버튼을 만들어 볼 예정입니다.

안드로이드는 없지만 아이폰에서는 기본적으로 제공을 해주는 기능인데,

한 번 써본 사람은 굉장히 편한 기능이라는 것을 알 수 있습니다.

소스코드 또한 그렇게 복잡하지 않고, 레이아웃에 EditText와 Button 하나를 만들어놓고,

EditText안에 내용이 들어갈 경우 X버튼이 보이게 하고, 

내용이 없을 경우엔 버튼을 다시 안보이게 하는 것입니다.

처음으로 EditText와 Button을 세팅할 xml 코드부터 보겠습니다.

clearable_edit_text.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="wrap_content">

    <EditText
        android:id="@+id/clearable_edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingRight="35dip"/>

    <Button
        android:id="@+id/clearable_button_clear"
        android:layout_width="30dip"
        android:layout_height="30dip"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="5dip"
        android:background="@drawable/image_clear"/>

</RelativeLayout>

RelativeLayout을 사용하여 EditText 안 오른쪽에 Button을 하나 만들어놓은 형태입니다.

다음은 기능적인 부분을 코딩할 java코드입니다.

ClearableEditText.java

package com.project9.iphonexbutton;

import android.content.Context;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RelativeLayout;

/**
 * Created by TonyChoi on 2016. 4. 4..
 */
public class ClearableEditText extends RelativeLayout {

    LayoutInflater inflater = null;
    EditText editText;
    Button btnClear;

    public ClearableEditText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setLayout();
    }

    public ClearableEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        setLayout();
    }

    public ClearableEditText(Context context) {
        super(context);
        setLayout();
    }

    private void setLayout() {
        //레이아웃을 설정
        inflater = (LayoutInflater) getContext().getSystemService(
                Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.clearable_edit_text, this, true);

        editText = (EditText) findViewById(R.id.clearable_edit);
        btnClear = (Button) findViewById(R.id.clearable_button_clear);
        btnClear.setVisibility(RelativeLayout.INVISIBLE);

        clearText();
        showHideClearButton();
    }

    //X버튼이 나타났다 사라지게하는 메소드
    private void showHideClearButton() {
        //TextWatcher를 사용해 에디트 텍스트 내용이 변경 될 때 동작할 코드를 입력
        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) {
                if (s.length() > 0) {
                    btnClear.setVisibility(RelativeLayout.VISIBLE);
                } else {
                    btnClear.setVisibility(RelativeLayout.INVISIBLE);
                }
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
    }

    //에디트 텍스트의 내용을 없애는 메소드
    private void clearText() {
        btnClear.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                editText.setText("");
            }
        });
    }

    //메소드 호출 시 에디트 텍스트 내용을 받아올 수 있는 메소드도 만들어놓는다
    public Editable getText() {
        Editable text = editText.getText();
        return text;
    }
}

코드에 대한 자세한 내용은 주석처리 해 놓았고, 코드 자체가 간결하여 보기 쉬울 것 같습니다.

이번엔 MainActivity에 지금까지 작성한 코드를 불러오는 법을 보겠습니다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.project9.iphonexbutton.MainActivity">

    <com.project9.iphonexbutton.ClearableEditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        />
</RelativeLayout>

일반적으로 EditText를 불러오는 것이 아닌, 작성해놓은 클래스를 불러옴으로써 여태 작성한 기능을 클래스화 시켜 

한번에 불러오는 것입니다.

마지막으로 메인 액티비티입니다.

따로 코딩한 것은 없지만, findviewbyid를 할 때 EditText가 아닌 ClearableEditText를 명시해야한다는 것을 보여주기 위해 코드를 올렸습니다. 

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ClearableEditText editText = (ClearableEditText)findViewById(R.id.clear_text);
    }
}

동작화면을 스크린샷으로 찍어 올려보았습니다.

보시는 바와 같이 EditText 안에 내용이 있을 때 오른쪽에 X버튼이 생기고, 그 버튼을 누르게 되면 Text가 다 사라지게 되는 것입니다.

IphoneXButton.zip

출처 : 

https://arunbadole1209.wordpress.com/2011/12/16/how-to-create-edittext-with-crossx-button-at-end-of-it/

http://dakehosu.tistory.com/72