[Ionic] 안드로이드 디자인 역시 Collapsible Large Titles!

Ionic 5를 시작으로 Ionic에서'Collapsible Large Titles'가 시행됐다.스크롤하지 않은 상태에서 Lerge Title을 표시하고 스크롤할 때 헤더 섹션에 작은 제목을 표시합니다.

그러나 이 표시는 iOS 모드ios에서만 유효하며 안드로이드 모드md에서는 사용할 수 없습니다.
!
Ionic에서는 플랫폼의 재현성을 높이기 위해 실행 중인 장치를 통해 같은 구성 요소를 iOS의 디자인, 안드로이드의 디자인에 표시한다.
그러나 안드로이드도 최근 콜랩시블 라지 타이틀을 채택했다.예를 들어, Pixel 5a/Android 12의 설정 화면은 다음과 같습니다.

이 안드로이드 디자인으로 Collapsible Large Titles를 사용하십시오!이것은 일종의 반모드가 아니다.
그렇다면 Android Design에서 Collapsible Large Titles를 사용하는 방법은 무엇입니까?

아무 생각 없는 상황

안드로이드도 iOS 설계를 강제할 경우 안드로이드도 Collapsible Large Titles를 사용할 수 있습니다.

<ion-header [translucent]="true" mode='ios'>
  <ion-toolbar>
    <ion-title>{{ title }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense" mode='ios'>
    <ion-toolbar>
      <ion-title size="large">{{ title }}</ion-title>
    </ion-toolbar>
  </ion-header>

Ionic의 구성 요소mode=ios는 iOS 디자인에 고정할 수 있다(Android 디자인에 고정하고 싶다면mode=md.또한 지정된 항목이 없으면 네스트된 어셈블리는 모 어셈블리의 설계를 상속합니다.
그러나 제목은 iOS 표시에 고정됩니다.

(왼쪽은 iOS 디자인, 오른쪽은 안드로이드 디자인)
안드로이드 디자인에서 페이지의 제목은 왼쪽으로 치우친 비교적 가는 문자이고 iOS 디자인은 중앙으로 치우친 굵은 문자이다.다른 [뒤로] 버튼의 형태와 각 플랫폼이 설정한 것은 iOS에 고정되어 있습니다.나 이거 싫어.

안드로이드를 사용할 수 없는 이유를 정리해 주세요.

https://forum.ionicframework.com/t/is-there-anyway-to-have-collapsable-title-on-android-too/219791에서 마이클은 "아이OS를 위한 하드웨어 인코딩이기 때문에 안드로이드에서 사용할 수 없다"고 답했다.하드웨어 인코딩할 곳을 찾아보자.
먼저 CSS로 설계되었습니다.
https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/header/header.ios.scss#L36-L109
ion-header에 대해 엄격한 인코딩을 진행하였다.안드로이드에서 비활성화된 코드는 다음과 같습니다.
https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/header/header.md.scss#L25-L31
만약 display: none만 한다면 CSS를 사용하면 방법이 있을 것 같지만 다음 아래의 하드코딩이 나타날 것이다.
https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/header/header.tsx#L73-L78 checkCollapsibleHeader 방법은 간단하게 말하면 Collapsible Large Titles를 설정했는지 확인하고 스크롤량을 계산하며 애니메이션을 잘 제어하는 방법이다.이거 아니면mode=ios 안 움직여!!!!
그러나 ion-header 구성 요소는 iOS/Android에서 서로 다른 처리를 하고 디자인된 것은 Collapsible Large Titles의 지점뿐이다.iOS/Android의 높이는 차이가 있습니다ion-toolbar. 설마 이것은 카드입니까?

iOS 모드의 문제점 고려

안드로이드 디자인에서 페이지의 제목은 왼쪽으로 치우친 비교적 가는 문자이고 iOS 디자인은 중앙으로 치우친 굵은 문자이다.다른 [뒤로] 버튼의 형태와 각 플랫폼이 설정한 것은 iOS에 고정되어 있습니다.나 이거 싫어.
위에서 말한 바와 같이 이것은 ion-header에 설정된 것이 아니다.ion-header부터 끼워 넣는 것은 계승 모델ion-toolbar이 일으킨 문제입니다.그럼 ion-toolbar에서도 모델을 지정하면 어떨까요??

<ion-header [translucent]="true" mode='ios'>
  <ion-toolbar mode="md">
    <ion-title>{{ title }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense" mode='ios'>
    <ion-toolbar mode="md">
      <ion-title size="large">{{ title }}</ion-title>
    </ion-toolbar>
  </ion-header>

오, 이미 이상에 가까워졌어요.안드로이드 디자인에는 Large Title이 없기 때문에 따로 설정해야 합니다.글로벌 CSS에 다음을 추가합니다.(일본어로는 위쪽이 조금 끊겨서 30px 정도가 좋음).

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

/* display:noneが先に読み込まれることがあるので詳細度をあげて上書き */
ion-app.md .header-collapse-condense {
    display: block;
}

그렇다면 행동에는 대체로 문제가 없겠죠.다만, 이렇게 되면 iOS 때도 안드로이드 디자인이 될 수 있으므로 @ionic/angular의 Plaatform API로 실행 단말기를 판정해 보자.그나저나 내 수중에 있는 안드로이드는 buller 효과가 없어서 효과도 끊긴다.

<ion-header [translucent]="platform.is('ios')" mode="ios">
  <ion-toolbar [mode]="!platform.is('ios') ? 'md': undefined">
    <ion-title>Tab One</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense" mode="ios">
    <ion-toolbar [mode]="!platform.is('ios') ? 'md': undefined">
      <ion-title size="large">Tab One</ion-title>
    </ion-toolbar>
  </ion-header>

왼쪽은 iOS, 오른쪽은 안드로이드입니다.대체로 재현되었다.

총결산

https://github.com/ionic-team/ionic-framework/issues/25157에서 Issue가 열거했지만 설치와 발행은 아직 오래 걸릴 것 같습니다.그래도 안드로이드에서 Collapsible Large Titles를 사용하고 싶은 분들은 꼭 참고하시기 바랍니다.
실제 제품에서 실현되는 경우 모든 페이지에서 모더와plaatform을 지정하는 것은 힘들기 때문에 Directive를 사용하여DOM의 조작을 통해 이런 조작을 하면 똑똑하다.
그럼 안녕히 계세요.