【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アニメーション、テクニカルアーティストによるツール開発などを得意としています。
新規立ち上げにおけるコンサルティングから量産制作まで幅広く対応可能な体制を保有しており、出向にも柔軟に対応しております。


yamamoto takuya

COYOTE 3DCG STUDIO ツール作成・パイプライン系TA。
Maya, Photoshop, Unityのツール開発やサーバー管理を行っています。
Qtを使ったUI作成が好きです。
老後は猫と暮らしたい。

投稿者記事

  1. 【Photoshop】起動時にスクリプトを実行する方法

    2023-08-29

  2. Mayaツール開発入門!コマンド調査テクニック

    2022-10-26

関連記事

  1. 【Photoshop】起動時にスクリプトを実行する方法

    2023-08-29

  2. ブレずに伸びるSplineIKリグを作ってみる!

    2019-12-24

  3. 【SVN】『SVNのクリーンアップできない』で良くあること

    2019-09-17

  4. いまさら聞けない業界用語 ~ライティング編②~

    2021-08-31

スキルレーダーチャート

テクニカルアーティスト専用
スキルレーダーチャート
どなたでも無料でご利用いただけます。

ABOUT

TECH COYOTE​

テクニカルアーティストの為のまとめサイトです。​
本サイトでは、ツール開発、業務効率化等について情報発信をしていきます。

COYOTE 3DCG STUDIO

C&R Creative Studios

RECENT TWEET

ページ上部へ戻る

運営会社

logo-rec-1.png
© CREEK & RIVER Co., Ltd.