맞춤 탭의 장점 중 하나는 앱에 원활하게 통합할 수 있다는 것입니다. 맞춤 탭 가이드의 이 부분에서는 앱에 맞게 맞춤 탭의 모양과 동작을 변경하는 방법을 알아봅니다.
툴바의 색상 설정
먼저 맞춤 탭의 주소 표시줄을 앱의 테마와 일치하도록 맞춤설정합니다. 아래 스니펫은 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()));
다음 단계: 맞춤 탭에 맞춤 작업을 추가하는 방법을 알아보세요.