ข้อดีอย่างหนึ่งของแท็บที่กำหนดเองคือสามารถผสานรวมกับแอปของคุณอย่างราบรื่น ในส่วนนี้ของคู่มือแท็บที่กำหนดเอง คุณจะได้เรียนรู้วิธีเปลี่ยนรูปลักษณ์และการทำงานของแท็บที่กำหนดเองเพื่อให้ตรงกับแอปของคุณ
กำหนดสีของแถบเครื่องมือ
ขั้นแรก ให้ปรับแต่งแถบที่อยู่ของแท็บที่กำหนดเองให้สอดคล้องกับธีมของแอป ข้อมูลโค้ดด้านล่างจะเปลี่ยนสีแถบเครื่องมือเริ่มต้นโดยการเรียกใช้ 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 อัตโนมัติ และไอคอนปิดที่กำหนดเอง
มีอีก 2-3 อย่างที่คุณทำได้เพื่อปรับ UI ของแท็บที่กำหนดเองตามต้องการ
- ซ่อนแถบ URL ขณะเลื่อนเพื่อให้ผู้ใช้มีพื้นที่มากขึ้นในการสำรวจเนื้อหาเว็บโดยใช้
setUrlBarHidingEnabled()(true)
- แสดงชื่อเอกสารแทน URL ผ่าน
setShowTitle()(true)
- ปรับแต่งปุ่มปิดให้ตรงกับลักษณะการใช้งานของผู้ใช้ในแอป เช่น แสดงลูกศรย้อนกลับแทนไอคอน
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();
การตั้งค่า URL ที่มาที่กำหนดเอง
คุณสามารถตั้งค่าแอปของคุณเป็น URL ที่มาเมื่อเปิดแท็บที่กําหนดเอง วิธีนี้ช่วยให้เว็บไซต์ทราบว่าการเข้าชมของตนมาจากที่ใดได้
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build()
customTabsIntent.intent.putExtra(Intent.EXTRA_REFERRER,
Uri.parse("android-app://" + context.getPackageName()));
ส่วนถัดไป: ดูวิธีเพิ่มการดำเนินการที่กำหนดเองลงในแท็บที่กำหนดเอง