13
간간간 간간간간 간간 간간간

간단한 회원가입 형태 만들기

Embed Size (px)

Citation preview

간단한 회원가입 형태 만들기

추가할 기능들• EditText 를 이용하여 간단한 회원가입 형태를 만든다 .• 소프트 키보드에서 다음 입력칸으로 넘어갈 수 있도록 설정한다 .• E-mail 형식으로 회원가입 했는지 확인한다 .• 패스워드는 6 글자 이상인지 확인한다 . - 아닐 경우 빨간색으로 표시 , 체크하는 것은 동일한지를 확인• 회원 가입 버튼을 구현

최종적으로 만들 화면

1. 회원가입 형태 ( 틀 ) 만들기TextVie

wEditTextTextViewEditTextTextViewEditText

최대한 간단한 화면 구성

EditText 는 입력 형태에 맞추어 inputType 을 설정

Button

2. 키보드로 다음 EditText 로 넘어가기아무런 설정을 하지 않고 EditText 에 Focus 를 주었을 때

2. 키보드로 다음 EditText 로 넘어가기특별한 설정을 하고 EditText 에 Focus 를 주었을 때

방법 1 - imeOption 을 ActionNext 로 설정방법 2 - nextFocusDown 을 Focus 를 줄 EditText 의 id 로 설정 * 주의 사항 * 두 방법 모두 singleLine=“true” 로 설정해주어야 한다 . 싱글라인이 아닐경우 ( 멀티라인 ) 엔터키가 나오게 된다 .

2. 키보드로 다음 EditText 로 넘어가기

방법 2 – nextFocusDown 을 사용시 주의사항nextFocusDown 을 다음 EditText 의 id 로 설정할 때

[ + ] 를 반드시 넣어주어야 한다 .

대신 다음 EditText 의 id 속성에는 + 가 없어도 된다 .

3. E-mail 형식을 제대로 입력했는지 확인- 정규 표현식 : 특정 패턴의 문자열 형식을 말하는 것 ? ex) E-mail, 숫자만 , 문자만 , 패스워드 ( 숫자 , 문자 ,특수문자를 섞었는지 )- 정규 표현식으로 입력했는지 확인하는 방법 -> Boolean matches(String s) -> 반환값이 Boolean 이므로 if-else 문을 사용해서 E-mail형식이 맞을 경우와 틀릴 경우를 따지고 다음 동작을 수행

4. 패스워드는 6 글자 이상인지 확인 ( 실시간 )- 실시간으로 입력되는 글자를 확인하는 방법 -> TextWatcher 를 사용한다 .editText.addTextChangedListener(TextWatcher textWatcher)

- TextWatcher 안에 오버라이드 메소드는 3 가지그 중 onTextChanged 를 사용

onTextChanged(CharSequence s, int start, int count, int after)

editText.onTextChanged 안에서는 EditText 에 입력되는 문자열을 s 를 통하여 얻는다 . -> s.toString

editText.getText().toString() 을 해버리면 한글 같은 경우는 “ 가” 로 읽혀지는 것이 아닌 “ㄱㅏ”로 읽혀지게 된다 .

때문에 s.toString 을 활용하여 length 나 equals 를 사용한다 .

5. 회원가입 버튼 구현회원 가입 버튼을 클릭 시에 E-mail 형식이 정상적으로 맞았는지를 확인하는 부분을 처리한다 .

확인 버튼 대신 EditText 에서 버튼 역할을 하는 코드를 구현이 가능하다 .앞에서 했던 imeOption 을 Action Send 로 설정한다 . -> imeOption 에 대한 리스너는 onEditorActionListener 를 사용editText.setOnEditorActionListener(OnEditorActionListener listener)

editText.setOnEditorActionListener (OnEditorActionListener listener)

Public Boolean onEditorAction(TextView v, int actionId, KeyEvent event) imeOption 에 설정한 것은 actionId 를 통해서 전달된다 .이를 EditorInfo.[ ] 와 비교하여 구현한다 .