[PySide] QtDesignerで遊ぼう

新年あけましておめでとうございます
今年もマイペースに更新していこうと思いますのでよろしくお願いします

さっそくですが今回は、前回ちょろっと登場した QtDesigner が今回のネタです
画像盛り盛りでお送りします

---

●QtDesignerを起動してあれこれ

Pythonインストールディレクトリ\Lib\site-packages\PySide\designer.exe
でQtDesignerを起動します

最初に出てくるウインドウで、Main Window か Widget を選択してください



レイアウト作業がしやすいように空のウインドウを2枚新規で作っておきます（メイン用とサンドボックス用）
このほうがレイアウトこね回してるときにガチャガチャしなくて楽です

---

●UI部品作成例

よくあるウインドウ下にある3連ボタンを作ってみます
サンドボックス側に左側のウィジェット一覧から Push Button を3つドラッグします
ボタンの表記はダブルクリックすると変更できます



きれいに並べたいので、上のほうにある青い線が3本のレイアウト用アイコンを押します



きれいに並びました！
これをメイン用にドラッグして移植します



ラジオボタンやチェックボックスなどのオプションもこんな感じで
配置してレイアウト、整列出来たら移植、を繰り返します

---

●本体のレイアウト

ある程度要素がそろったら、今度は Grid Layout アイコンを押してウインドウ全体にフィットさせます
これでよくあるウインドウに伸縮についてくる、なんかちゃんとしてるGUI になります（ここ重要ｗ）



Ctrl + R で、実際にどんな感じになるかプレビュー出来ます
ちなみにグリッドレイアウトした後でも中へ部品をねじ込めるのでご安心を



なんか配置がいまいちなので調整しましょう
「ツールのタイトルだよ」というラベルを選択し、右にあるプロパティで
Size Policy の Vertical Policy を、Fixed など、サイズを固定するものにします



下のボタン群ももうちょっと大きくしてみましょう
minimumSize の Height の値を変更します



以下のようにオプションをたくさん並べると、文字数の違うラベルがずれてかっこ悪いです



そういうときはこんな感じに、alignment を AlignRight にすれば右寄せに出来ます
文字数によってはそれでもずれるので、minimumSize の Width を全部共通の値を入れると良いです

---

●スタイルの変更

Settings → Preferences を開き、Formsタブ にスタイルを設定出来る箇所があります
これでUIの部品の見た目を変えることが出来ます



Plastique を選ぶとこんな感じに変わりました
※注：これはあくまでQtDesignerでのプレビューです



実際にこのスタイルを使いたい場合は、前回のUI構築スクリプトに1文追加します

# -*- coding: utf-8 -*-

import os
import sys

from PySide import QtCore, QtGui
from PySide.QtUiTools import QUiLoader

CURRENT_PATH = os.path.dirname(__file__)

#----------------------------------------------------------------------------
## GUIを作るクラス
class GUI(QtGui.QMainWindow):

    def __init__(self, parent=None):
        super(GUI, self).__init__(parent)
        loader = QUiLoader()
        uiFilePath = os.path.join(CURRENT_PATH, 'blogUI.ui')
        self.UI = loader.load(uiFilePath)
        self.setCentralWidget(self.UI)

#------------------------------------------------------------------------------ 
## GUIの起動
def main():
    app = QtGui.QApplication(sys.argv)
    app.setStyle('plastique')    # ← ここでスタイルを指定
    ui = GUI()
    ui.show()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

#-----------------------------------------------------------------------------
# EOF
#-----------------------------------------------------------------------------

26行目の app.setStyle('plastique') # ← ここでスタイルを指定
の部分を追加して実行します
（'plastique' の部分は、実際に指定したいもの）

指定できるスタイルはこんなのがあるようです
（リンクがあるものはPySideドキュメントに参考画像があるものです）

・plastique
・motif
・cde
・gtk
・cleanlooks
・windows
・windowsxp　（winのみ）
・windowsvista　（winのみ）
・macintosh　（macのみ）

いろいろ切り替えてみて、これ！とくるものを探してみてください

---

はい、というわけで簡単なQtDesignerの使い方でした