こんにちは、みやびのです。
今回は、「PythonistaのUIライブラリの基本的な使い方」というテーマでお話しします。
PythonistaでGUIアプリを作成できるライブラリの1つにUIライブラリがあります。
UIライブラリはpyuiファイルを作成することで簡単な操作でGUIアプリを作成することが可能です。
初心者でも比較的取り組みやすいのでサンプルコードも参考にしつつ実践してみましょう。
本記事では、pyuiファイルの編集方法とUIライブラリの基本的な記述方法について紹介します。
目次
Pythonistaのuipyファイルのパラメータと設定方法
UIテンプレートの作成
UIファイルは以下の手順で追加できます。
1.Pythonistaを起動して「＋」ボタン(ファイル追加ボタン)をタッチ
2.「UI」の「Script with UI」をタッチ
3.sample.pyと入力して「create」をタッチ
上記操作を実行すると以下の2つのファイルが追加されます。
sample.py
sample.uipy
作成直後でもsample.pyを起動すると実行できます。
ただし、sample.uipyは空の状態なので実行しても真っ白な画面が表示されるだけです。
アプリを作るためにはオブジェクトを追加してパラメータを設定する必要があります。
オブジェクトの配置方法
左上の「＋」マークから追加可能です。
設置場所はタップ操作またはパラメータから設定できます。
オブジェクトには以下の種類があります。
・Label
・Button
・Text View
・Custom View
・Slider
・Switch
・Segm. Control
・Text Field
・Web View
・Table View
・Date Picker
・Scroll View
・Image View
・Navigation View
・Comment
上記の通り結構豊富です。
上記を活用するだけでも多くのアプリが作成できそうですね。
パラメータの参照と設定
オブジェクト単位でパラメータの初期値を設定することができます。
コードにわざわざ記述する必要がないので便利ですね。
パラメータは右上のiマークをタッチすることで追加可能です。
パラメータはオブジェクトの種類によって異なります。
よく使うパラメータを紹介します。
・Background Color:オブジェクト背景の色
・Size：オブジェクトの長さ(Width)と高さ(Height)を指定
・Position：オブジェクトの位置をXとYで座標指定
・Name：オブジェクト名を指定
・Text View：Text Viewにデフォルトで表示するテキストを表示
・Text Color：テキストの色が指定
・Title：Buttonに表示する文字を指定
・Action：Buttonを実行した時に実行する関数を指定
・image：Button絵文字を追加
・Border：線の太さ(width)と丸み(radius)を指定
・Border-Color：Borderの色を指定
・Auto-Resizing/Flex：オブジェクトをInspectorのサイズに合わせて自動でサイズ変更させるかを指定
他にも様々なパラメータがあるので試してみてください。
UIに関してはPythonista同梱のサンプルコード(Examples)にあるUser Interface/Calculator.py(電卓アプリ)が非常に参考になります。
実際に動かしつつ対応するコードやパラメータをチェックしましょう。
スクリプトの記述
スクリプトはsample.pyに記述します。
最低限必要なコードは以下の3行です。
1 2 3 | import ui v =ui.load_view() v.present('sheet') |
上記だけだとただ画面に表示するだけなので意味はありません。
アプリとして成立させるためにはボタンを押した時の処理など、なんらかのイベント処理を作る必要があります。
以下はボタンを押した時にテキストの内容をコピーするスクリプトです。
1 2 3 4 5 6 7 8 9 10 11 12 | from __future__ import division import ui import clipboard from console import hud_alert def copy_action(sender): '@type sender: ui.Button' text = sender.superview['text1'].text clipboard.set(text) hud_alert('コピーしました') v = ui.load_view() v.present('sheet') |
スクリプトを書いたらButtonのActionに関数を記述します。
【実行例】
Pythonista＋UIを活用したアプリの実装例
スクリプトの作成
以下は押したボタンの文字をText Viewに出力する簡単なプログラムです。既に文字が入力されている場合は末尾に文字を追加します。
1 2 3 4 5 6 7 8 9 | import ui def add_text(sender): '@type sender: ui.Button' text1 = sender.superview['text1'].text t = sender.title sender.superview['text1'].text = text1 + t v = ui.load_view() v.present('sheet') |
pyuiファイルの編集
次にpyuiファイルを編集していきます。
手順は以下の通り。
1.タイトルの入力
タイトルは上部の入力欄に記入します。
2.背景のbackground colorの設定
オブジェクト以外のエリアをタッチしてiマークをタッチすると背景の情報が設定できます。
3.ボタンの設定
以下のパラメータを設定します。
Background Color:#ffffff
Border:width1.5,radius:5
Border Color:#000000
Action:add_text
複数のボタンを追加する場合はボタンを1つ作ってからコピーで増やしていくとタイトルを変更するだけで済むので楽です。
コピーした後にtitleの値をそれぞれa,b,c,d,eを設定します。
Nameは同じでも動作に支障はありませんが、ボタンのNameを取得したい場合は変えておいた方がよいです。
4.textを表示するためのLabelを追加
border：width1.5,radius5
background color:#ffffff
Name:text1
クリアボタンを設置
テキストを追加するボタンだけではなくクリアするボタンも追加してみましょう。
入力したテキストをクリアするボタンは非常に簡単なコードで実現できます。
1 2 3 | def clear_text(sender): '@type sender: ui.Button' sender.superview['text1'].text = '' |
後はクリアボタンを作成してactionにclear_textを設定しましょう。
【実行例】
終わりに
今回はUIライブラリの基本的な使い方を紹介しました。
簡単な操作とコードで動かせるので初心者でも比較的取り組みやすいです。
UIに関してはPythonista同梱のサンプルコード(Examples)にあるUser Interface/Calculator.py(電卓アプリ)が非常に参考になるので動かしながら実践してみてください。
Pythonistaの使い方まとめ＞＞Pythonistaの使い方まとめ
