[Python] PySide+CSSでオシャンティなUIを作ろう その2 CSSの使い方 [PySide]
前回は全体的な土台の作り方紹介だったので、今回はCSSのカスタマイズに焦点を当てて
自分が詰まったところなどのまとめをば。
まずは、こんな感じでデフォルトのWidgetをサンプル用に色々と並べたものをDesignerで作成します。
これをまたpythonにこんばーとしてから前回のコードで実行します。
その実行結果がこちら。
いろいろと大惨事ですね。
どうしてこうなるかというと、
|
1 2 3 4 5 6 7 8 |
*{ font : 13px; border : 0px solid; background: $color_06; color : $color_05; } |
CSSのコード内の * (すべてに対して適応）部分でborder を 0pxにしているせいです。
このCSSは、すべてのWidgetの各種パラメーターすべてに影響を与えるものになっているので
本来は出ていてほしいborderも削除されてしまいます。
じゃあココで調整しても良いじゃない？と思うのですが
さらなる大惨事がまっています。
この場合、すべてのパーツのborderが出てしまうので、酷い事になってしまいます。
なので、消していきながら調整するぐらいなら、大本から全部消した方がいいんじゃね？ということで
* では 0px指定にしています。
*で指定されていても、その後の行でクラス単位で指定された場合はそちらでオーバーライドされます。
アウトラインの設定
なので、まずはアウトラインの設定を追加します。
|
1 2 3 4 5 6 7 |
/*borderの指定*/ QListView,QTableView,QTreeView,QProgressBar,QLineEdit,QComboBox,QSpinBox{ border: 1px solid grey; border-radius: 3px; } |
実行するとこうなります。
複数のクラスに対して同じ設定を入れたい場合は , で区切ることで複数へ適応することができます。
基本方針としては
おおまかに * でフォントやら背景色を指定 → 複数 or Abstract系クラスでまとめて指定 → 個別指定 → オリジナルクラスの指定
という形で構成していくのが良いかなぁと思っています。
今回のborderは、フラットな線で border-radiusを指定して四隅を丸くしています。
数が多ければ多いほど丸みがついていきます。
この設定はお手軽にオシャンティにしてくれるのでGoodです。
余白の指定
次に、各Widget内の余白を調整します。
デフォルトだと若干キツキツなので余白を追加します。
|
1 2 3 4 5 |
QSpinBox,QLineEdit,QConboBox{ padding : 5px; } |
上が元で、下が変更後になります。
CSSには、同じような余白指定パラメーターに padding と margin と言うのがあります。
はじめは「同じじゃないの？」と思っていたのですが
paddingというのはアウトラインよりも内側、marginはアウトラインより外側（他Widgetとの隙間）
をさすという違いがありました。
公式サイトにも載ってました（汗
プログレスバーの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/*ProgressBarの設定*/ QProgressBar { text-align: center; padding:5px; } QProgressBar::chunk { background-color: $color_01; width : 5px; margin : 0.5px; } |
ここで出てくるのがサブコントロール。
この場合 chunk というのは意味としては大きなかたまり 的な意味があるのですが
中のバー本体のことを指しています。
ので、外側や文字などは大本で調整して、その中のパーツはサブコントロール指定で
細かく調整している感じになります。
ListView/TableViewなどの調整
ListViewやTableView、あるいはWidget関係は、QAbstractItemViewを継承して作られているので
継承元のクラス名を指定すると色々と楽になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/*ListView関係の設定*/ QTableView QTableCornerButton::section { background-color: $color_06; border: 0px; } QAbstractItemView::item{ padding:2px; } QAbstractItemView::item:selected{ color:$color_05; background-color: $color_03; } QAbstractItemView::item:hover { background-color: $color_01; color:$color_06; border: 1px solid grey; } QHeaderView::section { border: 1px solid $color_02; background-color: $color_02; |
※ なぜかTableのHeaderがおかしい…
この辺をやり始める頃から、サブコントロールと状態指定の嵐になっていきます。
まず、QTableCornerButton というのは、TableViewの左上のスペース部分を指しています。
ので、ここを白にしておきます。
QHeaderView は、TableViewのA B C D E F となっている場所。
この部分の1つのセルがsectionというサブコントロールで指定することができます。
そして最後に個別のボックス部分。
これはitemとして指定できて、そのitemごとの状態（selected/hover）を指定して
選択とマウスオーバーを変更しています。
スライドバー
この辺はほぼView関係の調整と近いのですが若干パラメーターがわかりにくいです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/*Sliderの設定*/ QSlider::groove:horizontal { border:0px solid #999999; background-color: $color_03; height:4px; margin:2px 0; border-radius: 3px; } QSlider::handle:horizontal { border: 1px solid $color_02; height: 10px; width:3px; background: $color_02; margin:-8px 0; } QSlider::groove:vertical { border:0px solid #999999; background-color: $color_03; width:4px; margin:2px 0; border-radius: 3px; } QSlider::handle:vertical { border: 1px solid $color_02; height:3px; width: 10px; background: $color_02; |
中のバー部分が groove、持つ場所がhandleとなるのですが、縦にしても横にしても、widthとheight
パラメーターは同じ（回転してるわけではない）ので、バーチカルとホリゾンタルで指定するときに
値が逆になるのに注意が必要です。
marginは、まとめて指定することが可能で
margin: 2px 2px 2px 2px; のようにすると [上][右][下][左] でそれぞれ数値が入るようになります。
2つの場合、 [上下][左右]扱いになります。
ここまでやった結果がこちら。
こんな感じで、楽するためにCSSえらんだのですが
CSSファイル作成がなかなか泥沼で資料も少ないので苦戦…
大分整ってきましたが、ScrollBarあたりがダサいですね。
次はスクロールバーとSpinBoxまわりをやっていきますが、長いので一旦切ります。
たぶんこのシリーズは当分続く。