Develop/Android

android TextInputLayout & AppCompatEditText 사용 하기

dlsdnd345 2016. 2. 14. 18:36

android TextInputLayout & AppCompatEditText 사용 하기


안녕하세요.  본 샘플은 커니님의 샘플앱을 하나하나 분석하여 만든 샘플 입니다.

커니님의 EditText를 분리 하여 분석해 보았습니다.


새로이 추가된 TextInputLayout 를 통해서 움직이는 EditText를 만들수 있습니다.


아래 이미지와 같이 선택전에는 hint가 있고 선택시 hint가 EditText 위로 이동하는 애니메이션을 볼 수 있습니다.

또한 editText 를 입력 하지 않았을때 에러 메세지 표시 기능도 추가 된것 같습니다.



 

 



2.준비


1
2
3
4
5
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:design:22.2.0'
}
 cs


위와 같이 Dependency 를 추가 합니다.

design Dependency 추가 되었습니다. 



3.코드


아래와 같이 EditText 위아래로 TextInputLayout 를 넣어주면 Edittext hint 가 애니메이션을 하면서 이동 하는 것을 볼수 있습니다.

TextInputLayout 에 각각의 스타일을 적용할 수도 있는것 같습니다. 스타일이 필요 없으면 지워주면 될것 같습니다.


위 Design Dependency 안의 위젯을 이용해서 이쁜 EditText를 만들수 있습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<LinearLayout 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:orientation="vertical"
    >
 
    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/MyTextInputLayoutTextAppearance"
        >
 
        <android.support.v7.widget.AppCompatEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="E-mail address"/>
 
    </android.support.design.widget.TextInputLayout>
 
    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/MyTextInputLayoutTextAppearance">
 
        <android.support.v7.widget.AppCompatEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:hint="Password"/>
 
    </android.support.design.widget.TextInputLayout>
 
 
</LinearLayout>
 
 cs



에러코드 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
public class MainActivity extends ActionBarActivity {
 
    private TextInputLayout textLayoutAddress;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        initLayout();
 
    }
 
    /**
     * 레이아웃 초기화
     */
    private void initLayout(){
 
        textLayoutAddress = (TextInputLayout)findViewById(R.id.textLayoutAddress);
 
        textLayoutAddress.setErrorEnabled(true);
        textLayoutAddress.setError("주소를 입력해 주세요.");
 
    }
 
}
 cs

저작자표시 (새창열림)