Ionic AngularでScroll-Hiding Headerを簡単に実装しよう

IonicのCollapsible Large Titlesリリース当時はiOSのみがこのデザインを採用していましたが、その後Material Designが正式対応。ただ、IonicはまだMaterial Youに対応していないので、現在でもMaterial DesignのLarge Titleは使えません。

そこあたりは以下のIssueが参考になるかと思います。

https://github.com/ionic-team/ionic-framework/issues/25157

https://github.com/ionic-team/ionic-framework/issues/24282

2年前に 「[Ionic] Android DesignでもCollapsible Large Titlesを使いたい！」 という記事を公開して、Material DesignでCollapsible Large Titlesを実装する方法をご紹介しました。

ただ少し無理やりであり、また現実的に考えるとCollapsible Large Titleの目的は

• 表示当初はLarge Title
• スクロールするとSmall Title（表示領域を減らす）

ことが目的であり、この機能はScroll-Hiding Headerで果たすことができるのではと考えました。そこで、Ionic AngularでScroll-Hiding Headerを簡単に実装できるライブラリをリリースしました。実際、InstagramもXもFacebookもScroll-Hiding Headerを採用しており、こちらの方が馴染みの深いUIパターンになりましたしね。

デモ

Ionicデフォルトでは ion-content でスクロールすることの方が多いですが、現実的にはアイテムが多くなるとVirtual Scrollを採用することになるので、両方対応できるようにライブラリを用意しています。どちらもデモでご確認いただけます。

ion-contentでのスクロール

https://rdlabo-ionic-angular-library.netlify.app/main/scroll-header

@angular/cdkのvirtual scrollでのスクロール

https://rdlabo-ionic-angular-library.netlify.app/main/virtual-scroll-header

使い方

% npm install @rdlabo/ionic-angular-scroll-header

インストール後、CSSを設定する必要がありますので忘れないようにしてください。

CSSをインポートする必要があります。

css

+ @import '@rdlabo/ionic-angular-scroll-header/css/scroll-header.directive.css';

+ /* If you use cdk virtual scroll */
+ cdk-virtual-scroll-viewport {
+   width: 100%;
+   height: 100%;
+   .cdk-virtual-scroll-content-wrapper {
+     padding-top: inherit;
+   }
+ }

ion-contentでのスクロール

Directiveをインポートして、設定するだけで利用できます。ここでは ion-header class="hidden" を用意していますが、これはiOSのSafe Area対応のためですので、異なる方法（※ ion-content のpadding-topで調整してる等）の場合は割愛することができます。

import { ScrollHeaderDirective } from '@rdlabo/ionic-angular-scroll-header';
@Component({
  ...
  imports: [
    ScrollHeaderDirective
  ],
})

<ion-header class="hidden"><ion-toolbar></ion-toolbar></ion-header> <!-- set hidden header for safe-area -->
<ion-content rdlaboScrollHeader>
  <ion-header>
    <ion-toolbar>...</ion-toolbar> <!-- Default Header for display -->
  </ion-header>
  ...Your Content
</ion-content>

@angular/cdkのvirtual scrollでのスクロール

@angular/cdk の virtual scroll でも、インポートするDirectiveが異なるだけで使い方は同じです。

import { VirtualScrollHeaderDirective } from '@rdlabo/ionic-angular-scroll-header';

@Component({
  ...
  imports: [
    VirtualScrollHeaderDirective
  ],
})

<ion-header class="hidden"><ion-toolbar></ion-toolbar></ion-header> <!-- set hidden header for safe-area -->
<ion-content rdlaboVirtualScrollHeader>
  <ion-header>
    <ion-toolbar>...</ion-toolbar> <!-- Default Header for display -->
  </ion-header>
  <cdk-virtual-scroll-viewport minBufferPx="900" maxBufferPx="1350" [itemSize]="44" class="ion-content-scroll-host">
    ...Your Content
  </cdk-virtual-scroll-viewport>
</ion-content>

まとめ

更に詳しい情報は https://github.com/rdlabo-team/ionic-angular-library/tree/main/projects/scroll-header#readme をご覧ください。Ionicデフォルト機能だけだとついCollapsible Large Titlesに固執しがちですが、UIで果たす役割を考えるとScroll-Hiding Headerで十分置き換え可能というか、Scroll-Hiding Headerの方が適してる場面も多いのでぜひお試しください。

それではまた。