UIパネルとUIボタンの基本的な使い方①
Pythonista3でのアプリ開発に必要なUIパネルやUIボタンの使い方について簡単な説明を紹介していきます。
Pythonista UIボタン①
UIパネルの作成
▼スクリプト新規作成の項目'Script with UI'を選択することで、UI付きのスクリプトを作成することができます。
▼スクリプト名は'SampleApp'とします。自動で'.py'ファイルと'.pyui'ファイルが生成してくれます。
▼生成したプログラムを実行してみます。
▼このようにUIパネルが表示されます。まだ何も書いていないのでまっさらな状態ですね。
▼UIパネルは'.pyui'ファイルで変更します。右タブにはパネルのサイズ設定を行います。
今回は画面のサイズをPortrait Small(320 x 480)で進めていきます。
ラベルとボタンの追加
▼UIパネルにラベルやボタンなどのオブジェクトを追加するには左上の+ボタンをクリックします。
▼オブジェクトは様々ありますが、順番に見ていきます。まずはラベルから。
▼オブジェクトには右タブにあるように、オブジェクトのサイズや位置などの設定があります。
Auto-Resizingでは、画面の大きさが変更された際に縦方向、横方向に自動でサイズ変更するのかを設定します。
▼サイズ、位置設定の下にはラベルのテキスト、フォント、色、行数、整列状態を設定することができます。
▼次にボタンを追加します。ボタンを押した際の動作は項目'Aciton'に関数を入力します。ボタンが押されるとこの関数が実行されるというわけです。
▼'.py'のスクリプトに関数を追加します。'sender'はイベントが発生したオブジェクトのインスタンスのことです。また'superview'は'sender'に組み込まれているオブジェクトが保管されている属性で、オブジェクトに組み込まれているUI部品のオブジェクト名を指定することでUI部品のオブジェクトを得ることができます。
▼プログラムを実行し、ボタンを押すとタイトルテキストが変更されました。
スライダーの追加
▼スライダーは０～１の値を取ることができます。'Continuous'はオンのときはバーが移動時にもActionが動作し、オフのときはバーがストップした時点でActionが動作します。
▼スライダーの関数を以下のようにします。スライダーの値は非常に細かく取っているので、表示する際にはround関数で小数第1位まで表示するようにしています。
▼プログラムを実行し、バーを動かすとラベルの表示が変わります。
スイッチの追加
▼スイッチのスクリプトを先に示します。スイッチの真偽値は'value'で得ることができます。スイッチがONとなったとき、OFFになったときに'on_switch'が実行されます。
▼プログラムを実行し、スイッチのON/OFFをするとラベルの表示が切り替わります。
セグメントコントロールの追加
▼セグメントコントロールのスクリプトを先に示します。セグメントコントロールとは複数項目のことです。選択したインデックスは'selected_index'で得ることができ、選択した項目のラベル名は'segments[selected_index]'で表すことができます。
▼プログラムを実行し、複数項目の中から３を選択するとラベルが更新されます。
テキストフィールドの追加
▼テキストフィールドは文字を入力することができ、文字を入力したあとEnterを押した後Actionが動作します。
▼テキストフィールドに入力された文字は'TextField.text'で得ることができます。
▼プログラムを実行し、文字を入力するとラベルに表示されました。
DatePickerの追加
▼DatePickerでは年月日を指定することができます。
▼DatePickerのモードには日付、時刻、日時、タイマーの時間を設定をすることができます。
▼年月日を取るときには'date'、時刻を取るときには'time'、日時を取るときには'datetime'を用います。
（詳しいコードはこちらを参考に：https://docs.python.org/ja/3/library/datetime.html#strftime-and-strptime-format-codes）
▼プログラムを実行し、日付を設定するとその日付がラベルに表示されました。
アラートの追加
▼アラートはポップアップ表示のようなものですが、これをするには'import console'を追加してください。アラートは'console.alert('タイトル')'または'console.alert('タイトル','メッセージ')'とします。
▼プログラムを実行し、文字を入力するとアラートが表示されました。
▼他に'console.hud_alert('メッセージ')'とすることでHUDアラートを表示することができます。HUDアラートとは半透明で表示されてから一定時間経過すると自動的に消えます。
選択アラートの追加
▼アラートに選択ボタンを追加するには'console.alert('タイトル','メッセージ','ボタン1','ボタン2','ボタン3',hide_cancel_button=真偽値)'とします。キャンセルボタンを付ける場合には'hide_cancel_button=False'とし付けない場合にはTrueとします。
▼表示されたボタンを押した値は上のスクリプトだと'value'に格納されます。
▼プログラムを実行し、ボタンを選択するとボタンの値がラベルに表示されました。
INPUTアラートの追加
▼アラートで文字を入力するにはINPUTアラートを用います。
'console_input_alert('タイトル',メッセージ','デフォルト値','OKボタン名',hide_cancel_button=真偽値)'とします。
▼文字を入力したらOKボタンを押します。Cancelを押すとActionは動作しません。
▼プログラムを実行し、文字を入力するとラベルに文字が表示されました。
まとめ
UIパネルやUIボタンの使い方について紹介してきました。
次回は、Table ViewやNavigation Viewの使い方について紹介していきます。スクリプトの書き方が少し変わってきます。
