Button

ボタンを追加し、プロパティの変更

  1. プロジェクトウィンドウでボタンを追加しようとするアクティビティのUIをダブルクリックします。
  2. 右側のコントロールボックスでButtonコントロールを選択します。
  3. Buttonコントロールを左クリックした後、目的の場所をクリックするか、ドラッグアンドドロップすると、コントロールが作成されます。

  4. 作成されたボタンを左クリックすると、プロパティウィンドウで、ボタンに関連するプロパティを確認し、変更することができます。

ボタンの色を変更

「テキストと色の変更」を参照してください。

ボタンにアニメーション効果を追加

"ボタンの状態に応じた画像を追加"を参照してください。

ボタンの状態に応じた画像を追加

デフォルトボタンコントロールの色は単色であるが、ユーザーが希望する画像などを追加することができ、以下はその方法です。

  1. まず、UIファイルにボタンを追加します。

  2. 追加されたボタンを左クリックして、プロパティウィンドウを開きます。 イメージと関連した属性は下記の通りです。

    • Picture settings
      • この属性は、ボタンのそれぞれの状態に応じた画像を設定することができて、ボタンの状態が変わると自動的にそのイメージに変更されます。
    • Picture location
      • 基本的にはボタンに設定された画像は、ボタンの中央を基準に拡大/縮小され、ボタンと同じサイズに変更されるが、この属性は、画像をボタンの特定の場所に特定のサイズに位置させることができます。
    • Background picture
      • ボタンの背景画像を設定します。画像は自動的にボタンのサイズだけ拡大/縮小されて表示されます。

    例：

    Button-pic-example

    結果の画像 :

    Button-pic-example

    上記のスクリーンショットは、プロパティウィンドウのパラメータの値を示し、それの意味は次のとおりです。 ボタンは、基本的に「off_normal.png」を表示し、選択されたとき、「on_normal.png」に変更されます。 left、top、width、heightは画像の表示位置（ピクセル単位）を決定します。長方形の左上隅が開始点（0、0）であり、右/下方向に値が増加し、（131、63）が終了点です。もし画像の実際のwidthとheightが[プロパティ]ウィンドウのパラメータの値と異なる場合、画像は、その属性の値に基づいて拡大/縮小されます。

ボタンコントロールとの間の階層関係

一般的に、ボタンコントロールは4段階の過程を経て表示されます。

  • ボタンのテキスト

  • ボタンの画像

  • ボタンの背景画像

  • ボタンの背景色

ボタンに画像を追加

"ボタンの状態に応じた画像を追加"参考

ボタンが押されたとき、どこで、どのようにコードを追加しますか？

実際の開発ではボタンは非常に頻繁に使用されるコントロールの一つです。通常のボタンのクリックイベントが発生した後のUI画面の内容が更新されるなどの処理が行われます。このため、ボタンがクリックされたときの応答を処理する過程が必要であり、下はこれに対するプロセスです。

  1. まず、IDがButton1のボタンを作成します。

  2. プロジェクトエクスプローラで、現在のプロジェクトを選択し、右クリックして表示されるポップアップメニューの中Compile Projectを選択します。 この機能は、UIファイルに基づいて自動的にテンプレートコードを生成します。（コード生成の詳細な理解）

  3. UIファイルmain.ftuを例にとると、前のプロセスが終了した後、jni/ logic/ mainLogic.ccファイルが現在のプロジェクトフォルダに以下のように生成されます。


    Note : main.ftuで自動生成されたmainLogic.cc、両方のファイルのprefixesは同じです。（コード生成の詳細な理解）

  4. mainLogic.ccをダブルクリックして開いたら、ファイルに以下のコードがあることを確認することができます。

    static bool onButtonClick_Button1(ZKButton *pButton) {
 //LOGD(" ButtonClick Button1 !!!\n");
 return false;
}

    スクリーンで生成されたボタンをクリックすると、自動的に上記の関数が呼び出されます。したがって、この関数にコードを追加することで、ユーザーは自分だけのプロセスを追加することができます。

    • 関数の名前は、特定のルールに基づいて生成されることを確認することができ、上記の例のように生成された関数の名前はonButtonClick_XXXX(ZKButton* pButton)でXXXXは、コントロールのIDで置き換えられます。

コントロールと関数の関係についての理解

システムボタン

ユーザーが定めたIDに加えて、ボタンコントロールは、2つのシステムボタンIDを持っているが、sys_backとsys_homeがまさにそれです。名前からおおよそその機能を知ることができるようバックとホーム機能のためのIDです。 sys_backボタンをクリックすると、直前アクティビティに戻り、sys_homeをクリックすると、「mainActivity」に直接戻り、特別な追加実装せずにIDの値だけ、システム名に設定することで機能がサポートされます。

アクティビティ間の相互作用についての理解

Long keyイベント処理

もしlong keyイヴェットを処理する必要がある場合は、直接、イベントリスナーを追加する必要があります。以下はその過程です。

  1. ボタンコントロールのプロパティ]ウィンドウでLong Click TimeoutとLong Click event trigger interval timeを次の図のように設定します。（単位：ミリ秒）

  2. プロパティの設定後、コンパイルをして、そのファイルのLogic.ccファイルを開いて、ファイルの先頭にZKBase:: ILongClickListenerクラスを継承するclass LongClickListenerと virtual void onLongClick(ZKBase* pBase)関数を実装します。

     namespace { 
     // Add an anonymous scope to prevent multiple source files from defining the same class name and conflict at runtime    

     //Realize the long press monitoring interface
     class LongClickListener : public ZKBase::ILongClickListener {

          virtual void onLongClick(ZKBase *pBase) {  
                 LOGD("Trigger long press event");
             static int count = 0;

                 char buf[128] = {0};
                 snprintf(buf, sizeof(buf), "Long press event trigger times %d", ++count);
                 //Each time a long press event is triggered, modify the text of the button
                 mLongButtonPtr->setText(buf);
          }
     };

 }

  3. class LongClickListenerのオブジェクト生成

     static LongClickListener longButtonClickListener;

  4. static void onUI_init()関数でlong clickモニタリングインターフェイスを登録する関数を追加

     static void onUI_init(){

         //Register the button long press monitoring interface
         mLongButtonPtr->setLongClickListener(&longButtonClickListener);
 }

  5. static void onUI_quit()関数にlong clickモニタリングインターフェイスを登録解除する関数を追加

     static void onUI_quit() {
        //Un-register the button long press monitoring interface
        mLongButtonPtr->setLongClickListener(NULL);
 }

  6. コードの追加後、コンパイル、ダウンロードしてボードでテストしてください。もしボタンのテキストが変更された場合、 onLongClick関数が正常に動作したことを意味します。 実装の詳細は、サンプルコードを参照してください。

ボタンタッチイベントの処理

もしボタンコントロールにpressまたはliftイベントへの応答が必要な場合は、タッチモニターのインターフェイスを登録して行うことができます。以下はサンプルコードです。

  1. ユーザーだけのタッチモニターインターフェイスの実装

     namespace {    
 // Add an anonymous scope to prevent multiple source files from defining the same class name and conflict at runtime

 // Implement touch monitoring interface
 class TouchListener : public ZKBase::ITouchListener {
 public:
     virtual void onTouchEvent(ZKBase *pBase, const MotionEvent &ev) {
         switch (ev.mActionStatus) {
         case MotionEvent::E_ACTION_DOWN:
             mTouchButtonPtr->setText("Press");
             break;
         case MotionEvent::E_ACTION_UP:
             mTouchButtonPtr->setText("Lift");
             break;
         default:
             break;
         }
     }
};

 }

  2. リスナーオブジェクトの作成

     static TouchListener sTouchListener;

  3. static void onUI_init()関数にタッチモニタリングインターフェイス登録コードを追加

     static void onUI_init() {
     //Register the button touch monitoring interface
     mTouchButtonPtr->setTouchListener(&sTouchListener);
 }

  4. static void onUI_quit()関数にタッチモニタリングインターフェイスの登録を解除するコードを追加

     static void onUI_quit() {
     //Un-register the button touch monitoring interface
     mTouchButtonPtr->setTouchListener(NULL);
 }

  5. コードの追加後、コンパイル、ダウンロードしてボードでテストしてください。 実装の詳細は、サンプルコードを参照してください

サンプルコード

サンプルコードのButtonDemoプロジェクトを参照してください

プレビュー画面 :

powered by Gitbooklast modified: 2020-12-02 15:17:59

results matching ""

    No results matching ""