[初心者向け]Pythonista3でuiエディタを使わずに部品要素を追加する方法
こんにちは。
普段プログラミングを趣味として自分なりに楽しんでやっています。
その中で学んだ事などを備忘録として残し、僕の思いも少し付け足してnoteにまとめています。
今回はuiエディタを使わずにボタンなどの部品を追加する方法を書いています。
uiエディタを使った方が感覚的にUI部品を設置する事が出来るのでPythonistaではuiエディタを使うのがオススメですけど、Pythonを利用していてパソコンなどでもGUIソフトを作りたい！となった時に今回説明する内容は役に立つかと思うので是非今回の記事でGUIを作るイメージを掴んでいただけたらなと思います！
では、いきましょう！
『ビュー作成〜ラベルを追加』の巻
まずPythonistaでpyファイルを作成します。
ファイル名は、なんでも良いです！
no_ui_edita.pyとかにしときましょうか。
[no_ui_edita.py]
作成したら以下のようにコードを書いてみてください。
import ui
#①
v = ui.View()
#②
v.present('sheet')#①
ここの部分に関数などを書いていく。
#②
ここの部分にuiの部品を作成・設置などのコードを書いていく。
ここで一旦実行してみてください、以下の画像のような画面が出てきましたか？
設定を何もしていない状態だと、黒色で半透明のViewが生成されたと思います。
とりあえずこんな感じにできたら、早速部品を作っていきましょう。
今回は、ボタンとラベルを作って、ボタンを押すとラベルの表示がランダムで変化していくプログラムを作る事にしましょうか。
一つ一つ作っていくのでゆっくり読み進めてみてください。
[no_ui_edita.py]
import ui
v = ui.View()
#①
v.background_color = 'white'
#②
v.width = 413
v.height = 613
v.present('sheet')一旦これで実行してみましょう。
#①
さっきは黒色の半透明のViewが生成されましたが、今回はViewの背景色を白に設定したので以下の画像のように白色のViewが生成されたと思います。
#②
v.heightとv.widthでViewの幅と高さを設定しています。
実際には見えないんですが、設定していなかったら100×100のViewが生成されると思います。
※今回は僕のiPhone7plusで丁度良いサイズに合わせていますのでお使いのデバイスに合わせて調整してください。
白い背景のViewが表示されるのを確認したら次にラベルを作っていきましょうか。
import ui
v = ui.View()
v.background_color = 'white'
v.width = 413
v.height = 613
#①
label = ui.Label()
#②
label.name = 'label'
#③
label.text = 'ランダムに変わるよ'
#④
label.center = (v.width * 0.5, v.height * 0.5)
#⑤
label.flex = 'LRTB'
#⑥
v.add_subview(label)
v.present('sheet')#①
uiのLabelをインスタンス化しています。
#②
ラベルのnameプロパティに『label』という文字列を設定しています。
※後でこのnameプロパティを使ってラベル要素にアクセスします。
#③
ラベルのtextプロパティに『ランダムに変わるよ』という文字列を設定しています。
※このtextプロパティの値がView上に設置したラベルに表示されます。
#④
ラベルのcenterプロパティに『View幅の0.5倍とView高さの0.5倍』をタプルで設定しています。この場合はビューのど真ん中にラベルが表示されます。
※このcenterプロパティはラベルのセンターをどの位置にするのかを決めています。
#⑤
ラベルのflexプロパティに『LRTB』を設定しています。上下左右の余白などの自動調整が設定できます。
※これを設定する事でスマホを横向きにした時に各部品の配置などを自動で調整してくれるようになります。
・L --- 左側のマージン
・R --- 右側のマージン
・B --- 下のマージン
・T --- 上のマージン
#⑥
Viewにラベルのサブビューを追加しています。
※add_subview()をする事によって作成したlabelがView上に表示されるようになります。
ここで1度実行してみましょう。
ラベルが表示されましたか？
ちょっとテキスト切れてますので、後でラベルの幅を広げましょう…泣
次にボタンを作っていきます。
『ボタンを追加〜ボタンアクション設定』の巻
というか、思ったより結構長いですけど大丈夫ですかね？笑
疲れたら休憩挟んでくださいね…🥱
ここからはボタンを作っていきます。
コードが長くなるのでさっきのラベル部分は省略してコードを書いていくので、さっきのラベル部分の下に続きを書いていってください。
~~~~~省略~~~~~
#①
button = ui.Button(title = 'btn')
#②
button.center = (v.width * 0.5, v.height * 0.7)
#③
button.flex = 'LRTB'
#④
v.add_subview(button)
v.present('sheet')#①
uiのButtonをインスタンス化しています。titleは表示される文字列です。
※インスタンス化する時に『title』を引数として与えてあげるとボタンのサイズが自動で調整されます。
引数を与えなかった場合は、自分で『titleとwidthとheight』を設定すれば大丈夫です。
#②
ボタンのcenterプロパティに『View幅の0.5倍とView高さの0.7倍』のサイズをタプルで設定しています。この場合だと真ん中のちょっと下くらいにボタンが配置されます。
#③
ボタンのflexプロパティに『LRTB』を設定しています。上下左右の余白などの自動調整が設定できます。
#④
Viewにボタンのサブビューを追加しています。
この時点でボタンが表示されるかどうか確認のために実行してみましょう。
無事にボタン表示されましたね。
ラベルのテキストが切れているのが嫌なのでここで直しておきましょう。（さっきラベルの設定を書いた辺りに追加してください）
#①
label.width = v.width
#②
label.alignment=1#①
ラベルの幅をViewの幅と同じに設定。
#②
ラベルの文字列の配置を設定。（数値）
・0 --- 左詰め
・1 --- 中央
・2 --- 右詰め
という事で次にボタンを押下した時のアクションを作っていきましょうか。エディタの1番上に戻って書いてください。
import ui
#①
import random
#②
def random_change(sender):
#③
change_label = sender.superview['label']
#④
text = ['蟹鍋','もつ鍋','キムチ鍋','寄せ鍋','野菜鍋']
#⑤
choiced_text = random.choice(text)
#⑥
change_label.text = choiced_text
v = ui_loadview()
~~~~~省略~~~~~#①
randomモジュールをインポート。
#②
random_change関数を定義（引数senderとする）
#③
sender（送信者）のスーパービュー（親ビュー）に属する『label』という名前の部品を取得して変数change_labelに格納。
#④
ランダムに選ばれる文字列をリスト化して変数textに格納。
#⑤
random.choice()メソッドで引数にtextを渡して変数choiced_labelに格納。
#⑥
change_labelのtextプロパティにchoiced_labelの値を格納。
これでアクションも作成出来ましたね。
最後にアクションをボタンに紐づければ完成です！
（さっきボタンの設定を書いた辺りに書いてください）
#①
button.action = random_change#①
ボタンのactionプロパティに関数名を設定して紐づけています。
※これでボタンを押下した時に、紐づけた関数が実行されるようになります。
実行してみる
ここまで長かったですね。お疲れ様でした。
早速実行してボタンを押してみてください！
ボタンを押すごとにラベルの表示がランダムで変わっていくかと思います。
全体のコード
import ui
import random
def random_change(sender):
change_label = sender.superview['label']
text = ['蟹鍋','もつ鍋','キムチ鍋','寄せ鍋','野菜鍋']
choiced_text = random.choice(text)
change_label.text = choiced_text
v = ui.View()
v.background_color = 'white'
v.width = 413
v.height = 613
label = ui.Label()
label.name = 'label'
label.text = 'ランダムに変わるよ'
label.center = (v.width * 0.5, v.height * 0.5)
label.flex = 'LRTB'
label.width = v.width
label.alignment=1
v.add_subview(label)
button = ui.Button(title = 'btn')
button.center = (v.width * 0.5, v.height * 0.7)
button.flex = 'LRTB'
button.action = random_change
v.add_subview(button)
v.present('sheet')まとめ的なやつ
お疲れ様でした！
なかなか長かったですが、この記事を読んだあなたはuiエディタを使わずに画面を作っていく方法をある程度掴めたと思います。（勝手に思ってるだけです、違ったらすみません）
あと、Pythonista3の公式ドキュメントを貼っておくので良かったら見に行ってみてください！
ただ、英語なので翻訳アプリを駆使してください！
最後まで読んでくれてありがとうございました！
では、またお会いしましょう！！
この記事が気に入ったらサポートをしてみませんか？