[안드로이드 기본] 스크롤뷰 사용방법

스크롤뷰는 한 화면에 많은 뷰들을 보여줄 때 스크롤을 할 수 있게 해주는 뷰이다.

스크롤뷰의 특성으로는 하나의 뷰를 감쌀 수 있다는 것이다.

 

먼저 스크롤뷰의 간단한 예제로, 세가지의 텍스트뷰를 스크롤뷰 안에 넣어 보자.

하나의 뷰를 감쌀 수 있기 때문에

LinearLayout으로 세가지의 텍스트뷰를 감싸고 넣을 것이다.

 

[activity_main.xml]

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#ff0000"
            android:gravity="center"
            android:text="#ff0000" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#00ff00"
            android:gravity="center"
            android:text="#00ff00" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#0000ff"
            android:gravity="center"
            android:text="#0000ff" />
    </LinearLayout>
</ScrollView>

activity_main.xml design 구성

 

하나의 뷰(LinearLayout)는 스크롤뷰에 감싸지고,

화면에서 벗어난 뷰들을 스크롤을 통해서 하단으로 또는 상단으로 이동할 수 있게된다.

 

다음은 화면 하단부만 스크롤 할 수 있게 하고, 상단에 버튼을 고정시키는 코드이다.

 

[activity_main.xml]

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="button1" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#ff0000"
                android:gravity="center"
                android:text="#ff0000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#00ff00"
                android:gravity="center"
                android:text="#00ff00" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#0000ff"
                android:gravity="center"
                android:text="#0000ff" />
        </LinearLayout>
    </ScrollView>
</LinearLayout>

 

상위 LinearLayout에 버튼을 감싸고, 그 밑에 스크롤뷰로 묶었다.

그 스크롤뷰는 텍스트뷰 세개를 감싸고 있다.

스크롤뷰에 해당되지 않는 버튼은 상위에 고정되게 된다.

 

다음은 하단에 버튼을 고정시키는 코드이다.

나는 처음에 상단에 위치하고 있는 버튼을 스크롤 뷰 다음으로 코드를 옮겨서

실행하면 하단으로 고정이된다고 생각하고 있었다.

 

결과는 하단 버튼이 나타나지 않았다.

그 이유는 스크롤뷰에 있는 텍스트뷰가 이미 전체화면의 범위를 넘어섰고

전체화면 범위를 넘은 버튼은 그려지지 않아서였다.

 

하지만, 아래와 같이 구현하게 되면 가능하다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/button1"
        tools:context=".MainActivity">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#ff0000"
                android:gravity="center"
                android:text="#ff0000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#00ff00"
                android:gravity="center"
                android:text="#00ff00" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#0000ff"
                android:gravity="center"
                android:text="#0000ff" />
        </LinearLayout>
    </ScrollView>

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="button1" />
</RelativeLayout>

바로, RelativeLayout의 alignParentBottom의 속성을 button에 주고,

scrollview의 속성에 button1에 대해서 above를 주게 되면 아래와 같이 하단 버튼을 고정시킬 수 있게 된다.

하단 버튼을 고정

 

스크롤뷰 전체 코드 보러가기