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()));

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