[Jetpack Compose] IME 키보드에 내용이 가려짐 해결

문제

Compose로 개발을 할 때 TextField를 정말 많이 사용합니다.

그런데 TextField를 사용하다 보면 IME 키보드에 아래의 내용이 가려질 때가 있습니다.

이럴 땐 몇가지 간단한 설정으로 아래의 콘텐츠까지 스크롤되도록 수정할 수 있습니다.

 

먼저 초기 상태를 보겠습니다.

아래의 그림과 같이 TextField를 터치하면 IME 키보드가 나타나며 그 아래의 컨텐츠를 가려집니다.

이 상태에서 아래의 내용을 보려고 해도 스크롤이 되지 않습니다.

 

해결 방법

AndroidManifest.xml로 이동합니다.

activity 스코프에 아래와 같은 코드를 추가합니다.

android:windowSoftInputMode="adjustResize"

적용한 이미지

 

그러고 나서 다시 실행을 해보면 이제 아래와 같이 IME 키보드가 올라와도 레이아웃이 바뀌지 않습니다.

 

그러나 여전히 아래의 내용은 볼 수 없습니다.

이제 보여주고 싶은 페이지 전체를 LazyColumn으로 감싸서 스크롤이 되도록 합니다.

Modifier의 scrollable을 사용해도 될 것 같지만, 저는 LazyColumn을 사용해주었습니다.

기존의 Column 대신 LazyColumn 사용

 

실행을 해보면 아래와 같이 스크롤로 아래의 내용을 볼 수 있습니다.