Android용 Qt 시작하기

이 튜토리얼에서는 Qt Creator 을 사용하여 Android 기기용 Qt Quick 애플리케이션을 개발하는 방법을 설명합니다.

가속도계 값의 변화에 따라 SVG(Scalable Vector Graphics) 이미지를 가속화하는 Qt Quick 애플리케이션을 개발합니다.

개발 환경 설정

Qt for Android를 시작하려면:

1. Qt를 다운로드하여 설치하십시오. 이를 위해 'Qt 다운로드 및 설치' 페이지의 지침을 따르십시오.
2. 'Qt for Android 필수 구성 요소'에 설명된 대로 필요한 모든 도구를 설치하고 개발 환경을 구성하십시오.

프로젝트 생성

1. Qt Creator 를 엽니다. ' File ' > ' New Project ' > ' Application (Qt) ' > Qt Quick Application로 이동합니다.

   

2. ' Choose... '을 선택하여 ' Project Location ' 대화 상자를 엽니다.
3. ' Name'에서 애플리케이션 이름을 입력합니다.

   

4. ' Create in'에서 프로젝트 파일의 경로를 입력하십시오. 프로젝트 폴더는 나중에 문제없이 이동할 수 있습니다.
5. Next (macOS의 경우 Continue )을 선택하여 ‘ Define Project Details ’ 대화 상자를 엽니다.

   

6. Next (macOS의 경우 Continue )를 선택하여 Kit Selection 대화 상자를 엽니다.
7. 애플리케이션을 빌드할 플랫폼에 해당하는 키트를 선택하십시오.

   

   참고: 이 목록에는 [ Preferences ] > [ Kits]에서 지정한 키트가 표시됩니다. 자세한 내용은 ‘키트 추가’ 및 ‘키트 관리’를 참조하십시오.

8. Next (macOS에서는 Continue )를 선택하여 ‘ Project Management ’ 대화 상자를 엽니다.
9. 프로젝트 설정을 검토한 후, ' Finish '(macOS의 경우 ' Done ')를 선택하여 프로젝트를 생성합니다.

   

리소스로 이미지 추가

애플리케이션의 메인 뷰에는 기기를 기울이면 화면 주위를 움직이는 SVG 버블 이미지가 표시됩니다.

애플리케이션을 실행할 때 이 이미지가 표시되려면, 마법사가 생성한 CMakeLists.txt 파일 내의 qt_add_qml_module() 메서드에 있는 RESOURCES 인자로 해당 이미지를 리소스로 지정해야 합니다.

qt_add_qml_module(appaccelbubble
    URI accelbubble
    QML_FILES Main.qml
    RESOURCES Bluebubble.svg
)

Accelbubble 메인 뷰 생성

1. Projects 뷰에서 Main.qml 를 선택합니다. Main.qml 파일의 내용을 다음 코드로 대체합니다:

   import QtQuick
   import QtQuick.Controls.Material
   
   ApplicationWindow {
       id: mainWindow
       width: 320
       height: 480
       visible: true
       title: qsTr("Accelerate Bubble")
       Image {
           id: bubble
           source: "Bluebubble.svg"
           smooth: true
       }
   
   }

   이 코드는 Window 의 기본 속성을 변경하고, 방금 추가한 이미지를 뷰에 추가합니다. 대신 다른 이미지나 컴포넌트를 사용할 수도 있습니다.

2. 메인 창의 너비와 높이에 맞춰 이미지 위치를 조정하려면 사용자 정의 속성을 추가하십시오:

   import QtQuick
   import QtQuick.Controls.Material
   
   ApplicationWindow {
       id: mainWindow
       width: 320
       height: 480
       visible: true
       title: qsTr("Accelerate Bubble")
       Image {
           id: bubble
           source: "Bluebubble.svg"
           smooth: true
           property real centerX: mainWindow.contentItem.width / 2
           property real centerY: mainWindow.contentItem.height / 2
           property real bubbleCenter: bubble.width / 2
           x: centerX - bubbleCenter
           y: centerY - bubbleCenter
       }
   
   }

3. 다음과 같은 import 문을 추가하세요:

   import QtSensors

   가속도계 센서 값을 기반으로 버블을 이동시키려면 이 임포트 문이 필요합니다.

4. Accelerometer 컴포넌트를 추가하고 필요한 속성을 설정하세요:

   import QtQuick
   import QtQuick.Controls.Material
   import QtSensors
   ApplicationWindow {
       id: mainWindow
       ...
       Accelerometer {
           id: accel
           dataRate: 100
           active: true
       }
       ...

5. 현재 가속도계 값을 기반으로 버블의 x, y 위치를 계산하는 다음 JavaScript 함수를 추가하세요:

   import QtQuick
   import QtQuick.Controls.Material
   import QtSensors
   ApplicationWindow {
       id: mainWindow
       ...
       Accelerometer {
           id: accel
       ...
       }
       function calcPitch(x,y,z) {
           return -Math.atan2(y, Math.hypot(x, z)) * mainWindow.radians_to_degrees;
       }
       function calcRoll(x,y,z) {
           return -Math.atan2(x, Math.hypot(y, z)) * mainWindow.radians_to_degrees;
       }
       ...

6. 가속도계 컴포넌트의 ‘ onReadingChanged ’ 신호에 대한 다음 자바스크립트 코드를 추가하여, 가속도계 값이 변경될 때 버블이 움직이도록 하세요:

       Accelerometer {
           id: accel
           dataRate: 100
           active: true
           onReadingChanged: {
               var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * .1)
               var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y, accel.reading.z) * .1)
   
               if (isNaN(newX) || isNaN(newY))
                   return;
   
               if (newX < 0)
                   newX = 0
   
               if (newX > mainWindow.contentItem.width - bubble.width)
                   newX = mainWindow.contentItem.width - bubble.width
   
               if (newY < 0)
                   newY = 0
   
               if (newY > mainWindow.contentItem.height - bubble.height)
                   newY = mainWindow.contentItem.height - bubble.height
   
               bubble.x = newX
               bubble.y = newY
           }
       }

   버블의 위치가 항상 화면 범위 내에 있도록 해야 합니다. 가속도계가 숫자가 아닌 값 (NaN) 을 반환하는 경우, 해당 값은 무시되며 버블의 위치는 업데이트되지 않습니다.

7. 버블의 x 및 y 속성에 SmoothedAnimation 동작을 추가하여 움직임이 더 부드럽게 보이도록 하세요.

       Image {
           id: bubble
           source: "Bluebubble.svg"
           smooth: true
       ...
           Behavior on y {
               SmoothedAnimation {
                   easing.type: Easing.Linear
                   duration: 100
               }
           }
           Behavior on x {
               SmoothedAnimation {
                   easing.type: Easing.Linear
                   duration: 100
               }
           }
       ...

기기 방향 고정

기본적으로 기기의 방향이 세로 모드와 가로 모드 사이에서 변경되면 화면이 회전합니다. 화면 방향을 세로 모드로 고정하면 이 애플리케이션이 더 보기 좋습니다.

Android에서는 Qt Creator 에서 생성한 AndroidManifest.xml 파일에서 화면 방향을 설정합니다. 화면을 세로 모드로 고정하려면:

1. Tools > Android > Manifest XML Source 로 이동합니다. ` Qt Creator `은 프로젝트 디렉터리 내의 android 디렉터리에 파일을 생성하고 매니페스트 편집기에서 해당 파일을 엽니다.
2. 매니페스트 편집기에서 ‘ XML Source ’을 선택하고, ‘ activity ’ 요소의 ‘ android:screenOrientation ’ 속성을 ‘ portrait ’로 설정합니다.

   <?xml version='1.0'?>
   <manifest ...>
       <supports-screens.../>
       <!--%%INSERT_PERMISSIONS-->
       <!--%%INSERT_FEATURES-->
       <application ...>
           <activity ... android:screenOrientation="portrait">
       ...

   자세한 내용은 ‘Android 매니페스트 파일 편집’을 참조하십시오.

의존성 추가

이 애플리케이션은 Qt Sensors 및 Qt SVG 모듈을 사용하므로, CMakeLists.txt 파일에 해당 모듈을 종속성으로 추가해야 합니다. 종속성을 추가하려면:

1. ` find_package ` 함수에 ` Sensors ` 및 ` Svg ` 컴포넌트를 추가합니다. 이렇게 하면 CMake가 Qt 설치 위치를 찾아 해당 모듈을 가져오게 됩니다:

   find_package(Qt6 REQUIRED COMPONENTS Quick Sensors Svg)

2. target_link_libraries 함수에 임포트된 타깃을 추가하십시오:

   target_link_libraries(appaccelbubble
       PRIVATE Qt6::Quick Qt6::Sensors Qt6::Svg)

   이렇게 하면 CMake는 ` accelbubble ` 실행 파일이 해당 모듈을 사용한다는 것을 인식합니다. 이후 CMake는 링크러에 필요한 인수를 전달하고, C++ 컴파일러에는 적절한 포함 디렉터리와 컴파일러 정의 정보를 전달합니다.

3. 구성 변경 사항을 적용하려면 Build 로 이동하여 ‘ Run CMake ’을 선택하십시오.

CMakeLists.txt 파일에 대한 자세한 내용은 ‘CMake 시작하기’를 참조하십시오.

애플리케이션 실행

이제 애플리케이션을 실제 또는 가상 Android 기기에 배포할 수 있습니다.

실제 기기를 사용하는 경우:

1. Android 기기에서 USB 디버깅을 활성화하십시오.
2. 기기를 개발용 PC에 연결합니다.

여러 대의 기기가 연결된 경우, ' Qt Creator '을 통해 애플리케이션을 실행할 기기를 선택할 수 있습니다.

기기에서 애플리케이션을 실행하려면 Ctrl+R (Cmd+R)을 누르십시오.

기기에서 애플리케이션이 실행되면 기기를 기울여 화면 위에서 버블이 움직이는 모습을 확인할 수 있습니다. 버블은 기울인 방향으로 움직이며, 이동 속도는 기울기 각도에 따라 달라집니다. 기기를 더 많이 기울일수록 버블이 더 빠르게 움직입니다.