안녕하세요!
오늘은 사용자의 입력폼을 받아 사용할 수 있는 EditText 위젯에 대해 포스팅 하겠습니다 : )
아래는 오늘 만들어볼 예제의 최종 사진입니다!
왼쪽 사진에서 EditText에 값을 입력한 후 "띄우기" 버튼을 클릭하면 오른쪽 사진과 같이 EditText에 입력된 값을 Toast로 띄우는 예제입니다.
여기서 Toast는 작은 팝업으로 작업에 관한 간단한 피드백을 제공하는 기능입니다!
작업의 순서는 아래와 같습니다 : )
1. activity_main.xml 작성
2. MainActivity.java 작성
1. activity_main.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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:gravity="center"
android:orientation="vertical" >
<EditText
android:id="@+id/etMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="메세지를 입력해주세요!" />
<Button
android:id="@+id/btnShowToast"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="띄우기"/>
</LinearLayout>
</LinearLayout>19번째 줄에 android:hint 속성은 EditText에 값이 입력되지 않았을 때 표시되는 문자열입니다.
혹시 처음에 미리 값을 채워줘야하는 경우 android:text="채워줘야하는 값"과 같이 사용하면 됩니다 : )
2. MainActivity.java
package com.example.example02;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private EditText etMessage;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
etMessage = findViewById(R.id.etMessage);
findViewById(R.id.btnShowToast).setOnClickListener(this);
}
@Override
public void onClick(View v) {
String msg = etMessage.getText().toString();
Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
}
}19번째 줄은 activity_main.xml에서 EditText 위젯의 id값을 통해 가져온 EditText 객체입니다.
26번째 줄에서 getText() 메서드를 사용해서 EditText 위젯에 입력된 값을 가져오고 toString() 메서드를 사용해서 값을 String 형으로 변환합니다.
그리고 27번째 줄에서 가져온 String 형 데이터를 Toast로 띄워줍니다.
이렇게만 소개해 드리면 너무 아쉬워서 추가적으로 EditText 위젯을 선택하면 나오는 키보드에 대해서도 소개해드리겠습니다 : )
EditText에서 입력 키보드를 소프트 키보드라고 부릅니다. 이 소프트 키보드에서 입력 타입을 선택할 수 있습니다.
아래의 사진은 개인적으로 가장 많이 사용하는 소프트 키보드의 입력 타입 사진들입니다.
위의 가장 왼쪽의 사진이 기본 입력 타입 사진이고 가운데가 입력 타입을 숫자로 바꾼 사진입니다. 마지막 사진은 입력 타입을 이메일 폼으로 바꾼 사진입니다.
그리고 아래의 사진은 입력 타입을 패스워드로 바꾼 사진입니다.
사진처럼 EditText의 입력 타입을 패스워드로 바꾸게되면 입력했던 값도 암호화되서 보여집니다!
위의 사진들 처럼 EditText에 입력 타입을 변경하시려면 아래의 20번째 줄처럼 추가해주시면 됩니다.
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:orientation="vertical" >
<EditText
android:id="@+id/etMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="메세지를 입력해주세요!"
android:inputType="number" />
<Button
android:id="@+id/btnShowToast"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="띄우기" />
</LinearLayout>
</LinearLayout>소개해드린 것 외에도 많은 타입이 있으니 검색해보시고 실습하시면 좋을 것 같아요 : )
이렇게 EditText의 입력 타입을 변경할 수 있는 것만이 아니라 Action버튼도 설정할 수 있습니다.
원래 기본 키보드는 왼쪽의 사진처럼 되어있습니다. 왼쪽사진의 우측 하단을 보면 개행 버튼이 보이는데요! 이 버튼이 EditText의 Action 버튼입니다.
이 버튼의 아이콘을 글씨로 바꿀 수도 있고 다른 Action의 아이콘으로 변경할 수 있으며 실제 기능도 직접 구현할 수 있습니다.
오른쪽 사진은 EditText 위젯의 Action을 search로 바꾼 사진입니다 : )
아래의 사진에서 21번째 줄을 추가해주시면 Action버튼의 아이콘이 변경됩니다!
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:orientation="vertical" >
<EditText
android:id="@+id/etMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="메세지를 입력해주세요!"
android:inputType="text"
android:imeOptions="actionSearch" />
<Button
android:id="@+id/btnShowToast"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="띄우기" />
</LinearLayout>
</LinearLayout>그런데 21번째 줄만 추가해도 작동하지 않는 경우가 있습니다.
EditText는 처음에 여러 줄을 입력할 수 있도록 되어있는데 이 경우에 기본적으로 Action 버튼이 개행버튼으로 지정되기 때문입니다.
그래서 20번째 줄처럼 명시적으로 입력 타입으로 지정해주거나 android:singleLine="true" 속성을 주어 멀티라인을 없애는 방식으로 설정해주시면 정상 작동합니다 : )
이제 Action 버튼을 눌렀을 때 작동할 기능을 추가해보도록 하겠습니다.
package com.smparkworld.example02;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements EditText.OnEditorActionListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
((EditText)findViewById(R.id.etMessage)).setOnEditorActionListener(this);
}
@Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
String msg = ((EditText)v).getText().toString();
Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
return false;
}
}18번째 줄에서 Action 버튼 클릭 시 호출될 콜백 메서드를 구현한 객체를 지정해줍니다.
27번째 줄처럼 false를 반환하게 되면 Action 버튼을 눌렀을 때 소프트 키보드가 없어지게 되고 true를 반환하게 되면 소프트 키보드가 유지됩니다!
그리고 24번째 줄 처럼 TextView를 EditText로 캐스팅해서 입력된 값을 가져오는 것처럼 파라미터 TextView v에는 Action 버튼이 클릭된 EditText가 넘어옵니다. 물론 저 문법이 가능한 이유는 EditText는 TextView를 상속받고 있기 때문입니다.
이상으로 EditText에 대해서 포스팅을 마치겠습니다.
궁금하시거나 부족한 부분은 댓글로 남겨주시면 감사드리겠습니다 : )