More than 3 years have passed since last update.

Androidでポップアップが表示されている時に、ポップアップの外側をタップすると、後ろにあるボタンが反応してしまう場合の対処法

Last updated at 2021-01-06Posted at 2021-01-06

はじめに

Android端末では、ポップアップが表示されている時に、ポップアップの外側をタップすると、
後ろにあるボタンが反応してしまう場合があります。
（例：ボタンの上にzindexが大きいFlexContainerをおいても、下のボタンをタップすると動作してしまう）

今回は、コンポーネントのポップアップを使って、
後ろのボタンが反応しないようにするための対処法についてご紹介したいと思います。

バグ再現

1. 画面解説

まず事象を再現するために、btnInsertとbtnDeleteの2つのボタンを配置し、
それぞれのボタンをタップすると、ポップアップが表示されるようなサンプルフォームを作成します。

方法のみ先に知りたい方は、3. 解消方法　をご確認ください

それぞれのボタンをタップすると、AlertPopupが表示されるよう、Componentを作成します。
ComponentはTemplatesタブのComponentsから作成できます。
作成方法は[こちらの記事]
(https://qiita.com/Kony_Team/items/a25b322d9524f9f1ac92#1-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90)を参考にしてください！

タップしたボタンでポップアップのメッセージを変えるためにlblTitleを選択し、propertyの共有をします。Manage Propertiesの作成方法はこちらの記事を参考にしてください！

それぞれのボタンをタップするとこのような画面になります！
(左)Insertボタンタップ　(右)Deleteボタンタップ

2. コード

frmMainController.js

define({ 

  onPreShow: function() {
    this.view.AlertPopup.setVisibility(false);
  },

  showAddPopup: function() {
    // 共有したComponentのPropertyから表示させるテキストを指定
    this.view.AlertPopup.titleText = "Do you want to Insert the data?";
    this.view.AlertPopup.setVisibility(true);
  },

  showDeletePopup: function() {
    // 共有したComponentのPropertyから表示させるテキストを指定
    this.view.AlertPopup.titleText = "Do you want to Delete the Data?";
    this.view.AlertPopup.setVisibility(true);
  },

});

この時のfrmMainControllerのコードです。
onPreShowで画面表示時にポップアップを非表示にし、各ボタンを押下するとそれぞれのポップアップが表示される関数showAddPopupとshowDeletePopupを書きます。
kony.ui.Alertについてはこちらの記事を参考にしてください。

ComponentsのAlertPopupControllerもコーディングします。

AlertPopupController.js

define(function() {
  return {
    closePopup: function() {
      // AlertPopupを非表示にする
      this.view.setVisibility(false);
    },
  };
});

ポップアップのOKボタンを押した時にAlertPopupを非表示にする関数を書きます。

3. Action紐づけ

関数をそれぞれ用意したのでAcrtionの紐づけを行います。
frmMainのbtnInsertを選択し、onClickのEditをクリックします。
Actionの中からInvoke Funcitonを選択し、紐づけたい関数(showAddPopup)を選択します。
同様の手順で
btnDeleteとshowDeletePopup、
AlertPopupのbtnOKとclosePopupを紐づけます。