[Python] PySide+CSSでオシャンティなUIを作ろう その3 CSSでの画像指定 [PySide]

前回に続いてCSSの本体の話。
今回は画像を使用するSpinBoxの調整について。

まず、PySide内で画像を使用する場合は

  • フルパスで指定
  • resourceファイルを指定

この2種類があります。
フルパスの場合は __file__などから相対パスで指定したりする…のですが
それだと取り扱いが面倒くさい。
resourceなら :/XXX 形式で扱いやすいので、こちらを使用します。

が。

それはそれでresourceで使えるようにするのは面倒くさい。
と思ったら

PySideで使うQRCを便利作る!

なんとかしてくれている神がいましたので、今回はこれをありがたーく利用させてもらいました。
素晴らしいです。
最高!!!

今回は↑を利用して、別途モジュール化しておいたアイコンリソースを使用して
CSS側から見た目の変更を行います。

使うアイコンは 公式のExample から拝借しました。

下準備でresource.py の作成が終わったら、前回までで作ったUIのソースコードに

import resource

と言う形でロードしておきます。

使用するのはCSS側になりますが、
本体のソースコード側に読み込んでさえおけば、CSS側でもリソースのパス指定で
使用することが出来ます。

SpinBoxの調整

cssのコードに以下を加えます。

実行すると、こんな感じでスピンボックスの矢印部分がカスタマイズされます。

スピンボックスも、ほぼサブコントロールで細かい部分の調整を行うことが出来ます。

up-button down-button、中の矢印部分の up-arrow down-arrow。
そしてそれぞれの状態を表す hover/pressed/disabled/off の4つ。

このサンプルの中でわかりにくかったのが「border-image」指定。

これは、1つの画像を9分割して、指定範囲のピクセルをボーダーラインとして使用する…というパラメーターになります。
枠部分はborder-imageとして、本体部分にarrow画像をはめ込んでるようなイメージでしょうか。
この辺は、画像サイズの節約テクニックな気がするので、
もしかしたらbackground-images指定でもいけるかもしれません。

画像のパスについては、上で説明したとおり本体側で resource を読み込んでいれば、
:/XXXX/~ という書き方でCSSからも変更することが出来ます。

スピンボックスの矢印部分は、配置位置もCSS側で変更することが出来ます。
それが、 subcontrol-position:top right; の箇所。この場合上ボタンは右側にと言う意味になります。

あとは状態ごとに画像を差し替えてあげたりすれば見た目を変えることが出来ます。

ScrollBarの調整

SpinBox以上に苦戦したのがこのScrollBar。

こんな感じで、フラットになるようにしました。
[▲] ボタンを入れるか迷ったのですが、正直このボタンを押して移動することがあまりないので
取っ払ってあります。

以下がCSS

どこのサブコントロールでなにを調整するかが正直意味分からないです(汗

移動するハンドルと、そのハンドルより左の背景がsub-page、右側がadd-page
移動の矢印はそれぞれ 土台が sub-line/add-line 中の矢印が sub-arrow/add-arrow。
この矢印部分とsub-page/add-page分の重なる所はQScrollbarのmarginにて指定を行います。

今回は、矢印はすべて使用しないので、  subcontrol-position: none; subcontrol-origin: none;で非表示設定とした上で
各種marginは0にしています。

それ以外は、ハンドルに丸みを持たせるために border-radiusの指定を行いました。

矢印部分については、SpinBoxの増減ボタン指定と同じ感じで追加・設定が出来るはず?

SpinBoxとScrollbarの変更を適応したのがこちら。
SpinBoxがFlatデザインじゃないので若干違和感がありますが、ScrollBarがシンプルになったので
前回よりはだいぶおしゃれになった気がします。

とりあえずこんな感じで、CSSの編集の要素は出そろった気がするので
次回はサブメニュー側のボタン類を作って行こうと思います。

参考

コメントを残す

メールアドレスが公開されることはありません。

*