Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

[上級者向け]iOSキーボード出現時に<ion-footer>を隠さない

More than 3 years have passed since last update.

概要

キーボード出現時、Androidでは <ion-footer> を持ち上げる形でキーボードが出現します。しかし、iOSではなぜか <ion-footer> を隠す形でキーボードが出現します。これはIonic 2のかなり初期からのバグでして、

https://github.com/ionic-team/ionic/issues/7149
https://github.com/ionic-team/ionic/issues/12844
https://forum.ionicframework.com/t/ios-keyboard-overlap-ion-footer-and-moves-bottom-tabs/56060

と様々なIssueが上げられ、コミュニティ内で解決法が話し合われています。iOS10では動いたけどiOS11では動かない解決法などありまして、今のところ、以下のディレクティブを自作して操作するのが一番無難なのでご紹介します。

https://gist.github.com/rdlabo/57bb9a2098f2f83c2c1cc16c8e88f6d5

使い方

Directiveを作成する

ionic gコマンドでdirectiveを実行する。名前はkeyboard-attachで作成します。

Directiveを書き換える

自動的にsrc/directives/keyboard-attach/keyboard-attachが生成されます。中身を

https://gist.github.com/rdlabo/57bb9a2098f2f83c2c1cc16c8e88f6d5

に置き換えます。結構以前につくったものなので、selector名がデフォルトと違いますがご容赦ください。

利用するngModuleでDirectiveを読み込む

Directiveを利用するためには、Moduleで読み込む必要があります。例えば、LazyLoadingを実装しており、MessagePageModuleに追記するならこんな感じになります。

  import { NgModule } from '@angular/core';
  import { IonicPageModule } from 'ionic-angular';
  import { MessagePage } from './message';
+ import { DirectivesModule } from '@/directives/directives.module';

  @NgModule({
      declarations: [
          MessagePage,
      ],
      imports: [
          IonicPageModule.forChild(MessageUser),
+         DirectivesModule
      ],
      exports: [
          MessagePage,
      ]
  })
  export class MessagePageModule {}

ComponentsでDirectiveを使う

あとは、作成したts/htmlテンプレート内でDirecitiveを利用します。

@ViewChild(Content) content: Content;
<ion-footer [keyboardAttach]="content">
</ion-footer>

まとめ

実はこのDirectiveは完璧ではなく、キーボード出現時に一瞬Headerが下に落ちてからキーボードにあわせて上にあがってくるバグを抱えております。もし解決できましたら、日本語で大丈夫ですので

https://gist.github.com/rdlabo/57bb9a2098f2f83c2c1cc16c8e88f6d5

にコメントをいただけましたら幸いです。

それでは、また。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away