HTML을 화면에 꽉 채우기

[/crayon] 하지만 태블릿이나 xperia기종에서는 화면을 꽉채워주지 않고 화면의 가운데에 표시되고 좌우 그리고 하단에 여백이 들어간다. 그럼 아래의 방법은 어떨까? [crayon] [/crayon] 이렇게하면 넓이는 꽉채워주는데 세로로 스크롤이 생긴다. 결론적으로 이 방법으로 setScaleX를 적용해도 WebView 자체의 표시영역이 작아질뿐이었다. 따라서 방법은 width=device-width 를 사용하기로 한다. 그럼 먼저 단말기의 디스플레이 정보를 출력해본다. [crayon] Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); DisplayMetrics metrics = new DisplayMetrics(); display.getMetrics(metrics); Log.d(“VPB”, “widthPixels=”+metrics.widthPixels); Log.d(“VPB”, “heightPixels=”+metrics.heightPixels); Log.d(“VPB”, “densityDpi=”+metrics.densityDpi); Log.d(“VPB”, “density=”+metrics.density); Log.d(“VPB”, “scaledDensity=”+metrics.scaledDensity); Log.d(“VPB”, “xdpi=”+metrics.xdpi); Log.d(“VPB”, “ydpi=”+metrics.ydpi); [/crayon] 아래는 Sony Tablet S 의 정보이다.

02-07 00:08:25.037: D/VPB(24647): widthPixels=1280 02-07 00:08:25.037: D/VPB(24647): heightPixels=752 02-07 00:08:25.037: D/VPB(24647): densityDpi=160 02-07 00:08:25.037: D/VPB(24647): density=1.0 02-07 00:08:25.037: D/VPB(24647): scaledDensity=1.0 02-07 00:08:25.037: D/VPB(24647): xdpi=161.26984 02-07 00:08:25.037: D/VPB(24647): ydpi=161.26984
아래는 Gallexy S2 의 정보이다.
02-07 00:10:04.335: D/VPB(19387): widthPixels=800 02-07 00:10:04.335: D/VPB(19387): heightPixels=480 02-07 00:10:04.335: D/VPB(19387): densityDpi=240 02-07 00:10:04.335: D/VPB(19387): density=1.5 02-07 00:10:04.345: D/VPB(19387): scaledDensity=1.5 02-07 00:10:04.345: D/VPB(19387): xdpi=160.42105 02-07 00:10:04.345: D/VPB(19387): ydpi=160.0
이상태에서 화면에 꽉채우도록 setScaleX / setScaleY 를 조절해보았다..( 좀 무식한가? ㅋㅋ) 그렇게 해서 산출된 값을 도출하도록 공식을 생각해본결과, 아래와 같은 공식으로 도출되는것을 알았다. scaleX에 설정할값은 아래와 같이 구한다.
widthPixels / 480 / density (아마 scaledDensity를 써야할듯?)
scaleY에 설정할값은 아래와 같이 구한다.
heightPixels / 320 / density (아마 scaledDensity를 써야할듯?)
즉, “단말기의 픽셀” / “표시하고싶은 픽셀” / “밀도” 를 setScale에 설정하면 된다. xml에서 설정하는 레이아웃은 아래와 같이 설정(wrap_content)해야 한다. 즉, xml에서 설정하는 width와 height는 webview 자체의 크기이다. 이걸 화면 가득히 설정하게 되면 나중에 scaleX,Y로 확대할시에 화면 가득 꽉찬 크기에서 다시 확대하게 된다. [crayon] [/crayon] 그리고 Sony Tablet 에서는 layout_gravity=”center_vertical”를 설정하지 않으면 WebView의 상단 부분이 짤림 현상이 있다. 자.. 그럼 해당 HTML을 Android의 단말기에서 꽉 채우려면 아래와 같이 WebView를 설정해보자~ [crayon] // GAME WEB VIEW gameWebView = (WebView) findViewById(R.id.webview_main); gameWebView.setVisibility(WebView.INVISIBLE); // WEB VIEW SETTINGS gameWebView.getSettings().setUseWideViewPort(true); gameWebView.getSettings().setLoadWithOverviewMode(true); gameWebView.getSettings().setJavaScriptEnabled(true); // 画面最大化 by jo Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); DisplayMetrics metrics = new DisplayMetrics(); display.getMetrics(metrics); Log.d(“VPB”, “widthPixels=”+metrics.widthPixels); Log.d(“VPB”, “heightPixels=”+metrics.heightPixels); Log.d(“VPB”, “densityDpi=”+metrics.densityDpi); Log.d(“VPB”, “density=”+metrics.density); Log.d(“VPB”, “scaledDensity=”+metrics.scaledDensity); Log.d(“VPB”, “xdpi=”+metrics.xdpi); Log.d(“VPB”, “ydpi=”+metrics.ydpi); // FIXME 2013/2/7 추가 // density는 원래 단말기의 밀도이고 scaledDensity는 화면이 실제 표시되어 적용이 된 밀도이다. // 따라서 density가 아니라 scaledDensity를 사용해야 할듯하다. //float scaleX = ((float)metrics.widthPixels)/480f/metrics.density; //float scaleY = ((float)metrics.heightPixels)/320f/metrics.density; float scaleX = ((float)metrics.widthPixels)/480f/metrics.scaledDensity; float scaleY = ((float)metrics.heightPixels)/320f/metrics.scaledDensity; Log.d(“VPB”, “Calculated scaleX=”+scaleX); Log.d(“VPB”, “Calculated scaleY=”+scaleY); try { // 以下メソッドは Android 3.0 から使えるんだって。 gameWebView.setScaleX(scaleX); gameWebView.setScaleY(scaleY); } catch (Throwable th) { th.printStackTrace(); } gameWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY); [/crayon] 휴~ 힘들게 알아냈네요. 참고할때는 출처밝혀주시면 감사~]]>

Related Posts

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다