pythonistaでuiを作成する(label, button)


uiの作成に当たって

pythonistaのuiはGUIから部品をポチポチと貼り付けて作成するのと、部品をコーディングで作成する方法があります。
前者は、他でも記事(iPhoneでiPhoneアプリを作ろう)を見かけますが、後者はあまり見られないように感じたため、コーディングによって画面を作成する最低限のコードをまとめてみました。

※部品をコーディングによって作成すると、画面の向きが変わったときに部品のサイズを動的に変更したりなどカスタマイズ性が柔軟になって便利になる?と思ってこの記事を作成しました。

ソース

from objc_util import *
import ui
import console

def button_tapped(sender):

    console.clear()
    i = console.alert('Info', 'Hi!!', 'Take Photo', 'Take Movie')

    if i == 1:
        print('your choise is take photo!')
    else:
        print('your choise is take movie!')
    return

def main():

    # メイン画面の作成
    main_view = ui.View(frame=(0, 0, 375, 667))
    main_view.name = 'test view'
    main_view.background_color = ('white')

    # ラベルの追加
    label = ui.Label(frame=(0, 0, main_view.width, 30))
    label.background_color = (0, 0, 0, 0.5)
    label.text_color = 'white'
    label.alignment = ui.ALIGN_CENTER
    label.text = 'test_label!!' 
    main_view.add_subview(label)

    # ボタンの追加
    button = ui.Button()
    button.frame = (10, 100, main_view.width-20, 30)
    button.title = 'test_button'
    button.action = button_tapped
    button.background_color = (0, 0, 0, 0.5)
    button.tint_color = ('white')
    main_view.add_subview(button)

    main_view.present('sheet')
    main_view.wait_modal()

if __name__ == '__main__':
    main()

実行結果

  1. 実行後

  2. tap_button押下後

  3. console押下後

解説

  • mainスレッドでラベル、ボタンを作成
    ・ui.View()でメインとなる画面を作成する。
    ・ui.label()、ui.button()でラベル、ボタンを定義する。
    ・main_add_subview(定義した部品)で部品をメイン画面に追加する。

  • ボタン押下時のコールバックを定義
    ・button.actionでコールバックの関数を設定する。
    ・コールバックの関数を定義する(ここではbotton_tapped)。
     →ボタン押下時にconsole画面を表示して、そこでタップした内容に応じてログを出力するという機能。

  • 参考元
    http://omz-software.com/pythonista/docs/ios/ui.html

まとめ

labelとbuttonの説明しかまとめませんでしたが、今後はmotionセンサにより画面のサイズを動的に変化(縦横サイズ)することくらいは最低限取り入れたいと思います。