UI 맞춤설정

Sebastian Benz

맞춤 탭의 한 가지 이점은 앱에 원활하게 통합할 수 있다는 것입니다. 맞춤 탭 가이드의 이 부분에서는 앱에 맞게 맞춤 탭의 모양과 동작을 변경하는 방법을 알아봅니다.

툴바 색상 설정

맞춤 밝은 색 구성표가 적용된 맞춤 탭
밝은 모드
맞춤 어두운 색 구성표가 적용된 맞춤 탭
어두운 모드

먼저 앱의 테마와 일치하도록 맞춤 탭의 주소 표시줄을 맞춤설정합니다. 아래 스니펫은 setDefaultColorSchemeParams()를 호출하여 기본 툴바 색상을 변경합니다. 앱에서 어두운 색 구성표도 지원하는 경우 .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, …)를 통해 설정합니다.

// get the current toolbar background color (this might work differently in your app)
@ColorInt int colorPrimaryLight = ContextCompat.getColor(MainActivity.this, R.color.md_theme_light_primary);
@ColorInt int colorPrimaryDark = ContextCompat.getColor(MainActivity.this, R.color.md_theme_dark_primary);

CustomTabsIntent intent = new CustomTabsIntent.Builder()
        // set the default color scheme
        .setDefaultColorSchemeParams(new CustomTabColorSchemeParams.Builder()
                .setToolbarColor(colorPrimaryLight)
                .build())
        // set the alternative dark color scheme
        .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, new CustomTabColorSchemeParams.Builder()
                .setToolbarColor(colorPrimaryDark)
                .build())
        .build();

이제 툴바에 맞춤 배경 및 전경 색상이 있습니다.

맞춤 들어가기 및 나가기 애니메이션 구성

다음으로 setStartAnimation 및 setExitAnimation를 사용하여 맞춤 시작 및 종료 애니메이션을 정의하여 앱에서 맞춤 탭 환경을 더 원활하게 실행 (및 종료)할 수 있습니다.

CustomTabsIntent intent = new CustomTabsIntent.Builder()
…
.setStartAnimations(MainActivity.this, R.anim.slide_in_right, R.anim.slide_out_left)
.setExitAnimations(MainActivity.this, android.R.anim.slide_in_left, android.R.anim.slide_out_right)
.build();

추가 맞춤설정: 제목, AppBar 자동 숨기기, 맞춤 닫기 아이콘

맞춤 탭의 UI를 필요에 맞게 조정하는 방법은 더 있습니다.

  • 스크롤 시 URL 표시줄을 숨겨 사용자가 setUrlBarHidingEnabled()(true)를 사용하여 웹 콘텐츠를 탐색할 수 있는 공간을 더 확보합니다.
  • setShowTitle()(true)를 통해 URL 대신 문서 제목을 표시합니다.
  • 앱의 사용자 흐름에 맞게 닫기 버튼을 맞춤설정합니다(예: 기본 X 아이콘 대신 뒤로 화살표 표시). setCloseButtonIcon()(myCustomCloseIcon)

이러한 기능은 모두 선택사항이지만 앱의 맞춤 탭 환경을 개선할 수 있습니다.

Bitmap myCustomCloseIcon = getDrawable(R.drawable.ic_baseline_arrow_back_24));
CustomTabsIntent intent = new CustomTabsIntent.Builder()
  …
  .setUrlBarHidingEnabled(true)
  .setShowTitle(true)
  .setCloseButtonIcon(toBitmap(myCustomCloseIcon))
  .build();

맞춤 리퍼러 설정

맞춤 탭을 실행할 때 앱을 리퍼러로 설정할 수 있습니다. 이렇게 하면 웹사이트에 트래픽의 출처를 알릴 수 있습니다.

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build()
customTabsIntent.intent.putExtra(Intent.EXTRA_REFERRER,
       Uri.parse("android-app://" + context.getPackageName()));

다음 단계: 맞춤 탭에 맞춤 작업을 추가하는 방법 알아보기