스크롤바(ScrollBar) 색상, 위치 변경해보기

스크롤바(ScrollBar) 

색상, 위치 변경해보기

ㆍ이번글에서는 스크롤바의 위치와 색상관련해서 글을 써보도록

   하겠습니다.

   기본적으로 제가 디자인을 워낙 못꾸며서 뭐 바꿔봤자 

   기본값과 비교해도 차이가 없을거 같긴한데 시도는 한번 

   해보도록 하겠습니다.

시작전에 대충 긴 문장

아무거나 넣은후에

<ScrollView>를 추가시켜

보겠습니다.

저는 뭐 블로그

아무글이나

복붙했습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical"
    android:gravity="center">

    <ScrollView
        android:layout_width="300dp"
        android:layout_height="300dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="어쩌구"
            android:textColor="#000000" />
    </ScrollView>

</LinearLayout>

뭐 대충 이런식으로 짤 수 있겠죠

ScrollView 사이즈는 전체화면은

보기 싫을거 같아서 대충 정했습니다.

아무것도 설정 안한상태에서

실행시켜보겠습니다.

왜 이리 글씨가 흐리지..

음 아무튼..

가장 흔한 스크롤뷰

형태입니다

스크롤바는 우측에 딱 

붙어있고 스크롤할때만

막대기가 보였다가

손을 떼면 사라졌다가

하는 형태입니다.

여기서 하나씩

변경하면서

변화를 보겠습니다.

일단 저는 스크롤바를

항상보이게 하기 위해서

스크롤바에 이거 2개를

추가하겠습니다

android:scrollbarFadeDuration = "0"

android:scrollbarAlwaysDrawVerticalTrack = "True"

이렇게만 추가시키면

스크롤바를 항상 볼 수

있습니다

아 이런 방법도 있습니다

android:scrollbarDefaultDelayBeforeFade="500000"

하여튼 일단

위와같이 바꾼후에

스크롤바 위치를 

우측(기존) -> 좌측으로

바꾸기 위해서

아래 코드를 추가시킵니다

android:VerticalScrollbarPosition = "left"

여기까지 하면

아래와 같은

코드가 되겠죠

<ScrollView
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:scrollbarFadeDuration="0"
    android:scrollbarAlwaysDrawVerticalTrack="true"
    android:verticalScrollbarPosition="left">

실행시켜 보면

왼쪽으로 고정된 것을

확인 할 수 있습니다.

근데 스크롤막대가

글씨를 가려서

보기 안좋지 않나요?

물론 스크롤바

항상고정이 아니라면

얘기가 달라지겠지만요

이럴경우에는

방법이 여러개있는데

안에 TextView

왼쪽에 margin을 줘도

되지만...

지금은 스크롤바에

관한 글을 쓰고있으므로

아래와 같은 코드를

넣어줍니다

android:scrollbarStyle="outsideInsent"

위 코드를 넣어주면

이렇게 TextView 옆에

배치되게 됩니다.

아 그리고 스타일에

총 4가지 있는데

각자 한번씩 넣어서

돌려보시면 차이점을

느끼실수 있습니다

자 이제 스크롤바의

색상을 넣어볼까요?

색상을 넣기위해서는

아래의 코드를 넣어줍니다

android:scrollbarThumbVertical = "원하는거"

일단 "원하는 거"라고

적어놨는데

여기는 간단하게

색깔을 입력해도 되고

shape Drawable도 되고

이미지를 넣어도 되고

자유입니다.

저는 기본 color를

넣어보겠습니다.

<ScrollView
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:scrollbarFadeDuration="0"
    android:scrollbarAlwaysDrawVerticalTrack="true"
    android:verticalScrollbarPosition="left"
    android:scrollbarThumbVertical="@color/colorAccent"
    android:scrollbarStyle="insideInset">

이렇게 넣은 후

돌리면

넣은대로 색상을

바꿔줄 수 있습니다.

혹시 너무 스크롤막대가

두꺼운가요?

그렇다면 아래 코드로

사이즈를 변경해주세요

저는 2dp이라고 일단

해봤습니다

android:scrollbarSize="2dp"

위에 두꺼운것보다

괜찮은가요?

자 이번에는

음.. 저 부분이 뭐지

스크롤바 전체의

백그라운드라고 해야되나

그 부분을 색상을

변경해보겠습니다.

이해를 위해서

그냥 바로 변경한 사진을

먼저 보자면

저 파란빛의

색상이 제가 말한

부분입니다.

저걸 추가 하기 위해서는

아래 코드를 넣어주세요

android:scrollbarTrackVertical="아무거나"

위와 마찬가지로

아무거나에는 원하는

색상이나 이미지

다 가능합니다.

저는 기본색상이었습니다

<ScrollView
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:scrollbarFadeDuration="0"
    android:scrollbarAlwaysDrawVerticalTrack="true"
    android:verticalScrollbarPosition="left"
    android:scrollbarThumbVertical="@color/colorAccent"
    android:scrollbarTrackVertical="@color/colorPrimary"
    android:scrollbarSize="2dp"
    android:scrollbarStyle="insideInset">

막대 같은 경우에는

캐릭터 얼굴이나

이런것도 넣어보니까

이쁘게 나오더라구요

한번 자신만의

스크롤바를 만들어보세요