画像を使ったオサレなチェックボックスを作る方法!!




takkun
どうも!たっくんです!

スマホや、オサレ系UIのでよく見る(?)オサレなチェックボックスを、Qt(PySide/PyQt)とQSSを組み合わせて、簡単に作る方法をご紹介したいと思います!

クラスの骨格

まずは、QCheckBoxを継承した「StarCheckBox」を用意したいと思います!

from PySide import QtCore, QtGui

class StarCheckBox(QtGui.QCheckBox):
	def __init__(self, *args, **kwargs):
		super(StarCheckBox, self).__init__(*args, **kwargs)

Stylesheetの設定

続いて、Stylesheetを使ってQCheckBoxを装飾したいと思います!チェックする場所の見た目を変更するには「indicator」の「checked」と「unchecked」に、画像を設定します(*´ω`*)b

from PySide import QtCore, QtGui

class StarCheckBox(QtGui.QCheckBox):
	def __init__(self, *args, **kwargs):
		super(StarCheckBox, self).__init__(*args, **kwargs)
		self.setStyleSheet('''
QCheckBox::indicator:checked
{
    image: url(":/SE_FavoriteStar.png");
}
QCheckBox::indicator:unchecked
{
    image: url(":/SE_FavoriteStarDefault.png");
}
		''')
ここで指定している画像は、Mayaに内蔵されている画像を使用しました!
ご自身で用意される場合は、16px x 16pxで作るといい感じになると思います!

実験!

QCheckBoxの変わりに「StarCheckBox」を使って、ウインドウを作ってみると、、、、

四角いチェックボックスが、星型になりました!色の付いてない☆はOFFの状態なので、ポチポチして更に確認してみます!

画像を変えてみれば、iOSっぽいチェックボックスも作ることができます(゚∀゚)