Qt Resource 활용 Main Toolbar 이미지 버튼 추가하기

Qt 환경에서 GUI를 만들 경우 단순히 Qt에서 제공하는 버튼을 활용하여 구성할 수도 있지만, 상황에 따라 UI에 대한 디자인이 필요할 수도 있습니다. 이 경우 자신이 가지고 있는 이미지를 UI에 적용 가능합니다.

 

이미지 파일들을 관리하기 위해 Qt Resource File을 만들어야 하는데, 먼저 Resource System의 개념을 설명하겠습니다.
Qt의 Resource System은 이진 파일을 응용 프로그램의 실행 파일에 저장하기위한 플랫폼 독립적 메커니즘입니다. 

응용 프로그램에 항상 특정 파일 세트 (아이콘, 변환 파일 등)가 필요하고 파일이 손실될 위험이 없어야 되는 경우에 사용합니다.

또한, Resource System은 qmake, rcc (Qt의 자원 컴파일러) 및 QFile 간의 상호 작용을 기반으로 동작합니다.
응용 프로그램과 관련된 리소스는 디스크의 파일을 나열하고 응용 프로그램이 리소스에 액세스하는데,

사용해야하는 리소스 이름을 선택적으로 할당하는 XML 기반 파일 형식 인 .qrc 파일로 지정됩니다.

 

Resouce System을 이용하지 않고 UI에 이미지 사용할 경우,

때때로 VNC를 통해 원격 접속하여 프로그램을 실행할 경우에 이미지가 나타나지 않는 오류가 발생하였습니다.

이후 UI에서 이미지를 사용할 때에는 Resource System을 사용합니다.

 

결국, 리소스의 각 파일은 파일 시스템의 파일에 대한 링크입니다. 

실행 파일이 빌드되면 파일이 실행 파일에 들어가 원본 파일을 바이너리와 함께 배포할 필요가 없습니다. 

이제 Main Toolbar 부분에 이미지 형태의 버튼 추가 방법에 대해 1~8번의 순서대로 보겠습니다.

 

1. 우선 버튼으로 만들 이미지를 준비합니다.

/home/Image_Folder에 예제로 사용하기 위한 1~5번까지 png 파일을 준비하였습니다.

 

2. Image Project에서 Add New를 선택합니다.

 

3. Qt 탭에서 Qt Resource File을 선택합니다. 이후, qrc 파일명과 경로를 설정해주도록 합니다.

 

4. 완료하면 Resources 폴더에 새롭게 추가한 xxx.qrc 파일이 생성되는데, 예제는 Image_FIle.qrc로 생성하였습니다.

이제 만들어진 Image_FIle.qrc 파일에 Add Existion Files을 선택하여 버튼으로 제작할 이미지 파일들을 추가해주도록 합니다.

 

5. 예제는 /home/Image_Folder에 저장되어 있는 1~5.png 파일을 추가하였습니다. Resource 하위 경로에 추가된 이미지 파일의 모습입니다.

 

6. 이제 추가한 이미지들을 Main Toolbar에 적용시키기 위해 mainwindow.ui 파일로 들어와 아래와 같이 진행합니다.

좌측 아래의 Action Editor 창에서 New 버튼을 선택하여 Icon 쪽에서 Choose File을 선택 후 버튼 모양으로 적용하고 싶은 이미지를 선택합니다.

 

7. Action Editor에 추가된 버튼들을 드래그하여 Main Toolbar로 위치시키는 과정입니다.

또한, 버튼이 제대로 눌렸는지 확인하기 위해 버튼에 대한 메세지를 출력할 TextBrowser를 아래에 생성하였습니다.

 

8. mainwindow.ui에서 1~5번 이미지를 추가한 후 프로그램을 실행했을 때 UI입니다.

버튼의 사이즈를 늘리기 위해 MainWindow 생성자에서 ui->mainToolBar->setIconSize(QSize(85, 40)); 코드를 추가하였습니다.

 

// Source

// mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
 
#include <QMainWindow>
 
namespace Ui {
class MainWindow;
}
 
class MainWindow : public QMainWindow
{
    Q_OBJECT
 
public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
 
private slots:
    void on_actionButton_1_triggered();
    void on_actionButton_2_triggered();
    void on_actionButton_3_triggered();
    void on_actionButton_4_triggered();
    void on_actionButton_5_triggered();
 
private:
    Ui::MainWindow *ui;
};
 
#endif // MAINWINDOW_H
 
 
// mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
 
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->mainToolBar->setIconSize(QSize(85, 40));
}
 
MainWindow::~MainWindow()
{
    delete ui;
}
 
void MainWindow::on_actionButton_1_triggered()
{
    ui->textBrowser->clear();
    ui->textBrowser->insertPlainText("Orange Button Click !!");
}
 
void MainWindow::on_actionButton_2_triggered()
{
    ui->textBrowser->clear();
    ui->textBrowser->insertPlainText("Pink Button Click !!");
}
 
void MainWindow::on_actionButton_3_triggered()
{
    ui->textBrowser->clear();
    ui->textBrowser->insertPlainText("Light sky blue Button Click !!");
}
 
void MainWindow::on_actionButton_4_triggered()
{
    ui->textBrowser->clear();
    ui->textBrowser->insertPlainText("Bluish green Button Click !!");
}
 
void MainWindow::on_actionButton_5_triggered()
{
    ui->textBrowser->clear();
    ui->textBrowser->insertPlainText("Yellow Button Click !!");
}