Ex12EditText

안드로이드 네이티브 앱 개발 수업 예제#12

주요코드

EditText의 여러 속성과 기법 알아보기

• res폴더>>layout폴더안에 있는 activity_main.xml문서를 수정하여 화면제작
• inputType속성값 (text, number, phone, textPassword 등)에 따라 디바이스의 입력 소프트키패드가 다른 UI모양으로 보여짐

지정이 없으면 엔터를 가진 키패드가 올라옴.(줄바꿈이 됨)- height값이 wrap이면 뷰가 커지고 수치값이면 안에 내용물이 안보이게 됨.

• 여러줄 입력 : inputType="textMultiLine" 및 ultiLine의 뷰 높이 관련속성 lines , maxLines
• EditText에 이미지 넣기 : drawableRight="@drawable/ic_favorite_black_40dp" ( 실습예제에 사용된 이미지는 AndroidStudio의 Image Asset메뉴를 통해 제작 )
• EditText 커서 안보이기 : cursorVisible="false"
• width를 글자수로 지정하기 : ems="5"
• background속성으로 배경을 지정하면 언더라인이 안보임. 즉, 언더라인이 EidText의 기본 배경이었던 것임
• EditText의 포커스 자동 이동 : Java 코드를 통한 커서 이동처리 필요함 (전화번호 입력폼에 유용한 기법)
• 기본적으로 화면에 EditText가 있으면 처을 실행할 때 자동으로 포커스를 가지게 됨. 이게 싫다면 ViewGroup(예제에서는 root의 LineaerLayout)에게 focusableInTouchMode="true"로 지정하면 EditText가 기본적으로 가지게 되는 Focus를 뺏어올 수 있음
• 소프트키패드 강제 보이기/숨기기/토글하기

실행모습

inputType속성에 따라 다른 모양의 소프트키패드 [ text | number | phone | textPassword ]

EditText의 기타 속성들에 따른 실행모습

실행모습 GIF

소스코드

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    android:focusableInTouchMode="true"
    tools:context=".MainActivity">
    <!--focusableInTouchMode="true"로 하면 EditText가 기본적으로 가지게 되는 Focus를 뺏어올 수 있음-->

    <!--///////// 아래의 EditText실습이 모두 종료된 후 실습 /////////////////////-->
    <!--소프트키패드 강제 보이기/숨기기/토글하기-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginBottom="16dp">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="show SOFTKEY"
            android:textAllCaps="false"
            android:onClick="clickBtn"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hide SOFTKEY"
            android:textAllCaps="false"
            android:onClick="clickBtn2"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="toggle SOFTKEY"
            android:textAllCaps="false"
            android:onClick="clickBtn3"/>
    </LinearLayout>
    <!-- ///////////////////////////////////////////////////////////////////////// -->

    <!--inputType속성 주요 설정값-->
    <!-- -지정이 없으면 엔터를 가진 키패드가 올라옴.(줄바꿈이 됨)- height값이 wrap이면 뷰가 커지고 수치값이면 안에 내용물이 안보이게 됨.-->
    <!-- -"date": 숫자 키패드(/, -, . 3개의 특수문자 키) - 줄바꿈 안됨.(포커스가 다음으로 이동됨)-->
    <!-- -"datetime": 숫자 키패드(/, -, . , :(롱클릭) 4개의 특수문자 키) - 줄바꿈 안됨.-->
    <!-- -"number":숫자 키패드 - 줄바꿈 안됨.-->
    <!-- -"numberSigned": 음수부호 입력 가능 - 줄바꿈 안됨.-->
    <!-- -"phone":다이얼 키패드 - 줄바꿈 안됨.-->
    <!-- -"text" : -줄바꿈 안됨-->
    <!-- -"textCapCharacters" : 모두 대문자 -줄바꿈 안됨-->
    <!-- -"textCapWords" : 단어의 첫글자에서 대문자 다음부터 자동 소문자(띄어쓰기 후 다시 대문자)-->
    <!-- -"textCapSentences " : 문자의 첫글자 대문자.-->
    <!-- -"textMultiLine" : 여러줄 입력 -엔터가 줄바꿈으로 됨.-->
    <!-- -"textPassword" : 입력된 글자가 가려짐 : 영어만 입력가능함 -->
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="input data - inputType attribute"
        android:inputType="text"/>

    <!-- multiLine의 뷰 높이 관련 -->
    <!-- 라인수 관련(뷰의 높이사이즈 관련) 속성 -->
    <!-- lines : 처음 화면에 보이는 EditTest의 라인수 [ex. line=3 이면 3줄크기의 EditText 출력 - 단, 스크롤을 통해 여러줄 입력가능] -->
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="input multi line : lines속성"
        android:inputType="textMultiLine"
        android:lines="3"
        android:gravity="top"/>

    <!-- maxLines : 처음 보일때는 한줄입력 EditText로 보여지다가 엔터를 통해 늘어날때 최대 3줄크기까지 늘어남. (스크롤을 통해 여러줄 입력은 여전히 가능함) -->
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="input multi line : maxLines속성"
        android:inputType="textMultiLine"
        android:maxLines="3"/>

    <!-- 특정 줄 수 입력은 현재는 없으며 한줄만 입력가능하게 하는것은 inputType=text로 처리! [line속성은 무시됨] -->

    <!--EditText에 이미지 넣기-->
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:drawableRight="@drawable/ic_favorite_black_40dp"/>

    <!--EditText 커서 안보이기-->
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="no cursor"
        android:cursorVisible="false"/>

    <!-- width를 글자수로 지정하기-->
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="5"/>

    <!-- 배경을 바꾸면 언더라인이 없어짐-->
    <EditText
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:background="#008800"
        android:textColor="#FFFFFF"
        android:padding="8dp"
        android:gravity="top"
        android:hint="No Under Line"
        android:textColorHint="#EEEEEE"/>

    <!-- 전화번호 입력폼에 유용한 기법 -->
    <!--EditText의 포커스 자동 이동 : Java 코드를 통한 커서 이동처리 필요함. -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <EditText
            android:id="@+id/edit01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="3"
            android:inputType="number"
            android:maxLength="3"
            android:hint="010"
            android:gravity="center"/>
        <EditText
            android:id="@+id/edit02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="4"
            android:maxLength="4"
            android:inputType="number"
            android:hint="1234"
            android:gravity="center"/>
        <EditText
            android:id="@+id/edit03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="4"
            android:maxLength="4"
            android:inputType="number"
            android:hint="5678"
            android:gravity="center"/>

    </LinearLayout>


</LinearLayout>

▶ @drawable/ic_favorite_black_40dp.xml 이미지 아이콘 파일은 AndroidStudio의 Vector Asset 메뉴를 통해 만든 이미지임.

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {

    EditText edit01, edit02, edit03;

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

        edit01= findViewById(R.id.edit01);
        edit02= findViewById(R.id.edit02);
        edit03= findViewById(R.id.edit03);

        //EditText의 글씨가 변경될때 마다 반응하기 - 텍스트변경리스터 TextChangedListener로서 TextWatcher객체를 전달
        edit01.addTextChangedListener(new TextWatcher() {

            //텍스트가 변경되기 이전에 자동 실행되는 메소드 - 변경 이전의 텍스트를 얻어올 때 활용가능
            @Override
            public void beforeTextChanged(CharSequence charSequence, int start, int count, int after) {

            }

            //텍스트가 변경되었을 때 자동 실행되는 메소드 - 변경된 텍스트를 얻어올 때 활용
            @Override
            public void onTextChanged(CharSequence charSequence, int start, int before, int count) {
                //첫번재 파라미터 charSequence : 현재 EditText에 써있는 글씨

                // 전화번호의 첫번째 자리는 010 처럼 3자리 이므로..
                //EditText에 작성된 글씨(String)의 길이(글자수)가 3가 이상인가? - 그럼 edit02객체가 포커스를 가지도록 요청
                if(charSequence.length()>=3){
                    edit02.requestFocus();//포커스 요청
                }
            }

            //텍스트변경 작업이 완료된 후 자동 실행되는 메소드
            @Override
            public void afterTextChanged(Editable editable) {

            }
        });

        // 위와 마찬가기로 전화번호의 2번째 자리도 4자리로 구성되어 있으므로 4글자 이상이면 마지막 edit03으로 포커스 이동시키는 코드
        edit02.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if(charSequence.length()>=4){ //입력된 글씨가 4글자 이상인가?
                    edit03.requestFocus();
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });

    }//onCreat method....



    //소프트 키패드 보이기
    public void clickBtn(View view) {

        //소프트키패드를 관리하는 InputMethodManager객체를 시스템객체(Context)로 부터 얻어오기
        // 참고 : Context - 안드로이드 운영체제의 주요기능관리객체(시스템서비스객체)들을 가진 객체[일종의 운영체체 대리인 - 운영체제의 능력을 사용하고 싶을 때 호출]
        //                - InputMethodManager가 바로 주요기능 관리객체(시스템서비스객체)임.
        //                - Activity는 Context를 상속받아 만들어진 클래스 여서 Context의 능력을 그대로 사용할 수 있음.
        InputMethodManager imm= (InputMethodManager)getSystemService(INPUT_METHOD_SERVICE);

        //InputMethodManager객체에게 소프트 키패드를 보이도록 요청 - 파라미터로 전달된 값은 추후 소개
        imm.showSoftInput(getCurrentFocus(), 0);
    }

    //소프트 키패드 숨기기
    public void clickBtn2(View view){

        InputMethodManager imm= (InputMethodManager)getSystemService(INPUT_METHOD_SERVICE);

        //InputMethodManager객체에게 소프트 키패드를 숨기도록 요청 - 파라미터로 전달된 값은 추후 소개
        imm.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(), 0);
    }

    //소프트 키패드 토글
    public void clickBtn3(View view) {

        InputMethodManager imm= (InputMethodManager)getSystemService(INPUT_METHOD_SERVICE);

        //InputMethodManager객체에게 소프트 키패드가 보이면 숨기고 안보이면 보이도록 요청 - 파라미터로 전달된 값은 추후 소개
        imm.toggleSoftInput(0, 0);
    }

}

※ 이 포스트의 코드는 수정예정임.