103. (TWOK/LOGIC) [Mobile] 모바일 ( android , ios ) 웹뷰 브릿지 통신을 사용해 실시간 가상 키보드 활성 상태 (on , off) 전달 로직

---

[로직 정리]

​

정리 로직 : Mobile

​

상태 : [Mobile] 모바일 ( android , ios ) 웹뷰 브릿지 통신을 사용해 실시간 가상 키보드 활성 상태 (on , off) 전달 로직

 

---

[설 명]

 

// --------------------------------------------------------------------------------------
[사전) 설정 및 정보 확인 사항]
// --------------------------------------------------------------------------------------

- 모바일 ( android , ios ) 에서 가상 키보드 활성 상태 감지를 위한 사전) 이벤트 등록 필요

  >> android : KeyboardState

  >> ios : keyboardWillShowNotification

- 웹뷰 브릿지 통신을 하기 위한 사전) 인터페이스 협의 필요 (ex : keyboardStatus)

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[로직 설명]
// --------------------------------------------------------------------------------------

1. 모바일 ( android , ios ) 웹뷰 액티비티 화면 활성 시 키보드 활성 상태 감지를 위한 이벤트 등록 수행


2. 모바일 ( android , ios ) 에서 사전 웹뷰 기본 설정 값 지정 및 자바스크립트 활성 설정 수행


3. 모바일 ( android , ios ) 에서 특정 URL 주소 지정 및 웹뷰 로드 수행 실시


4. 특정 웹 input box 포커스 활성 후 실시간 모바일 키보드 활성 상태 이벤트 동작 확인


5. 모바일 ( android , ios ) 에서는 사전 정의 된 브릿지 경로 로 키보드 활성 상태 값 및 height 높이 값 전달 수행


6. 웹 페이지에서는 브릿지로 가상 키보드 활성 상태 값 (on , off) 과 가상 키보드 height 값이 넘어 온 경우 가상 키보드 위로 표시해야 할 컴포넌트 show 표시 수행

  >> 컴포넌트 위치 값은 가상 키보드 height 값 을 계산해 동적으로 위치 조절 필요

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

[Android - 웹뷰 클래스 정리]

https://blog.naver.com/kkh0977/222680670897?trackingCode=blog_bloghome_searchlist


[Ios - 웹뷰 클래스 정리]

https://blog.naver.com/kkh0977/222686770495?trackingCode=blog_bloghome_searchlist


[자바스크립트 input box 포커스 활성 및 비활성 , 가상 키보드 제어 처리]

https://blog.naver.com/kkh0977/222718499413?trackingCode=blog_bloghome_searchlist


[웹 프론트 keyboard 키보드 활성 시 ui 밀림 , 줄어듬 현상 방지 및 zoom in 줌 효과 제거 방법]

https://blog.naver.com/kkh0977/222416500563?trackingCode=blog_bloghome_searchlist


[자바스크립트 onresize 화면 크기 변환 감지 사용해 안드로이드 가상 키보드 활성 상태 체크 실시]

https://blog.naver.com/kkh0977/222808722135?trackingCode=blog_bloghome_searchlist


[자바스크립트 input box 에 focus 및 blur addEventListener 이벤트 등록 , 가상 키보드 활성 상태 확인]

https://blog.naver.com/kkh0977/223629289643


[android : KeyboardState 가상 키보드 호출 상태 및 높이 사이즈 확인 실시]

https://blog.naver.com/kkh0977/222772930804?trackingCode=blog_bloghome_searchlist


[ios : keyboardWillShowNotification 사용해 가상 키보드 호출 상태 및 높이 사이즈 확인 실시]

https://blog.naver.com/kkh0977/222772879067?trackingCode=blog_bloghome_searchlist

// --------------------------------------------------------------------------------------

---