EditText 키보드 다음, 완료버튼 등등 만들기(ImeOptions)

EditText 키보드 다음, 완료버튼

 등등 만들기(ImeOptions)

ㆍ이번에는 앱 개발하면서 한번 정도만 알면 되는 

   EditText 키보드 버튼 바꾸는 방법을 알아보겠습니다.

ㆍ어떤 종류에 앱을 만드냐에 따라 다르겠지만 EditText는 

   대부분의 앱에서 들어가기 때문에 한번 정도 슥~~ 

   보는게 좋습니다

일단 xml에서

EditText를 4개 정도

만든 후에 실행시켜보겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="이름" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="나이" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="아이디" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="패스워드" />
</LinearLayout>

뭐 이렇게만

간단히 만들고

실행시켜보겠습니다

위에 보이는 것처럼

키보드에는 엔터 표시가

있습니다.

엔터를 누르면 어떻게 되죠?

예 이렇게 실제와 똑같이

엔터를 누른 효과가 나타나게 됩니다.

여기서

퀴즈 하나를 내보자면

xml에서 속성 한줄만

추가 시키면 엔터버튼에서

다음버튼으로 바꿀수가 있습니다

(마지막 EditText는 완료버튼)

어떤 코드인지 아시나요?

정답은

android:inputType 입니다

위의 기본 코드에서

inputType만 넣게 되면

엔터에서 다음버튼으로 자동으로

바뀌게 됩니다.

그리고 마지막 EditText는

완료버튼으로 바뀝니다

한번 확인해보겠습니다

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:hint="이름" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:hint="나이" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:hint="아이디" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:hint="패스워드" />
</LinearLayout>

이렇게 inputType만 추가 시키고

다시 똑같이 실행시키게 되면

사진이 개판이긴 하지만

이름, 나이, 아이디의 EditText의

엔터버튼이 다음버튼으로

변경된 것을 확인

마지막에 있는 

패스워드 EditText의

엔터버튼은 완료버튼으로

변경된 것을 확인할 수 있습니다

자 일단 여기까지는

어렵지 않습니다.

속성 하나 추가했을 

뿐이니까요

그 다음 많은 사람들이

필요한 부분이

마지막 EditText에서

완료를 눌렀을때

실질적으로 이벤트를

주고 싶어합니다.

예를 들면

로그인 하는 화면에서

심플하게 하나 급하게

만들어보면

이런 화면에서

당연히 로그인이라는

버튼이 따로 있지만

pw EditText에서

완료버튼을 누르면

바로 로그인이 되는 효과가

필요합니다.

필수는 아니지만

 편의를 위해서

거의 모든 앱들은 

이런식으로 만들죠

이런 효과를 위해서

이번에는 java코드에서

몇줄 만들어보겠습니다.

먼저 XML부터

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:hint="id" />
    <EditText
        android:id="@+id/et_pw"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:hint="pw" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="로그인"/>

</LinearLayout>

이런식으로 기본형태만

잡아주시고

자바코드에서는 

아래와 같이

입력해줍니다.

public class MainActivity extends AppCompatActivity
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        EditText et_pw = (EditText)findViewById(R.id.et_pw);
        et_pw.setImeOptions(EditorInfo.IME_ACTION_DONE);
        et_pw.setOnEditorActionListener(new TextView.OnEditorActionListener()
        {
            @Override
            public boolean onEditorAction(TextView v, int actionId, KeyEvent event)
            {
                if(actionId == EditorInfo.IME_ACTION_DONE)
                {
                    Toast.makeText(getApplicationContext(),"로그인 성공",Toast.LENGTH_SHORT).show();
                    return true;
                }
                return false;
            }
        });
    }
}

코드를 보시면

크게 어려운 부분은 없습니다.

setImeOptions으로

완료버튼 설정해주시고

EditorAction 리스너를 달아서

if문으로 조건을 넣어주시면 됩니다

EditText에서 포커스제어도

setNextFocus~같은 코드들이 있지만

전 그냥 대부분

onEditorAction 리스너에서

처리해버립니다.

음 하여튼

위와 같이 코드를 적은후에

완료버튼을 누르면

원하는 이벤트를 발생시킬 수 있습니다.

지금은 그냥 Toast로 띄웠지만

실제로는 어싱크로 서버통신이나 

 기타 검색을 한다는 이벤트라던가

원하는 이벤트를 넣으시면 됩니다.

아!~

참고로 저는

그냥 자주쓰는 

다음, 완료버튼만 

써놨지만

코드에 보면

검색, 이전같은

다양한 버튼들도 많이 있습니다.

et_id.setImeOptions(EditorInfo.IME_ACTION_SEARCH);
et_pw.setImeOptions(EditorInfo.IME_ACTION_PREVIOUS);

이렇게 하면

이런식으로 ~

바꿀 수 있습니다