[코틀린(Kotlin)] 로그인, 회원가입, 자기소개 페이지 만들기 (2

보완하고자 하는 것

• TextView, EditText 등에 있는 text들을 하드코딩 형식에서 strings.xml 활용하여 수정
• HomeActivity에서 종료 버튼에 이펙트 추가
  → selector를 활용하여 눌렀을 때 이미지와 글자 색깔 변화
• 기타 코드 수정
  → 수정된 코드는 깃허브에 커밋

 

 

 

strings.xml 활용하여 텍스트 출력

기존에 하드코딩 되어있던 레이아웃 속 텍스트뿐만 아니라 클래스 안에 있는 토스트 메시지도 @string/에 있는 텍스트를 받아와서 출력하도록 설정해 줬다

 

strings.xml

문자열을 리소스 파일에서 추출하여 사용하는 방법은 하드코딩의 두 가지 문제점을 해결해 준다

 

하드코딩의 문제점

1. 앱을 다른 언어로 번역하기가 어렵다
2. 앱의 다른 곳에서 같은 문자열을 재사용하기 어렵다

 

 

HomeActivity에서 종료 버튼 이펙트 추가

수정하기 이전 종료 버튼은 그냥 팔레트에서 버튼하나 추가해 줬던 기본 디자인이었다

심심한 디자인에서 버튼에 이미지 추가 + 눌렀을 때 이펙트를 추가해 봤다

 

HomeActivity.xml

대략적인 과정

1. 기존에 있던 <Button> 삭제
2. Constraintlayout 생성
3. Constraintlayout 안에 ImageView와 TextView를 생성 (정렬은 알아서~)
4. ImageView와 TextView에 HorizontalChain(packed)
5. bais도 0.5씩

 

버튼 클릭 시 버튼 색깔 변경

Constraintlayout의 background = "@drawable/selector_button"

• 4~9) pressed = "true" (눌렸을 때)
           → color 지정, radius(모서리 곡선) 지정
• 11~16) 기본 상태(안 눌렀을 때)

 

버튼 클릭 시 이미지 변경

Constraintlayout의 ImageView 속 src = "@drawable/btn_drawable_selector"

• 4) pressed = "true"(눌렀을 때)
      → 이미지 @drawable/lv5 (화난 표정)
• 5) focused = "ture"(해당 뷰에게 포커스가 이동할 때)
      → 이미지 @drawalble/lv2 (웃는 표정)
• 6) 기본
      → 이미지 @drawalble/lv2 (웃는 표정)

 

버튼 클릭 시 텍스트 색깔 변경

Constraintlayout의 TextView 속 textColor = "@drawable/btn_text_selector"

• 3) state_pressed = "true" (눌렀을 때)
      → color 지정
• 4) 기본 상태 @color/black으로 지정

 

 

결과

기본

눌렀을 때

 

 

(아이디 위에 이미지가 달라진 건 캡처하다 실패해서 pressed 상태를 enabled(사용 가능할 때) 상태로 바꿔놓고 캡처했기 때문에

로그인 창을 다시 들어갔다. 그래서 랜덤이미지이기 때문에 이미지가 바뀌었다..)

 

그 김에  자주 쓰이는 selector의 종류에 대해서도 알게 되었다(캡처하기 위해 다른 상태 알아보다가..)

• pressed = 눌렀을 때
• enabled = 사용 가능할 때
• selected = 선택되었을 때
• focused = 해당 뷰에게 포커스가 이동할 때
• checked = 체크되었을 때