[android] ConstraintLayout에서의 가로 스크롤뷰 구현

안드로이드 앱을 개발하다 보면, 가로 방향으로 스크롤이 가능한 뷰를 구현해야 하는 경우가 있습니다. ConstraintLayout을 사용하여 이를 간단히 구현하는 방법을 알아보겠습니다.

1. HorizontalScrollView 추가

가로 스크롤뷰를 구현하기 위해, 먼저 XML 레이아웃 파일에 HorizontalScrollView를 추가합니다.

<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- 스크롤될 내용을 추가합니다 -->

</HorizontalScrollView>

2. ConstraintLayout과 LinearLayout 조합

가로 스크롤뷰 내에 여러 뷰를 가로로 나란히 배치하기 위해서, ConstraintLayoutLinearLayout을 결합하여 사용합니다. 아래는 가로 스크롤뷰에 ConstraintLayoutLinearLayout을 활용한 예시 코드입니다.

<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 2" />

        <!-- 추가적인 뷰들을 나열합니다 -->

    </LinearLayout>

</HorizontalScrollView>

3. 제약 조건 설정

나란히 배치된 뷰들을 제약 조건을 설정하여 가로 스크롤뷰의 가로 스크롤을 허용할 수 있습니다.

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"

위의 예시에서 Button1Button2를 가로 방향으로 나란히 배치하고, ConstraintLayout을 통해 전체적인 위치를 설정할 수 있습니다.

이제 가로 스크롤뷰를 구현하는 방법에 대해 간략히 알아보았습니다. ConstraintLayout을 활용하여 여러 뷰를 가로로 나란히 배치하고, 가로 스크롤을 구현할 수 있습니다.

참고 자료

  1. Android Developer - ConstraintLayout
  2. Android Developer - HorizontalScrollView