ui - ios用のネイティブGUI ①

たかのりふくやま

Circle "NGL" Founder / Serial Entrepreneur / LDH / CommunityManager/ Engineer(python,Swift) / DataScientist / SDGs / AddressHopper

はじめに(読まなくてもイイ、実行だけしてみてね)

次のコードは、「tap me!」というボタンを示しています。タップするとタイトルが「Hello!」に変わります。

この例では、基本ビューのレイアウト、画面上での表示、イベントの処理など、uiモジュールのいくつかのコア概念を示しています。

コードをもっと詳しく見てみましょう:

1、まず、viewを作成。これは、画面上に置くことができるすべての基本クラスです。もともとのviewは単なる色付きの四角形ですが、他のビューの入れ物(この場合はボタン)としても機能します。

2、viewの名前を「Demo」に設定します。これは、viewが後で表示されるときにタイトルバーに表示されるものです。

3、viewの背景色は「白」に設定されています。赤の場合は文字列(カラー名UIと16進数)・タプル(例えば1.0、0.0、0.0)・半透明の場合は(0.0、1.0、0.0、0.5)・数字(50%のグレーの場合は0.5) 。内部的には、これらの色表現はすべて4タプル(r、g、b、a)に変換されるため、後でビューのbackground_color属性にアクセスすると、(1.0、1.0、1.0、1.0)設定して「white」、「#FFFFFF」、または単に1.0。(タプルはPythonでしか使いません。とりあえず、リストの変更ができないバージョンと思ってくれれば。)

4、新しいButtonを作成し、そのタイトルにキーワード引数を設定します。初期化中にタイトルを設定すると、そのサイズは自動的に調整されます。

5、View.center属性を設定することにより、ボタンの位置をその親に対して相対的に設定します。この場合、親のView.widthおよびView.height属性の半分を使用してボタンを中央に配置します。

6、ビューがサイズを変更する可能性があるため(たとえば、デバイスが回転しているときなど)、ボタンのView.flex属性を設定して自動サイズ変更の動作を制御します。この場合、ボタンがそのコンテナの中央にとどまるように、左、右、上、下の余白が柔軟になるようにします。

7、ボタンのButton.action属性には、スクリプトの先頭に定義されている関数を設定します。この関数は、通常は送信者と呼ばれる単一のパラメータを受け入れる必要があります。パラメータはイベントをトリガしたボタンになるので、複数のボタンに対して1つのアクションを使用し、イベントの原因となったボタンに応じて何をすべきかを決定できます。

8、ボタンの設定が完了したので、View.add_subview()メソッドを使用してコンテナビューの子として追加します。

9、最後に、View.present()メソッドを呼び出して、メインビューを画面に表示します。ビューはさまざまなスタイルで表示できます。iPhoneでは、すべてのビューがフルスクリーンで表示されますが、iPadでは「シート」、「ポップオーバー」、「フルスクリーン」のいずれかを選択できます。


UIデザイナーの使用(ココから読もう)

付属のビジュアルUIエディタを使用すると、定型コードの量を大幅に削減できます。

始めましょう。
右上の横三本線を、タップするとメニューが開きます。
左下"+"をタップ、"Spript with UI"を選択。名前を"Demo"としましょう。
上のタブ"Demo.pyui"を選択し、上の画面になったら、左上の"+"をタップ
"Button"を選択。
右上から2番目" i "選択。
Title欄に"Tap me!"と書くとViewの文字も変わる。
Auto-Resizing/Flexを全てはずし、常に真ん中にし、サイズも変わらない。
Actionに関数名 button_tapped を入力し、挙動をのちにコーディングします。
上のタブを"Demo.py"に変更。
コーディングしていきます。
ボタンの属性はGUIで設定されており、コードではload_view()を使用してファイルをロードし、ビューを画面に表示します。button_tappedアクションは前と同じであるが、ビューのロード中ボタンとアクションとの間の接続も設定されています。
注:ボタンのアクションとコード内の関数との間の接続はload_view()呼び出し中に行われるため、load_view()より先にbutton_tapped関数が定義されていることが重要です。

ActionとDelegateについて

ボタン、スライダ、スイッチなどのほとんどの単純なコントロールには、コントロールの「プライマリ」イベントを処理するAction属性があります。ボタンの操作は、ボタンがタップされたときに呼び出されます。スライダーの場合は、値が変更されたときなどに呼び出されます。


すべてのActionは、sender(必要に応じて別の名前を使用することもできます)という1つのパラメータを取る関数です。これは、常にイベントの原因となったコントロール/ビューになります。このパラメータを使用すると、SwitchSliderの更新された値属性を取得するなど、イベントの詳細を調べることができます。


オブジェクト指向スタイルでプログラミングしている場合、アクションはバインドされたメソッドでもあります。この場合、メソッドはもちろん2つのパラメータ(selfとsender)を取ります。


関数またはメソッド名(かっこまたはパラメータなし)を入力することで、UIデザインツールで直接コントロールのアクションを設定できます。アクションをバインドされたメソッドに設定した場合、名前はselfで始まる必要があります。(他のオブジェクトのメソッドはサポートされていませんが、プログラムでこれを実行できます)。


TableViewTextViewのような複雑なビューには、通常、デリゲート属性があります。デリゲートは、ビューが特定の状況でその動作を決定するために使用するヘルパーオブジェクトと考えることができます。例として、TextViewは、テキストが入力されたり、選択が変更されたりするたびにその代理人に通知します。また、デリゲートはTextViewやTextFieldの特定の文字を拒否するなど、変更を検証する機会を与えます。


個々のクラスのドキュメントに記述されているメソッドを実装している限り、任意のオブジェクトをデリゲートにすることができます。すべてのデリゲートメソッドはオプションです。たとえば、テキストビューデリゲートがtextview_should_begin_editingを実装していない場合、テキストビューは常に編集を開始できるとみなされます。


アクションを実装してメソッドを委譲する際に留意すべき重要なことは、すべてのコールバックがホストアプリケーションのメイン(UI)スレッドで呼び出されることです。関数の復帰に時間がかかる場合は、その時間内にアプリが「フリーズ」して表示されます。値を返すと予想されるデリゲートメソッドの場合、これはUIKitとの基本的な対話に必要です。@ ui.in_backgroundを使用して、他のコールバックメソッドをバックグラウンドで(通常のインタプリタスレッド上で)実行するようにデコレートできます。


次のコールバックでは、ボタンのアクションでconsole.alert()が使用されます。console.alert()はダイアログ内のボタンをタップするまでブロックされないので、アクションは@ ui.in_backgroundで修飾されているため、UIスレッドではこれを行うことはできません:



カスタムビューの作成

Viewをサブクラス化することで、カスタムタッチ操作と描画を実装できます。Viewは、サブクラス化できるuiモジュール内の唯一のクラスであり、カスタムビューでその動作と外観を定義するために実装できる多数のメソッドがあります。


また、UIデザインツールで視覚的に作成されたUIにカスタムビューを追加することもできます。インスペクタの「カスタム表示クラス」属性をクラス名に設定するだけです(この名前は、ビューをロードするときに定義する必要があります)。


次の例は、カスタムビューで実装できるすべてのメソッドを示しています。特別なレイアウト要件がない場合やタッチを処理したくない場合は、レイアウトを省略して_...メソッドに触れるなど、すべてを実装する必要はありません。

0コメント

  • 1000 / 1000