Android 4.4 이상에서 webview가 정상적으로 그려지지 않을 때 사용하는 꼼수...

JavaScript Titanium
1

native google maps 모듈은 경로찾기를 지원하지 않아서, 하는 수 없이 경로 찾기만 webview로 google 지도를 불렀습니다.

그런데 Android 4.4 이상에서는 제대로 그려지지 않더군요. 에러는

[ERROR] chromium: [ERROR:gles2_cmd_decoder_autogen.h(1082)] [GroupMarkerNotSet(crbug.com/242999)!:085C03B8]GL ERROR :GL_INVALID_OPERATION : GetIntegerv: <- error from previous GL command

뭐 이런게 나옵니다.
4.4 부터는 chromium을 쓰는데 그래서 여러 문제가 좀 있다네요. (네이티브 쪽도 겪는 문제…)

결론적으로는 h/w accelation을 끄면 해결됩니다만, titanium webview에 그 옵션이 없는게 문제…
검색을 하다보니 꼼수로 해결하는 방법이 있군요.

var webview = Ti.UI.createWebView({
    url:'html/GMapsDirection.html',
    borderRadius:1
});

borderRadius를 주면 됩니다…?! 암튼 해결…

https://jira.appcelerator.org/browse/TIMOB-16479

2

네 그 방법으로 하드웨어 가속을 끌 수는 있습니다. 하지만 이렇게 한 경우에 youtube 같은 동영상을 webview 안에서 보여주는 것이 안 된다고 합니다.(전체화면으로만 재생가능) 웹뷰안에서 동영상플레이를 하지 않는 경우는 아무 상관이 없겠네요.

이런 문제를 해결하는 모듈이 있네요. https://github.com/mpociot/TiWebviewFragment
만양 웹뷰를 지도용으로만 사용한다면 동우님이 하신 borderRadius 지정방법으로 해결하는 것이 모듈을 사용하는 것보다 간편해서 좋겠네요.

1개의 좋아요
3

저도 저 모듈을 발견했는데 쓰기 부담되서 찾다보니 꼼수가 있더군요 ㅎㅎ

4

생각난 김에 옛날 글에 자답을 남깁니다. 본문은 오래되서 수정이 안되어서요…

docs의 webview를 보시면 왜 그런지 써있습니다.
http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.WebView

요약하자면 4.4부터 웹뷰 브라우저가 변경되었는데, 이게 높이를 제대로 받지 못하는 문제가 있습니다.
ti sdk의 문제는 아니고 android의 문제입니다.

해결 방법은 문서에 있는데로 onresize 이벤트를 사용해야 합니다.
요령은 웹뷰를 원하는 레이아웃보다 높이를 좀 작게 부른다음에, load가 끝나면 높이를 키우면 됩니다.

var webview1 = Titanium.UI.createWebView({
	url: '/html/GMapsDirection.html',
	width: '100%',
	height: '70%'
});
webview1.addEventListener('load',function(e) {
	webview1.height = '100%';
});
$.***.add(webview1);

그리고 html 파일 안에서는 이렇게 처리합니다.
body 안에 제일 기본이 되는 div의 높이를 재정의 해주면 안쪽에 있는 애들도 다 맞아집니다.

window.onresize= function(){
                document.getElementById("main").style.height = window.innerHeight + 'px';
        };
5

네 본문 보다는 답변으로 수정사항을 남겨주시는게 좋아요. 이 포럼에 위에 제가 동우님 글 quote 했듯이 언급하고 싶은 부분을 드래그 하면 아래와 같은 ""인용한 답글"이라는 버튼이 나옵니다. 그럼 저걸 누르면 답글 쓰기 입력창에 자동으로 추가되어 있습니다. 참고하세요.^^

1개의 좋아요