【PySide】QtDesignerでDrag and DropできるWidget設定

こんにちは、運動不足解消のために筋トレを始めました！
COYOTE 3DCG STUDIO TAのやまたくです。

今回はQtDesignerでDrag and DropできるWidget設定方法を紹介します。

QtDesigner便利ですよね。
Widget（ボタンなどのUIパーツ）を視覚的に並べながらUIを作成できるのよく利用してます。

ただ、Main windowの中にDrag and DropできるWidgetを設定するのに一工夫必要で、
Webにも情報が少なかったのでご紹介します。

作成するツール

アウトライナーのノードをDrag and DropでQListWidgetに追加できるツールを作成します。

作成手順

1. QtDesignerでUIを作成
2. Drag and DropしたいWidgetを継承したクラスを作成
3. QtDesignerでWidgetの格上げ設定を行う
4. .uiを.pyに変換
5. QMainWindowを継承したクラスを作成し、UIをセットアップ
6. MayaでUIを起動

QtDesignerでUIを作成

まずは普段通りにUIを作成します。

./dAndDToolUi.ui

Drag and DropしたいWidgetを継承したクラスを作成

今回はQListWigetにDrag and Dropを設定したいので下記サンプルコードのように
継承クラスを作成します。

./dAndDQListWidget.py

import maya.cmds as cmds

from PySide2.QtWidgets import QAbstractItemView, QListWidget, QListWidgetItem

class DandDQListWidget(QListWidget):
    def __init__(self, *args, **kwargs):
        super(DandDQListWidget, self).__init__(*args, **kwargs)

        # Drag&Drop可能にする設定
        self.setAcceptDrops(True)
        self.setDragDropMode(QAbstractItemView.InternalMove)

    # ドラッグイベントがウィジェットに入るときに呼び出されるメソッドをオーバーライド
    def dragEnterEvent(self, event):
        if cmds.ls(sl=True):
            event.accept()
        else:
            event.ignore()

    # ドラッグアンドドロップイベントが完了したときに呼び出されるメソッドをオーバーライド
    def dropEvent(self, event):
        objList = cmds.ls(sl=True)
        for obj in objList:
            self.addItem(QListWidgetItem(obj))

QtDesignerでWidgetの格上げ設定を行う

先ほど作成したクラスをQtDesignerのWidgetに割り当てます。

1. Main Windowを右クリック＞格上げされたウィジェット…をクリック。

2. ベースクラス名: QListWidget
   格上げされたクラス名: DandDQListWidget(先ほど作成したクラス)
   ヘッダファイル: .dAndDQListWidget
   .uiからDandDQListWidgetを相対importするイメージです
   （from .dAndDQListWidget(ヘッダファイル) import DandDQListWidget（クラス））
   

   

3. 追加ボタンをクリック。

4. QListWidgetを選択し、右クリック＞格上げ先＞DandDQListWidget　を選択
   

   

.uiを.pyに変換

割り当て終わりましたら.uiファイルを.pyに変換します。
変換はこちらの記事を参考にしました。
簡単に作れる MayaPyside-GUI

変換後の.pyを開き、最終行を確認すると

from .dAndDQListWidget import DandDQListWidget

とあります。これが先ほど格上げ設定した内容です。

QMainWindowを継承したクラスを作成し、UIをセットアップ

Qtdesignerで作成したUI.pyをMayaで表示させるためにセットアップを行います。

./dAndDTool.py

from PySide2.QtWidgets import QApplication, QMainWindow

from maya.app.general.mayaMixin import MayaQWidgetBaseMixin

from . import dAndDToolUi_pyside2

class MainWindow(MayaQWidgetBaseMixin, QMainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)

        # .uiを.pyに変換したuiを読み込む
        self.ui = dAndDToolUi_pyside2.Ui_MainWindow()
        self.ui.setupUi(self)

def main():
    app = QApplication.instance()
    window = MainWindow()
    window.show()
    app.exec_()

if __name__ == '__main__':
    main()

MayaでUIを起動

MayaでUIを起動します。

from DandDWidget import dAndDTool, dAndDQListWidget, dAndDToolUi_pyside2
reload(dAndDTool)
reload(dAndDQListWidget)
reload(dAndDToolUi_pyside2)
dAndDTool.main()

これでDrag and DropできるWidgetを設定できました！

おわりに

QtDesignerを使えば複雑なUIも簡単に作成することができます。
BOOTHに公開しているMaya Menubar ManagerもQtDesignerで作成しました。
無料で使用できますので是非ダウンロードをお願いします！
Maya Menubar Manager

他のツールも無料公開しておりますのでご活用頂けますと嬉しいです！
BOOTH COYOTE TAチーム

---

COYOTE 3DCG STUDIO

公式HP：https://3d.crdg.jp/

COYOTE 3DCG STUDIOはクリーク･アンド･リバー社が運営するゲーム専門3DCG制作集団です。
キャラモデル、背景モデル、3Dアニメーション、テクニカルアーティストによるツール開発などを得意としています。
新規立ち上げにおけるコンサルティングから量産制作まで幅広く対応可能な体制を保有しており、出向にも柔軟に対応しております。

---