Pythonのツール・アプリ

【Pythonista】UIライブラリの基本的な使い方

こんにちは、みやびのです。

今回は、「PythonistaのUIライブラリの基本的な使い方」というテーマでお話しします。

PythonistaでGUIアプリを作成できるライブラリの1つにUIライブラリがあります。
UIライブラリはpyuiファイルを作成することで簡単な操作でGUIアプリを作成することが可能です。

初心者でも比較的取り組みやすいのでサンプルコードも参考にしつつ実践してみましょう。
本記事では、pyuiファイルの編集方法とUIライブラリの基本的な記述方法について紹介します。

Pythonistaのuipyファイルのパラメータと設定方法

Pythonistaのuipyファイルの設定方法

UIテンプレートの作成

UIファイルは以下の手順で追加できます。
1.Pythonistaを起動して「+」ボタン(ファイル追加ボタン)をタッチ
2.「UI」の「Script with UI」をタッチ
3.sample.pyと入力して「create」をタッチ

上記操作を実行すると以下の2つのファイルが追加されます。
sample.py
sample.uipy

作成直後でもsample.pyを起動すると実行できます。

ただし、sample.uipyは空の状態なので実行しても真っ白な画面が表示されるだけです。
アプリを作るためにはオブジェクトを追加してパラメータを設定する必要があります。

pyuiファイル

オブジェクトの配置方法

左上の「+」マークから追加可能です。

+ボタンをタッチ

設置場所はタップ操作またはパラメータから設定できます。

オブジェクトには以下の種類があります。

・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マークをタッチすることで追加可能です。
パラメータはオブジェクトの種類によって異なります。

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行です。

上記だけだとただ画面に表示するだけなので意味はありません。
アプリとして成立させるためにはボタンを押した時の処理など、なんらかのイベント処理を作る必要があります。

以下はボタンを押した時にテキストの内容をコピーするスクリプトです。

スクリプトを書いたらButtonのActionに関数を記述します。

【実行例】
コピーする

Pythonista+UIを活用したアプリの実装例

スクリプトの作成

以下は押したボタンの文字をText Viewに出力する簡単なプログラムです。既に文字が入力されている場合は末尾に文字を追加します。

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

クリアボタンを設置

テキストを追加するボタンだけではなくクリアするボタンも追加してみましょう。
入力したテキストをクリアするボタンは非常に簡単なコードで実現できます。

後はクリアボタンを作成してactionにclear_textを設定しましょう。

【実行例】
UI実行例

終わりに

今回はUIライブラリの基本的な使い方を紹介しました。
簡単な操作とコードで動かせるので初心者でも比較的取り組みやすいです。

UIに関してはPythonista同梱のサンプルコード(Examples)にあるUser Interface/Calculator.py(電卓アプリ)が非常に参考になるので動かしながら実践してみてください。

Pythonistaの使い方まとめ>>Pythonistaの使い方まとめ

こちらの記事も読まれています

  • この記事を書いた人

みやびの

住んでいるところ:神奈川県。 プログラミング歴は13年ほど。 ※プログラミングに関する無料相談・質問への回答は行っていません。

-Pythonのツール・アプリ
-

Copyright© みやびのどっとぴーわい , 2020 All Rights Reserved Powered by AFFINGER5.