EditText의 업글버전?TextInputEditText,TextInputLayout을 써보자

EditText의 업글버전?

(TextInputEditText+TextInputLayout)

을 써보자

ㆍ 이번에는 EditText의 업글버전인 TextInputEditText를

    써보려고 합니다

ㆍ 써보니 hint부분 애니메이션 처리되는게 가장 큰 변화

    같은데 저는 별로 그런걸 안좋아해서 모르겠습니다.

ㆍ 그래도 써서 나쁠건 없으니 다들 한번 써보도록 해요

코드를 짜보기 전에

먼저 완성된 결과를 

보겠습니다.

(그래야 할맛이 나겠죠?)

뭐 힌트가 위로

올라가는게 가장 큽니다.

바로 써보도록 하죠

일단 support.design

라이브러리를 

추가합니다

(혹시 모르시는 분은

이전글:스낵바를 써보자

참고하세요)

그 다음 별 거 없습니다

바로 xml로 뛰어가서

추가 시키면 됩니다.

<android.support.design.widget.TextInputEditText
    android:id="@+id/et_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Id를 입력하세요"
    />

자 이렇게 추가하고

시작했는데..

아쉽게도 위처럼 안됩니다.

우리는 제목에 적었듯이

TextInputEditText의 도우미

역할을 하는

TextInputLayout으로

TextInputEditText를 감싸줘야합니다

바로 이렇게 쓰시면

끝난답니다.

<android.support.design.widget.TextInputLayout
    android:id="@+id/ti_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <android.support.design.widget.TextInputEditText
        android:id="@+id/et_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Id를 입력하세요"
        />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/ti_2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <android.support.design.widget.TextInputEditText
        android:id="@+id/et_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="pw를 입력하세요" />
</android.support.design.widget.TextInputLayout>

하우..

id 좀 제대로 적을걸.

전 저런거 짓는걸

귀찮아해서리..

아무튼 저 코드를

돌려보면

힌트가 위로 쭉

올라가는 모습을

볼 수 있습니다.

자 다음에는

글자수 카운터하는

방법을 알아보겠습니다

아아 (+ 에러메시지도)

이것도 역시

결과물을 먼저 보면

글자를 쓸 때마다

우측 하단에 글자수를

세어줍니다

그리고 에러메시지 조건은

5글자 넘을때 띄우도록 해놨습니다.

이것도 역시

바로 써보도록 하겠습니다.

이번에는 자바코드로 슉

넘어옵니다

자 먼저 setCounterEnabled입니다

사용방법은 

아주 쉽습니다.

이런효과들은 전부

도우미인

TextInputLayout이 해줍니다

선언해주고

.setCounterEnabled(true)하면

끝

코드를 보자면

public class MainActivity extends AppCompatActivity 
{

    TextInputLayout ti_1;
    TextInputLayout ti_2;
    AppCompatEditText et_1;
    AppCompatEditText et_2;

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

        ti_1 = (TextInputLayout) findViewById(R.id.ti_1);
        ti_2 = (TextInputLayout) findViewById(R.id.ti_2);

        et_1 = (AppCompatEditText) findViewById(R.id.et_1);
        et_2 = (AppCompatEditText) findViewById(R.id.et_2);


        ti_1.setCounterEnabled(true);
        ti_2.setCounterEnabled(true);

    }
}

아주 간단하죠?

setCounterEnabled만

넣었습니다

여기까지 하면

아래와 같은 결과를

얻을 수 있습니다.

그런데

위에는 5/100

이런식이었는데

5만 적혀있습니다.

/100을 해주기 위해서는

다음과 같은 코드를 사용합니다

setCounterMaxLength

이것도 역시

마찬가지로

한줄씩만 추가해주면

끝~

.setCounterMaxLength(원하는숫자);

해주면 됩니다.

ti_1.setCounterMaxLength(100);
ti_2.setCounterMaxLength(100);

이런식으로 하면

완성됩니다.

이제 에러메시지를

출력해볼까요?

에러메시지는

아래와 같은 코드를 씁니다

setErrorEnabled, setError

역시 한줄씩만 넣어주시면 됩니다.

setErrorEnabled(true)를 넣어주시면

에러메시지 사용한다는 뜻이고

setError("원하는 text")를 넣어주시면

에러메시지가 출력됩니다

setError같은 경우는

조건에 따라

넣을 위치가 다르겠죠?

버튼을 눌렀을때

에러메시지를 띄울 수 있고

쓰는 도중에 띄울수도 있고

저는 쓰는 도중에 띄우기 위해

TextWatcher를 사용했습니다

완성코드입니다

public class MainActivity extends AppCompatActivity
{

    TextInputLayout ti_1;
    TextInputLayout ti_2;
    AppCompatEditText et_1;
    AppCompatEditText et_2;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ti_1 = (TextInputLayout) findViewById(R.id.ti_1);
        ti_2 = (TextInputLayout) findViewById(R.id.ti_2);

        et_1 = (AppCompatEditText) findViewById(R.id.et_1);
        et_2 = (AppCompatEditText) findViewById(R.id.et_2);

        et_1.addTextChangedListener(idTextWatcher);
        et_2.addTextChangedListener(pwTextWatcher);

        ti_1.setCounterEnabled(true);
        ti_2.setCounterEnabled(true);


        ti_1.setErrorEnabled(true);
        ti_2.setErrorEnabled(true);



        ti_1.setCounterMaxLength(100);
        ti_2.setCounterMaxLength(100);


    }

    TextWatcher idTextWatcher = 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)
        {
            if(s.length()>5) {
                ti_1.setError("error");
            }
            else
            {
                ti_1.setError(null);
            }
        }
    };

    TextWatcher pwTextWatcher = 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)
        {
            if(s.length()>5)
            {
                ti_2.setError("error2");
            }
            else
            {
                ti_2.setError(null);
            }
        }
    };
}

뭐 

TextWatcher는

사용방법이 워낙 다양해서

다 설명할 순 없지만

위에 코드에서는 

s.length()가 5보다 클 때

(여기서 s는 EditText에 있는 글자입니다)

즉 5글자 보다 크면 에러메시지 띄우겠다는

얘기입니다.

5글자 이하이면 .setError(null)값을 넣어줘서

값을 제거했습니다

음 저는 별로 많이 사용할 것 같지 않으니

이 정도선에서 마치도록 하겠습니다