QML의 SwipeView

SwipeView는 QML에서 여러 페이지를 스와이프 제스처를 통해 좌우로 넘길 수 있는 컨테이너입니다. 스마트폰에서 화면을 손가락으로 왼쪽이나 오른쪽으로 넘기며 페이지를 전환하는 것과 같은 동작을 구현할 수 있습니다.

 

 

 

 1. SwipeView 개념 설명

• SwipeView는 여러 개의 페이지를 하나로 묶어서 사용자가 손가락으로 스와이프하여 쉽게 전환할 수 있도록 만들어 줍니다.
• 각 페이지는 일반적으로 Rectangle, Item 또는 Component와 같은 개별 QML 아이템으로 구성될 수 있습니다.
• 탭 UI나 사진 앨범 뷰어 같은 페이지 전환 인터페이스를 구현할 때 매우 유용합니다.

 

 

 

 2. 사용 예시

자동차 시스템에서 탑승자가 오디오, 내비게이션, 차량 설정과 같은 다양한 기능을 빠르게 탐색할 수 있도록 스와이프 기능을 사용하는 경우를 생각해 볼 수 있습니다. SwipeView는 이러한 다중 페이지 인터페이스를 쉽고 직관적으로 전환할 수 있도록 돕습니다.

 

 

 

 3. SwipeView 기본 예제

다음은 기본적인 SwipeView를 사용하는 QML 코드 예제입니다.

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300

    SwipeView {
        id: swipeView
        anchors.fill: parent  // SwipeView가 전체 화면을 채우도록 설정

        // 첫 번째 페이지
        Rectangle {
            color: "lightblue"
            width: swipeView.width
            height: swipeView.height

            Text {
                text: "Page 1"
                anchors.centerIn: parent
                font.pixelSize: 20
            }
        }

        // 두 번째 페이지
        Rectangle {
            color: "lightgreen"
            width: swipeView.width
            height: swipeView.height

            Text {
                text: "Page 2"
                anchors.centerIn: parent
                font.pixelSize: 20
            }
        }

        // 세 번째 페이지
        Rectangle {
            color: "lightpink"
            width: swipeView.width
            height: swipeView.height

            Text {
                text: "Page 3"
                anchors.centerIn: parent
                font.pixelSize: 20
            }
        }
    }
}

 

 

 

 4. SwipeView 동작 설명

• 위 예제에서 SwipeView는 총 3개의 페이지로 구성되어 있으며, 각각의 페이지는 Rectangle로 정의되었습니다.
• 사용자는 페이지를 왼쪽이나 오른쪽으로 스와이프하여 다음 페이지나 이전 페이지로 전환할 수 있습니다.
• 각 페이지의 색상과 텍스트를 달리하여 페이지를 구분했습니다.

 

 

 

 5. SwipeView의 주요 속성과 신호

5.1 주요 속성

1. currentIndex:
   • 현재 보이고 있는 페이지의 인덱스(번호)를 나타냅니다.
   • 페이지는 0부터 시작합니다.

   SwipeView {
       id: swipeView
       currentIndex: 1  // 두 번째 페이지가 처음에 보여지도록 설정
   }
   

2. currentItem:
   • 현재 표시 중인 페이지의 아이템을 나타냅니다.
   • 이 속성을 통해 현재 페이지의 정보를 알거나 조작할 수 있습니다.

 

5.2 주요 이벤트

1. onCurrentIndexChanged:
   • 현재 페이지가 바뀌었을 때 호출됩니다.
   • 이를 통해 페이지가 변경될 때 어떤 동작을 수행할 수 있습니다.

   SwipeView {
       id: swipeView
   
       onCurrentIndexChanged: {
           console.log("Current page index changed to:", currentIndex);
       }
   }
   

 

 

 

 6. SwipeView의 고급 사용법

SwipeView를 사용할 때 페이지와 함께 **탭(Tabs)**을 사용하는 경우도 많습니다. 탭을 통해 페이지를 직접 선택할 수 있도록 UI를 확장해 보겠습니다.

예제: SwipeView와 TabBar 결합

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 350

    // TabBar와 SwipeView 결합
    TabBar {
        id: tabBar
        width: parent.width
        TabButton { text: "Page 1"; onClicked: swipeView.currentIndex = 0 }
        TabButton { text: "Page 2"; onClicked: swipeView.currentIndex = 1 }
        TabButton { text: "Page 3"; onClicked: swipeView.currentIndex = 2 }
    }

    SwipeView {
        id: swipeView
        anchors.top: tabBar.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom

        // 첫 번째 페이지
        Rectangle {
            color: "lightblue"
            width: swipeView.width
            height: swipeView.height
            Text { text: "Page 1"; anchors.centerIn: parent; font.pixelSize: 20 }
        }

        // 두 번째 페이지
        Rectangle {
            color: "lightgreen"
            width: swipeView.width
            height: swipeView.height
            Text { text: "Page 2"; anchors.centerIn: parent; font.pixelSize: 20 }
        }

        // 세 번째 페이지
        Rectangle {
            color: "lightpink"
            width: swipeView.width
            height: swipeView.height
            Text { text: "Page 3"; anchors.centerIn: parent; font.pixelSize: 20 }
        }

        // 탭 변경에 맞춰 SwipeView 페이지 업데이트
        onCurrentIndexChanged: {
            tabBar.currentIndex = currentIndex
        }
    }
}

• TabBar와 SwipeView를 결합하여 사용자에게 페이지 전환을 위한 탭 UI도 제공합니다.
• TabButton 클릭 시 해당하는 페이지로 SwipeView의 currentIndex를 변경하고, 반대로 SwipeView 페이지가 변경될 때 TabBar의 currentIndex도 자동으로 변경되도록 설정했습니다.

 

 

 

 7. 발생할 수 있는 일반적인 문제와 해결 방법

1. SwipeView의 페이지 크기 문제:
   • 페이지가 제대로 보이지 않는 경우, 각 페이지의 width와 height를 반드시 SwipeView의 크기에 맞춰줘야 합니다.
   • 각 페이지에서 width: swipeView.width와 같은 방식으로 부모의 크기에 맞추는 것이 중요합니다.
2. 성능 문제:
   • SwipeView에 너무 많은 페이지를 추가하면 메모리 사용량이 많아질 수 있습니다. 페이지 수가 많을 경우, Loader를 사용하여 필요할 때만 로드하는 방식을 고려해야 합니다.

 

 

 

 8. 실무에서의 활용 예시

• 자동차 시스템에서 오디오, 내비게이션, 블루투스 설정 등 서로 다른 기능을 쉽게 넘겨가며 사용할 수 있도록 SwipeView를 적용할 수 있습니다.
• 갤러리 뷰어처럼 여러 장의 사진을 넘기면서 볼 수 있는 뷰에도 SwipeView가 적합합니다.

 

이제 SwipeView에 대해 이해하셨을 거라 생각합니다. 다양한 페이지를 스와이프를 통해 쉽게 넘길 수 있게 도와주는 매우 유용한 컨트롤입니다. 더 궁금한 점이나 적용 예시가 필요하시면 언제든지 질문해 주세요!

 

 

---

 

 

개인적으로 학습하면서 정리한 내용입니다.
잘못된 내용이 있을 경우 알려주시면 확인 후 수정 및 반영하도록 하겠습니다.

오늘도 감사합니다.(__)