안드로이드 어플리케이션을 만들 때 사용하는 Android Studio를 통해 UI 및 프론트에 대한 공부를 하며 그 내용들을 기록하고자 이렇게 글을 작성한다.
개발언어는 Java와 Kotlin 중 Java를 채택하여 학습하였다. Kotlin은 사용해 본 적이 없으나 Java의 경우 기본적인 기능들을 사용해 본 적이 있어 이를 선택하게 되었다.
UI 구조 확인
이번에는 editText 를 이용해 입력받은 값을 검사하는 것을 한 번 해 볼 것이다.
editText 박스는 타입을 지정할 수 있고 타입에 따라 나타나는 자판이 달라진다.
이를 활용해서 이름과 비밀번호를 입력하고 이를 검사하는 방법에 대해서 한 번 알아보고자 한다.
EditText가 무엇일까?
EditText는 사용자가 텍스트를 입력할 수 있는 UI 요소이다.
즉, EditText는 사용자가 앱에 텍스트를 입력하도록 해주는 텍스트 필드라고 볼 수 있다.EditText를 사용하는 방법은 기본적으로 아래와 같다.
String text = myEditText.getText().toString(); // 입력한 텍스트를 가져오는 것 myEditText.setText("New text"); // 기본 텍스트를 설정하기EditText는 이렇게 활용할 수 있다. 이제 이걸 이용해 EditText를 활용하는 방법을 한 번 알아보자.
EditText를 활용 해 보기
이번에 해볼 EditText 활용 시나리오를 우선 정리 해 보고 위의 UI에 맞게 코드를 작성 해 보도록 하겠다.
EditText 활용하는 시나리오
- 이름을 입력하는 EditText탭은 입력되지 않으면 입력되지 않았다고 토스트 메세지를 출력
- 비밀번호를 입력하는 EditText탭도 미입력시 동일하게 토스트 메세지를 출력함
- 확인 버튼은 위 두 절차에 더해서 코드 내에 미리 비교할 비밀번호를 만들어 두고 만들어둔 비밀번호와 입력된 비밀번호가 다르면 비밀번호 입력 탭을 비움
- 입력 탭을 비우면서 '비밀번호 오류'라고 토스트 메세지를 띄워줌
EditText 활용 코드 작성 해 보기
- 우선 위 시나리오대로 수행하기 위해서 각 리소스들에 대한 객체참조변수를 생성
public class MainActivity extends AppCompatActivity {
EditText edtName, edtPass;
Button btnOK, btnExit;
...- 생성한 객체참조변수에 각 리소스들의 ID값을 할당
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
edtName = (EditText) findViewById(R.id.editText1); //아이디 받는 editText박스
edtPass = (EditText) findViewById(R.id.editText2); //패스워드 받는 editText박스
btnOK = (Button) findViewById(R.id.button1);
btnExit = (Button) findViewById(R.id.button2);
...앞에 작성했던 게시글에는 객체참조변수의 ID 할당을 어디다가 하는지 작성해 두지 않았는데, 이 작업을 수행할 땐 onCreate 메소드 안에 이를 작성해야 한다.
- 모든 검사절차는 '확인'버튼이 눌러진 다음에 수행되는 것이므로 '확인'버튼을 누르는 이벤트에 대해 처리할 이벤트 리스너 객체를 생성
btnOK.setOnClickListener(new View.OnClickListener() {
@Override
//확인 버튼 누르면 아이디/비밀번호를 검사함
public void onClick(View view) {
String userName = edtName.getText().toString(); //입력된 값을 toString을 이용해 String타입으로 반환함
// getText(): Editable 객체 반환, 문자열로 사용하기 위해선 형변환 필요함
String userPass = edtPass.getText().toString();
//오류처리 영역, 값 미입력시
if(userName.equals("")) {
//빈 문자도 문자열 처리됨
Toast.makeText(MainActivity.this, "이름 입력 필요", Toast.LENGTH_SHORT).show();
}
else if(userPass.equals("")) {
Toast.makeText(MainActivity.this, "비밀번호 입력 필요", Toast.LENGTH_SHORT).show();
}
else
checkPassword(userName, userPass); //매개변수 이름은 꼭 다르게 할 필요 없음(지역변수 성격을 가지므로 지역 다르니 상관없음)
}
});우선 해당 코드는 확인 버튼을 누르는 이벤트가 발생하면 아이디/비밀번호를 검사한다.
입력에 대한 검사과정
1. EditText에 입력되는 값들을 문자열 변수에 값을 넣는다.
- EditText에 입력되는 값은 문자열에 넣기 위해서는
getText()로 Editable 객체로 반환해 주고 문자열로 값을 변경 해 주는toString()을 이용해 문자열 변수에 값을 넣는다.
- EditText 영역에 값의 미입력될 시 이를 처리하기 위해
if-else문을 이용해 미입력을 확인함
- 확인한 후 만약 미입력임이 확인되면
Toast.makeText()를 통해 토스트 메세지를 만들어 각 영역(이름, 비밀번호)에 대해 미입력되었음을 알린다.
- 비밀번호가 사전에 코드에서 정해둔 비밀번호와 동일한지 여부를 확인하는 메소드 작성
public void checkPassword(String userName, String userPass) {
// 비밀번호는 문자열로 전달했으나 정수로 형 변환한 이후 비교 수행 예쩡
int userPassInt = Integer.parseInt(userPass); //userPass값을 Int로 형변환함(Wrapper클래스 사용)
if(userPassInt == 1234) {
String message = userName + " 키값 비교검사 완료";
Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
//Toast를 이용해 검사 완료(값 동일) 알림
edtName.setText("");
edtPass.setText("");
//비밀번호 일치시 editText영역을 전부 초기화
edtName.requestFocus(); //포커스를 이동시키는 기능(= 커서위치 이동)
}
else {
Toast.makeText(MainActivity.this, "비밀번호 오류", Toast.LENGTH_SHORT).show();
edtPass.setText(""); //비밀번호 오류이므로 비밀번호 입력하는 editText영역을 초기화
edtPass.requestFocus(); //포커스를 비밀번호 입력창으로 이동
}
}여기서는 입력한 비밀번호에 대해서 Wrapper클래스의 Integer로 그 정보를 받아 문자열로 입력된 데이터를 정수 변환한다.
if-else문을 이용해 사전에 정해둔 비밀번호 값과 비교한다.
if문에서는 입력된 비밀번호와 정해둔 비밀번호를 비교하는 조건을 걸어두고, 만약 비밀번호가 일치하면 그 값이 동일함을 토스트 메세지를 이용해 알려주고 이름과 비밀번호 입력 탭을 초기화한다.
else문에서는 위에서 수행한 비교에서 그 결과가 동일하지 않다고 나오면 토스트 메세지로 비밀번호 오류라고 띄워준 후 비밀번호 입력 탭만 초기화한다.
마무리
이번에는 EditText를 한 번 활용해 보았다.
가장 간단한 예시로 아이디/비밀번호 입력 탭이라고 가정하고 비밀번호 일치여부를 확인 버튼을 눌렀을 시 비교하는 시나리오를 기반으로 간단하게 구현 해 보았다.
위 레이아웃이 로그인 페이지의 기본 요소이니만큼 로직을 잘 이해해두면 좋을 것 같다고 생각했다.
