Android Studio는 layout을 만들 떄 Code로 작성하는 것 외에도 Design을 제공합니다. 오늘은 Design에서 제공되는 Palette에는 어떤 것들이 있는지 살펴보겠습니다.
Text
TextView
TextView는 사용자에게 글을 보여줄 수 있는 요소입니다.
Plain Text (Edit Text)
Plain Text는 TextView와 거의 동일하나 가장 큰 차이점은 사용자가 입력값을 넣을 수 있다는 것 입니다. 위에 사진을 보시면 이름 옆에 AB와 AB가 보일 것입니다. 밑줄의 의미는 수정이 가능하다라는 의미로 받아들이시면 되겠습니다.
그렇다면 Plain Text 밑으로 Number(Decimal)까지 모두 수정가능한 Text라는 것을 알 수 있습니다.
위 사진은 실제로 TextView부터 Number (Decimal)까지 구현한 사진입니다. Text View를 제외하고 모두 비슷하게 생긴 것을 알 수 있습니다. 또한 다른 텍스트들을 선택했을 시 키패드가 다르게 구현되는 것을 알 수 있습니다. 그럼 코드를 한번 보겠습니다.
<!-- Plain Text xml Code --> <EditText android:id="@+id/editTextTextPersonName2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="10" android:hint="Plain text" android:inputType="textPersonName" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@id/Hello_world" app:layout_constraintBottom_toTopOf="@id/editTextTextPassword2" /> <!-- Password (Nemeric) xml Code --> <EditText android:id="@+id/editTextNumberPassword" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="10" android:hint="Password (Numeric)" android:inputType="numberPassword" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@id/editTextTextPassword2" app:layout_constraintBottom_toTopOf="@id/editTextTextEmailAddress" /> <!-- Time xml Code --> <EditText android:id="@+id/editTextTime" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="10" android:hint="Time" android:inputType="time" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@id/editTextTextMultiLine" app:layout_constraintBottom_toTopOf="@id/editTextDate" />코드를 보면 확연하게 알 수 있듯이 모두 EditText로 구현되어 있습니다. 다른 부분은 바로 android:inputType 부분으로 이 부분이 키패드의 형태를 정해준다고 보시면 되겠습니다.
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)값을 넣어줘서
값을 제거했습니다
음 저는 별로 많이 사용할 것 같지 않으니
이 정도선에서 마치도록 하겠습니다