Qtのコントロール - ラベル

概要

Qtにおいて、QLabelクラスを使用してラベルをコントロールする手順を記載する。

テキストの折り返し

ラベルの横幅に合わせて文字列を分割して、改行コードを入れた文字列を返す。
QLabelクラスのwordWrapメソッドも存在する。

これは、ラベルの横幅が固定されている場合、長い文字列を表示する時に使用する。
もし、文字列がラベルの横幅に収まる場合、分割・改行せずに文字列を返す。

※注意
フォントの設定を行っていない場合、サイズを正しく計算できないことがある。

 QString MainWindow::wrapLabelText(QLabel *label, QString text)
 {
    int mxWidth = label->width();
    QFontMetrics fm(label->fontMetrics());
    if(fm.width(text) <= mxWidth)
    {
       return text;
    }
 
    QString tmpStr  = "";
    QString lineStr = "";
 
    for(int i = 0; i < text.length(); i++)
    {
       QString str = text.mid(i, 1);
       if(str == "\n")
       {
          tmpStr += lineStr + "\n";
          lineStr = "";
          continue;
       }
 
       if((fm.width(lineStr) + fm.width(str)) >= mxWidth)
       {
          tmpStr += lineStr + "\n";
          lineStr = "";
       }
 
       lineStr += str;
    }
 
    tmpStr += lineStr;
 
    return tmpStr;
 }

ハイパーリンク

ラベルのテキストをハイパーリンクとして表示するには、
Qt Designerでラベルのプロパティを、以下のように設定する。

• textプロパティ

  <a href="URL">表示するテキスト</a>

• textFormatプロパティ

  AutoText

• openExternalLinksプロパティ

  チェックを入力する。

• textInteractionFlagsプロパティ

  LinksAccessibleByMouse

クリック可能なQLabel

QLabelクラスは、リンクの選択時やホバー時にシグナルを送信するが、押下時はシグナルを送信しない。

以下の例では、QLabelクラスを継承したサブクラスを作成して、
QLabelクラスのmousePressEventメソッドをオーバーライドすることにより、ラベル押下時にシグナルを送信している。

 // QClickableLabel.h
 
 class QClickableLabel : public QLabel
 {
 Q_OBJECT
 
 public:
    explicit ClickableLabel(const QString &text="", QWidget* parent=0);
    virtual ~ClickableLabel();
 
 signals:
    void clicked();
 
 protected:
    void mousePressEvent(QMouseEvent* event);
 };

 // QClickableLabel.cpp
 
 ClickableLabel::ClickableLabel(const QString &text, QWidget* parent) : QLabel(text, parent)
 {
 }
 
 void ClickableLabel::mousePressEvent(QMouseEvent* event)
 {
    emit clicked();
 }
 
 ClickableLabel::~ClickableLabel()
 {
 }

画像の表示

ラベルコントロールに画像を表示するには、QLabelクラスのsetPixmapメソッドを使用する。

データ	画像の取得例(QPixmapクラス)
標準画像	QPixmap Pixmap = style()->standardPixmap(QStyle::SP_MediaPlay);
標準カーソル	QCursor Cursor = Qt::WaitCursor; if(!Cursor.pixmap().isNull()) { 　 pixmap = Cursor.pixmap(); }
リソース	QPixmap Pixmap = QPixmap(":/images/mouse01.png");
ファイル	QPixmap Pixmap = QPixmap("C:/temp/testimage.ico");
アイコン	アイコンは複数のサイズを持っているため、サイズを指定する。 自動的にサイズを選択する場合、最大サイズはlastメソッド、最小サイズはメソッドで取得する。 QPixmap pixmap = icon.pixmap(icon.availableSizes().last()); または QPixmap Pixmap = icon.pixmap(32, 32);
イメージ	QPixmap Pixmap.convertFromImage(image);

以下の例では、ラベルに画像を埋め込んでいる。

mainwindow.uiファイルにラベルコントロールを配置している。
また、画像を表示するために、QPixmpをインクルードする必要がある。

 // mainwindow.cpp
 
 #include "mainwindow.h"
 #include "ui_mainwindow.h"
 #include <QPixmap>
 
 MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow)
 {
    ui->setupUi(this);
 
    QPixmap pix("<画像ファイルのパス>");
    ui->label->setPixmap(pix);
 }
 
 MainWindow::~MainWindow()
 {
    delete ui;
 }

また、ラベルコントロールに埋め込む画像を拡大表示するには、以下のように記述する。

 // 変更前
 ui->label->setPixmap(pix);
 
 // 変更後
 ui->label->setPixmap(pix.scaled(<横のピクセル>, <縦のピクセル>));

ラベルコントロールに埋め込む画像サイズは、ラベルのサイズ変更に自動的に対応する。

 std:unique_ptr<QLabel> Label = std::make::unique<QLabel>();
 label->setPixmap(style()->standardPixmap(QStyle::SP_TitleBarMenuButton));
 
 // trueを指定する場合、縦横比を無視してラベルのサイズ限界まで画像を表示する
 label->setScaledContents(false);

画像の伸縮

QPixmapクラスを使用することで、縦横比を保ってサイズを変更することができる。

以下の例では、まず、ラベルコントロールに画像を割り当てている。

 QLabel *label = new QLabel;
 label->setFixedSize(150, 150);
 label->setAlignment(Qt::AlignLeft | Qt::AlignTop);
 label->setStyleSheet("background:violet;");
 
 // ラベルコントロールに画像を設定する4つの方法
 QPixmap pixmap = QPixmap(":/images/cat.jpg");
 
 label->setPixmap(pixmap);                      // 原画像のサイズで表示する
 label->setPixmap(pixmap.scaled(150, 150));     // 縦横のサイズを指定する
 label->setPixmap(pixmap.scaledToHeight(150));  // 縦のみを指定する(縦横比を保って横も自動的に伸縮する)
 label->setPixmap(pixmap.scaledToWidth(150));   // 横のみを指定する(縦横比を保って縦も自動的に伸縮する)

ラベルの背景画像

QSSを使用することより、背景の色と画像のタイル表示ができる。

テキストや表示位置は、setTextやsetAlignmentで設定する。
no-repeatを省略する場合、タイル表示になる。
background-sizeは指定できない。

 label->setStyleSheet("font-weight:bold;"
                      "background:skyblue url(:/images/close-hover.gif) no-repeat;");

ボックスタイプのウィジェットは、同様に背景を設定することができる。
QSSの詳細は、装飾とスタイルを参照すること。

カーソル

ラベルコントロール上のカーソルを変更するには、QLabelクラスのsetCursorメソッドを使用する。

データ	カーソル画像の取得例(QCursorクラス)
標準画像	QCursor Cursor = QCursor(style()->standardPixmap(QStyle::SP_MediaPlay)); label->setCursor(Cursor);
標準カーソル	Qcursor Cursor = Qt::WaitCursor; label->setCursor(Cursor);
リソース	QCursor Cursor = QCursor(QPixmap(":/images/mouse01.png")); label->setCursor(Cursor);
ファイル	QCursor Cursor = QCursor(QPixmap("C:/temp/testimage.ico")); label->setCursor(Cursor);

下表に、標準カーソルの種類を示す。

標準カーソルはOSに依存するため、画像を取り出すことはできない。
画像ファイルやQPixmapクラスから作成したカーソルは、画像を取り出すことができる。

表. 標準カーソルの種類(enum Qt::CursorShape)

定義	値	カーソル名
ArrowCursor	0	left_ptr
UpArrowCursor	1	up_arrow
CrossCursor	2	cross
WaitCursor	3	wait
IBeamCursor	4	ibeam
SizeVerCursor	5	size_ver
SizeHorCursor	6	size_hor
SizeBDiagCursor	7	size_bdiag
SizeFDiagCursor	8	size_fdiag
SizeAllCursor	9	size_all
BlankCursor	10	(空白)
SplitVCursor	11	split_v
SplitHCursor	12	split_h
PointingHandCursor	13	pointing_hand
ForbiddenCursor	14	forbidden
WhatsThisCursor	15	whats_this
BusyCursor	16	left_ptr_watch
OpenHandCursor	17	openhand
CloseHandCursor	18	closehand
DragMoveCursor	19	dnd_move/move
DragCopyCursor	20	dnd_copy/copy
DragLinkCursor	21	dnd_link/link