Android : 스크롤뷰와 그리드뷰

ScrollView

---

개요

어떤 컨텐츠를 화면에 표시할 때 화면보다 컨텐츠가 큰 경우 컨텐츠가 잘려버린다면 서비스를 사용하는데 있어 불편함을 초래할 것입니다.

웹에서는 브라우저에서 스크롤이라는 기능을 자동으로 지원하여 뷰포트보다 크기가 큰 컨텐츠를 보여줄 때 스크롤을 조작하여 모든 컨텐츠를 다 열어볼 수 있습니다.

Android에서는 ScrollView를 통해 스크롤을 사용할 수 있습니다.

단, ScrollView는 하나의 자식태그만 가질 수 있기 때문에 다양한 컴포넌트들을 처리하고자 할 때는 하나로 감싼 다음 적용해주어야 합니다.

ScrollView 사용 예시

<?xml version="1.0" encoding="utf-8"?>
<!-- <androidx.constraintlayout.widget.ConstraintLayout> -->
<ScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
>
    <TableLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
    >
        <TableRow>
            <TextView android:text="국어" 
                      android:textSize="50dp" 
                      android:paddingBottom="100dp" 
            />
            <TextView android:text="영어" 
                      android:textSize="50dp" 
                      android:paddingBottom="100dp" 
            />
            <TextView android:text="수학" 
                      android:textSize="50dp" 
                      android:paddingBottom="100dp" 
            />
        </TableRow>
        <TableRow>
            <TextView android:text="국어"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
            <TextView android:text="영어"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
            <TextView android:text="수학"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
        </TableRow>
        <TableRow>
            <TextView android:text="국어"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
            <TextView android:text="영어"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
            <TextView android:text="수학"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
        </TableRow>
        <TableRow>
            <TextView android:text="국어"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
            <TextView android:text="영어"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
            <TextView android:text="수학"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
        </TableRow>
        <TableRow>
            <TextView android:text="국어"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
            <TextView android:text="영어"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
            <TextView android:text="수학"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
        </TableRow>
        <TableRow>
            <TextView android:text="국어"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
            <TextView android:text="영어"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
            <TextView android:text="수학"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
        </TableRow>
        <TableRow>
            <TextView android:text="국어"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
            <TextView android:text="영어"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
            <TextView android:text="수학"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
        </TableRow>
        <TableRow>
            <TextView android:text="국어"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
            <TextView android:text="영어"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
            <TextView android:text="수학"
                      android:textSize="50dp"
                      android:paddingBottom="100dp"
            />
        </TableRow>
    </TableLayout>

</ScrollView>
<!-- </ androidx.constraintlayout.widget.ConstraintLayout> -->

위 예시는 스크롤을 보이게 하기 위해 일부러 같은 것을 반복하여 작성한 것입니다.

이렇게 해주면 화면에 스크롤이 나타나게 되고 위아래로 쓸어넘기면서 모든 컨텐츠를 다 볼 수 있습니다.

주의할 점은 ScrollView가 아닌 주석 처리된 ConstraintLayout을 사용하게 되면 화면단에서 스크롤뷰를 지원하지 않으며 본래 스크롤을 넘겼을 때 표시되는 컨텐츠들은 나오지 않고 잘리게 됩니다.

GridView

---

개요

그리드는 row와 column의 집합체입니다. 비교대상으로 table 또한 row와 column의 집합체인데, 둘의 차이점은 컴포넌트가 사용자가 지정한대로 들어가는지 그렇지 않은지 입니다.

그리드는 순서대로 들어갑니다. 테이블은 사용자가 지정한 대로 해당 자리에 값이 들어갑니다.

GridView 사용 예시

스피너를 그리드 형태로 배치시켜보겠습니다.

GridView 준비

우선 그리드뷰가 준비되어야 합니다. 그리드뷰에서 선택한 내용의 반영여부를 확인하기 위해 텍스트뷰도 준비해줍니다. MainActivity에서 스피너로부터 선택한 결과를 텍스트뷰에 보여줄 것입니다.

<!-- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            app:layout_constraintTop_toTopOf="parent" 
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent" 
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintVertical_bias="0.069"/>
    <GridView
            android:id="@+id/grid"
            android:numColumns="auto_fit"
            android:columnWidth="100dp"
            android:layout_width="509dp"
            android:layout_height="732dp"
            tools:ignore="MissingConstraints"
            app:layout_constraintTop_toBottomOf="@+id/textView"
            app:layout_constraintBottom_toBottomOf="parent" 
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

스피너 아이템 준비

스피너를 사용할 것이기 때문에 스피너 내부에 들어갈 아이템 요소를 준비해줍니다.

<!-- item_spinner.xml -->
<?xml version="1.0" encoding="utf-8"?>
<TextView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/tvItemSpinner"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:paddingTop="10dp"
        android:paddingStart="30dp"
        android:textColor="@android:color/black"
        android:textSize="15sp"
        android:paddingLeft="30dp"
/>

MainActivity 손보기

우선 임의의 배열을 만들어줍시다. 이 배열이 스피너의 아이템이 될 것입니다.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.ArrayAdapter
import android.widget.GridView
import android.widget.TextView

class MainActivity : AppCompatActivity() {

    var items = arrayOf(
        "서울", "부산", "대구", "광주", "인천", "목포", "여수", "태백",
        "서울", "부산", "대구", "광주", "인천", "목포", "여수", "태백",
        "서울", "부산", "대구", "광주", "인천", "목포", "여수", "태백",
        "서울", "부산", "대구", "광주", "인천", "목포", "여수", "태백"
    )

그 다음으로 override된 onCreate 함수 내부에 텍스트뷰와 그리드뷰를 아이디값으로 불러와 캐스트 변환 해주었습니다.

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val textView = findViewById<View>(R.id.textView) as TextView
        val grid = findViewById<View>(R.id.grid) as GridView

위에서 선언한 items 배열을 스피너 아이템에 Adapter로 꽂아주고 이를 그리드에 뿌려줍니다.

        grid.adapter = ArrayAdapter(this, R.layout.item_spinner, items)
        /* 또는
        grid.setAdapter(
            ArrayAdapter(this, R.layout.item_spinner, items)
        )
        */

그리드를 클릭했을 때 텍스트뷰를 배열의 인덱스에 맞게 업데이트 시켜줍니다.

        grid.setOnItemClickListener { parent, view, position, id ->
            textView.text = items[position]
        }

    }
}