본문 바로가기
HELLO_WORLD/안드로이드_Android

[지식공유] 안드로이드 웹뷰 핀치 줌 인 / 아웃

by 해피한 김과자블루스웨터 2018. 8. 18.


안드로이드 지식 공유







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



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


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




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


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

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


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





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


1
2
3
4
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setDisplayZoomControls(true);
cs


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








댓글0