🍎

Ionic Framework初期テンプレートのLargeTitleを理解する

2021/09/07に公開

iOS

Ionic

hig

tech

最近Ionic Frameworkがイオンスーパーや三井住友銀行、みんなの銀行などの大手で相次いで採用されたからか、さわりだした話をまたちょいちょい聞くようになりました。

Ionic5がリリースされたのが2020年2月なので少し今更感があるのですが、現在のテンプレートで採用されてるLarge Titleについて解説します。

Large Titleとは

iOS11で採用されたインターフェースです。

Navigation Bar Titles - Human Interface Guidelines

実装の特徴としては以下の通りです。

スクロールしたら、Large Titleから通常のタイトルに変化する
プッシュ遷移すると、遷移先でバックボタンのタイトルに変化する

アニメーションをみるとわかりやすいですね。以下のタイトルがLarge Titleです。

Ionicでどのように再現してるのか

IonicはネイティブUIを忠実に再現することに定評があります。ですので、この挙動を忠実に再現しようと以下の実装をしています。これはスターターテンプレートのBLANKのものです。

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>
</ion-content>

よくみると、 ion-header 以下が、先頭と、 ion-content 直下に２つあることがわかります。先頭にある ion-header 以下の ion-title が通常のタイトル、 ion-content 直下にある ion-header 以下の ion-title がLarge Titleです。そして、これが ion-content がスクロールされると自動的に切り替わります。

LageTitleの実装に重要な属性は size="large" と collapse="condense" の2つです。 size="large" は単にタイトルを大きくします（ font-size ）。 collapse="condense" は、これがある場合、ない ion-header 以下の ion-title を非表示にします。そして、 ion-content がスクロールされると閾値で ion-title の表示非表示を切り替えます。

なお、これが利用されるのはiOS Designの場合のみですので、Android環境ではデフォルトで非表示となります。開発時にiOSデザインを確認する方法については

をご参照ください。

より理解を深めるために

`size="large"` を消してみる

  <ion-content [fullscreen]="true">
    <ion-header collapse="condense">
      <ion-toolbar>
-       <ion-title size="large">Blank</ion-title>
+       <ion-title>Blank</ion-title>
      </ion-toolbar>
    </ion-header>

もちろんLargeTitleが小さくなります。

ちなみに、LergeTitleを日本語にすると微妙に上部が切れるので、日本語のサイズ的には30pxにしておくことをおすすめします（初期値44px）

ion-title[size="large"] {
  font-size: 30px;
}

`collapse="condense"` を消してみる

手元のプロジェクを以下のように変更してみましょう。

  <ion-content [fullscreen]="true">
-   <ion-header collapse="condense">
+   <ion-header>

そうすると内部的に ion-header の優先順がなくなるので、以下の表示になります。両方表示されてしまいますね。

LargeTitleを使わない場合

使う場合は初期テンプレートのままでいいのですが、使わない場合は ion-content > ion-header ごと削除してください。これでLargeTitleをiOS環境でも適用しないでIonicを利用することができます。

それでは、また。