티스토리 뷰

반응형

안녕하세요 오늘은 webview scrollbar가 안보였을때가 있어서 3시간 정도 씨름 했는데요


아주 멍청한게 이유 였던거 같아요 ㅋㅋ


일단 저는 webview에 html/css 코드로 개발을 했었는데요.


구글링하다가 이런방법도 있구나 하는것과 저가 문제되었던거에 대해서 포스팅할께요



1. html/css scrollbar (overflow:scroll)


데스크탑 브라우저에서는 마우스로 스크롤 해서 컨테이너 안에 있는 내용을 모두 볼 수 있지만 스마트폰에서 위 데모에 접속해 보시면 스크롤이 안되는 것을 보실 수 있습니다. 작은 화면을 가진 스마트폰에서는 overflow:scroll; 속성으로 인해 웹페이지를 모두 탐색하지 못하는 경우가 있기 때문에 기능을 막아놓았다고 하는데요, http://css-tricks.com/13246-mobile-webkit-overflow-scrolling/ 여기를 보시면 iOS 5 Beta 2 의 브라우저에서는

-webkit-overflow-scrolling: touch;

위와 같은 속성을 추가하는 것으로 문제를 해결할 수 있다고 합니다. 저는 안드로이드폰을 사용하고 있기 때문에 테스트해보진 못했습니다. 어쨌든 현재 대부분의 폰에서는 overflow:scroll; 을 사용한 내부 스크롤은 사용할 수 없는 상태입니다. 


참고 : http://codefactory.kr/2011/08/15/iscroll-mobileweb-inner-scroll-area



2. Webview Scrollbar code



webview.setHorizontalScrollBarEnabled(true);
webview.setVerticalScrollBarEnabled(true);
webview.setScrollbarFadingEnabled(true);

위에 코드처럼 코드에 추가를 하고


XML  UI코드에


<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:scrollbarThumbVertical="@drawable/custom_scrollbar_thumb"
android:scrollbarTrackVertical="@drawable/custom_scrollbar_track"/>



1. dreawable 폴더에


curtom_scrollbar_thumb.xml 파일생성 내용은


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

<gradient
android:angle="0"
android:color="#aeaeae"
android:startColor="#aeaeae" />

<corners android:radius="6dp" />

</shape>



custom_scrollbar_track.xml  파일생성 내용


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="0"
android:endColor="#00000000"
android:startColor="#00000000" />
<corners android:radius="6dp" />
</shape>



저렇게 2개를 만들고 돌리면  스크롤바가 생긴다는 사실 ㅋㅋㅋㅋ 실행파일은 못보여 드려서 죄송해요. 


움 사실 저의 문제의 이유는 바탕화면이 흰색이라서 스크롤 안보여던거였는데요 


따로 바꿀수가 없어서 저렇게 custom scrollbar로 만들었어요 .


궁금하신 사항이나 더 나은 의견있다면 댓글 달아주세요.~~~

반응형
댓글