การปรับแต่ง 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)
  • แสดงชื่อเอกสารแทน 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()));

ขั้นตอนถัดไป: ดูวิธีเพิ่มการดำเนินการที่กำหนดเองลงในแท็บที่กำหนดเอง