안드로이드 웹뷰 핀치 줌 인 / 아웃

 

안드로이드 지식 공유

 

 

 

 

 

 

안드로이드 웹뷰 - 줌 인 아웃 적용

 

 

안드로이드 개발시 매우 귀찮게 하는 녀석이 있습니다. 바로 웹뷰 인데요. 최근의 앱들은 거의 대부분 하이브리드 형태로 만들어 지고 있습니다.  * 여기서 말하는 하이브리드는 네이티브개발영역 + 웹 영역이 결합된 형태 입니다.

 

이 웹뷰가 여러가지로 귀찮은 녀석입니다. 기존의 브라우저 처럼 잘 동작해주지 않기 때문이죠. 그래도 여러가지 설정을 참고하시면 브라우저 못지 않게 잘 사용하실수 있습니다. 오늘은 핀치 줌인/아웃 입니다. 아이폰의 경우 뷰포트 설정만 해주면 잘 동작하는데요. 우리의 안드로이드는 그런거 없습니다. ^^;;;;;

 

 

 

1. 우선은 웹페이지 상의 소스를 수정해주셔야 합니다.

 

<meta id="Viewport" name="viewport" content="initial-scale=1.0,

maximum-scale=2.0, minimum-scale=1.0, user-scalable=yes">

 

우선 웹페이지 상에 뷰포트 설정을 해주시구요. maximum 으로 확대시 최대치 사이즈를 조정할 수 있습니다.

 

 

 

 

2. 안드로이드 소스의 수정

 

webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setDisplayZoomControls(true);

 

웹뷰상에 설정을 추가해줍니다. 반드시 true 로 설정해 줍니다. 그리고 다시 빌드하여 확인해보면 핀치 줌인 아웃 기능이 잘 동작하는걸 확인할수 있습니다. 줌인 아웃으로 인한 컨트롤 이 표시되는데요. 필요 없으시다면 setDisplayZoomControls(false); 로 설정해주시면 되겠습니다.