English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在位置
  2. ホームページ
  3. 経験記録
  4. 本文

AndroidのPopupWindowコントロールをiOSの下部のポップアップに模倣

前語

在H5熱狂的な時代、多くのフレームワークが下部弹出ポップアップのコントロールを出してきました。H5呼ばれるアクションシートと称される、今日はiOSの下部弹出ポップアップを模倣します。素材は、アップルQQのアイコン選択機能から取られています。

本文

話題を前に置かずに、今日実現する効果図を先に見てみましょう


整个PopupWindowの開始コード

private void openPopupWindow(View v) {
  //ボタンを重複押下を防ぐ
  if (popupWindow != null && popupWindow.isShowing()) {
    return;
  }
  //PopupWindowのViewを設定
  View view = LayoutInflater.from(this).inflate(R.layout.view_popupwindow, null);
  popupWindow = new PopupWindow(view, RelativeLayout.LayoutParams.MATCH_PARENT,
      RelativeLayout.LayoutParams.WRAP_CONTENT);
  //背景を設定、効果はなく、設定しないとエラーが発生します
  popupWindow.setBackgroundDrawable(new BitmapDrawable());
  //クリックした際に弹窗外を非表示にする設定
  popupWindow.setFocusable(true);
  popupWindow.setOutsideTouchable(true);
  //アニメーションを設定
  popupWindow.setAnimationStyle(R.style.PopupWindow);
  //位置を設定
  popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);
  //消失リスナーを設定
  popupWindow.setOnDismissListener(this);
  //PopupWindowのViewクリックイベントを設定
  setOnPopupViewClick(view);
  //背景色を設定
  setBackgroundAlpha(0.5f);
}

手順分析：

PopupWindowのレイアウト
PopupWindowの作成
PopupWindowにアニメーション効果を追加します
PopupWindowに背景の影を設定します
PopupWindowがクリックイベントをリスンします
NavigationBarの高さを取得します

PopupWindowのレイアウト：レイアウト内で必要なレイアウトをデザインします

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical">
  <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8android:background="@drawable/popup_shape" android:orientation="vertical">
    <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="16android:text="あなたは写真壁に写真をアップロードすることができます" android:textColor="#666" android:textSize="14sp" />
    <View android:layout_width="match_parent" android:layout_height="0.1px" android:background="#888" />
    <TextView android:id="@+id/tv_pick_phone" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="16android:text="携帯電話のアルバムから選択" android:textColor="#118" android:textSize="18sp" />
    <View android:layout_width="match_parent" android:layout_height="0.1px" android:background="#888" />
    <TextView android:id="@+id/tv_pick_zone" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="16android:text="スペースのアルバムから選択" android:textColor="#118" android:textSize="18sp" />
  </LinearLayout>
  <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8android:background="@drawable/popup_shape">
    <TextView android:id="@+id/tv_cancel" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="16android:text="キャンセル" android:textColor="#118" android:textSize="18sp" android:textStyle="bold" />
  </LinearLayout>
</LinearLayout>

その効果は：


PopupWindowの作成：これは通常のウィジェットの作成方法と同じです

//PopupWindowのViewを設定
View view = LayoutInflater.from(this).inflate(R.layout.view_popupwindow, null);
popupWindow = new PopupWindow(view, RelativeLayout.LayoutParams.MATCH_PARENT,
        RelativeLayout.LayoutParams.WRAP_CONTENT);

PopupWindowにアニメーション効果を追加します：animフォルダーを作成し、outとinアニメーションを作成し、styleにアニメーションを追加します

<?xml version="1.0" encoding="utf-8"?>
!--进入アニメーション-->
<translate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:fromYDelta="100%" android:toYDelta="0" android:duration="200"/>
<?xml version="1.0" encoding="utf-8"?>
!--退出アニメーション-->
<translate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:fromYDelta="0" android:toYDelta="100%" android:duration="200"/>
!--ポップアップアニメーション-->
<style name="PopupWindow"> <item name="android:windowEnterAnimation">@anim/window_in</item> <item name="android:windowExitAnimation">@anim/window_out</item> </style>

//アニメーションを設定
popupWindow.setAnimationStyle(R.style.PopupWindow);

PopupWindowの背景の影を設定します：ポップアップが開かれたときに透明度を0に設定します5、ポップアップが消える時に透明度を設定します1

//スクリーンの背景を透明にする効果を設定
public void setBackgroundAlpha(float alpha) {
  WindowManager.LayoutParams lp = getWindow().getAttributes();
  lp.alpha = alpha;
  getWindow().setAttributes(lp);
}

PopupWindowのクリックイベントのリスナー：PopupWindow内のウィジェットのクリックイベントをリスンします

//PopupWindowのViewクリックイベントを設定
setOnPopupViewClick(view);
private void setOnPopupViewClick(View view) {
  TextView tv_pick_phone, tv_pick_zone, tv_cancel;
  tv_pick_phone = (TextView) view.findViewById(R.id.tv_pick_phone);
  tv_pick_zone = (TextView) view.findViewById(R.id.tv_pick_zone);
  tv_cancel = (TextView) view.findViewById(R.id.tv_cancel);
  tv_pick_phone.setOnClickListener(this);
  tv_pick_zone.setOnClickListener(this);
  tv_cancel.setOnClickListener(this);
}

ナビゲーションバーの高さを取得します：ここでは、ナビゲーションバーがないスマートフォンとあるスマートフォンに対応する必要があります。ここでは、ナビゲーションバーがある場合をデモンストレーションに使用します
int resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android");
navigationHeight = getResources().getDimensionPixelSize(resourceId);

ナビゲーションバーがあるスマートフォンで、PopupWindowの表示位置を設定します
//位置を設定
popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);

ナビゲーションバーがないスマートフォンで、PopupWindowの表示位置を設定します
//位置を設定
popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, 0);

源程

Github：https://github.com/AndroidHensen/IOSPopupWindow

public class MainActivity extends AppCompatActivity implements View.OnClickListener, PopupWindow.OnDismissListener {
  private Button bt_open;
  private PopupWindow popupWindow;
  private int navigationHeight;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    bt_open = (Button) findViewById(R.id.bt_open);
    bt_open.setOnClickListener(this);
    int resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android");
    navigationHeight = getResources().getDimensionPixelSize(resourceId);
  }
  @Override
  public void onClick(View v) {
    switch (v.getId()) {
      case R.id.bt_open:
        openPopupWindow(v);
        break;
      case R.id.tv_pick_phone:
        Toast.makeText(this, "/手机简简亮选择", Toast.LENGTH_SHORT).show();
        popupWindow.dismiss();
        break;
      case R.id.tv_pick_zone:
        Toast.makeText(this, "/空间简简亮选择", Toast.LENGTH_SHORT).show();
        popupWindow.dismiss();
        break;
      case R.id.tv_cancel:
        popupWindow.dismiss();
        break;
    }
  }
  private void openPopupWindow(View v) {
    //ボタンを重複押下を防ぐ
    if (popupWindow != null && popupWindow.isShowing()) {
      return;
    }
    //PopupWindowのViewを設定
    View view = LayoutInflater.from(this).inflate(R.layout.view_popupwindow, null);
    popupWindow = new PopupWindow(view, RelativeLayout.LayoutParams.MATCH_PARENT,
        RelativeLayout.LayoutParams.WRAP_CONTENT);
    //背景を設定、効果はなく、設定しないとエラーが発生します
    popupWindow.setBackgroundDrawable(new BitmapDrawable());
    //クリックした際に弹窗外を非表示にする設定
    popupWindow.setFocusable(true);
    popupWindow.setOutsideTouchable(true);
    //アニメーションを設定
    popupWindow.setAnimationStyle(R.style.PopupWindow);
    //位置を設定
    popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);
    //消失リスナーを設定
    popupWindow.setOnDismissListener(this);
    //PopupWindowのViewクリックイベントを設定
    setOnPopupViewClick(view);
    //背景色を設定
    setBackgroundAlpha(0.5f);
  }
  private void setOnPopupViewClick(View view) {
    TextView tv_pick_phone, tv_pick_zone, tv_cancel;
    tv_pick_phone = (TextView) view.findViewById(R.id.tv_pick_phone);
    tv_pick_zone = (TextView) view.findViewById(R.id.tv_pick_zone);
    tv_cancel = (TextView) view.findViewById(R.id.tv_cancel);
    tv_pick_phone.setOnClickListener(this);
    tv_pick_zone.setOnClickListener(this);
    tv_cancel.setOnClickListener(this);
  }
  //スクリーンの背景を透明にする効果を設定
  public void setBackgroundAlpha(float alpha) {
    WindowManager.LayoutParams lp = getWindow().getAttributes();
    lp.alpha = alpha;
    getWindow().setAttributes(lp);
  }
  @Override
  public void onDismiss() {
    setBackgroundAlpha(1);
  }
}

これで本文の全てが終わりです。皆さんの学習に役立てば幸いです。皆さんにもこの教材をサポートしていただけると嬉しいです。

声明：本文の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーが自発的に提供し、アップロードしたものであり、本サイトは所有権を持ちません。また、人工編集は行われていません。著作権侵害の疑いがある場合は、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メール送信時は、#を@に変更して報告してください。関連する証拠を提供し、一旦確認がとれた場合は、本サイトが侵害疑いの内容をすぐに削除します。）

基礎教程
おすすめ