Ionic AngularでScroll-Hiding Headerを簡単に実装しよう
IonicのCollapsible Large Titlesリリース当時はiOSのみがこのデザインを採用していましたが、その後Material Designが正式対応。ただ、IonicはまだMaterial Youに対応していないので、現在でもMaterial DesignのLarge Titleは使えません。
そこあたりは以下のIssueが参考になるかと思います。
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でのスクロール
@angular/cdkのvirtual scrollでのスクロール
使い方
% npm install @rdlabo/ionic-angular-scroll-header
インストール後、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の方が適してる場面も多いのでぜひお試しください。
それではまた。
Discussion