ทำงานหลายอย่างพร้อมกันด้วยแท็บที่กำหนดเองบางส่วน

Sebastian Benz

โดยค่าเริ่มต้น แท็บที่กำหนดเองจะเปิดเป็นกิจกรรมแบบเต็มหน้าจอ เริ่มต้นใน Chrome 107 คุณสามารถใช้แท็บที่กำหนดเองบางส่วนเพื่อระบุความสูงของการเปิดตัวที่แตกต่างกันใน โหมดภาพบุคคลเพื่อให้ผู้ใช้สามารถทำงานหลายอย่างพร้อมกันได้ ด้วยการโต้ตอบกับแอปของคุณ ในการดูเนื้อหาเว็บ ผู้ใช้ขยายแท็บที่กำหนดเองให้เต็มหน้าจอได้ด้วยการลาก แถบเครื่องมือและคืนค่าความสูงเริ่มต้นโดยการลาก แฮนเดิลลง

วันที่ ภาพหน้าจอของ Bottom Sheet บางส่วนของแท็บ
แท็บที่กำหนดเองบางส่วนใน Bottom Sheet

สำหรับหน้าจอขนาดใหญ่หรืออุปกรณ์ในโหมดแนวนอน ตั้งแต่ Chrome 120 เป็นต้นไป ความกว้างการเปิดสูงสุดเพื่อแสดงแท็บที่กำหนดเองบางส่วนในด้าน ชีต การกำหนดจุดพักทำให้คุณสามารถตัดสินใจได้ว่าเมื่อใดที่จะเปิดตัวโฆษณาที่กำหนดเองบางส่วน แตะที่ด้านล่างหรือแผงด้านข้าง

วันที่ ภาพหน้าจอของแผงด้านข้างของแท็บบางส่วน
แท็บที่กำหนดเองบางส่วนในแผงด้านข้าง

วิชาบังคับก่อน

หากต้องการใช้แท็บที่กำหนดเองได้บางส่วน คุณต้องทำดังนี้

ใช้ทั้ง 2 แนวทางหากต้องการให้การเริ่มต้นอย่างรวดเร็วในกรณีที่ใช้บริการ ยังไม่ได้สร้างการเชื่อมต่อ

กำหนดค่า Bottom Sheet

หากต้องการเปลี่ยนแท็บที่กำหนดเองให้เป็นแท็บที่กำหนดเองบางส่วน ให้กำหนดความสูงเริ่มต้นในการเริ่มใช้งาน เป็นพิกเซลโดยการเรียกใช้คลาส CustomTabBuilder setInitialActivityHeightPx() โดยค่าเริ่มต้น แท็บที่กำหนดเองบางส่วนจะปรับขนาดได้ แต่คุณสามารถส่งต่อ ACTIVITY\_HEIGHT\_FIXED เพื่อปิดใช้ลักษณะการทำงานนี้ ให้ทำดังนี้

new CustomTabsBuilder().setInitialActivityHeightPx(
    400,
    ACTIVITY_HEIGHT_FIXED
);

การกำหนดค่าแผงด้านข้าง

หากต้องการกำหนดค่าลักษณะการทำงานของแผงด้านข้าง ให้กำหนดความกว้างของการเปิดเริ่มต้นเป็นพิกเซลโดย กำลังโทรหาชั้นเรียนของ CustomTabBuilder setInitialActivityWidthPx()

โดยค่าเริ่มต้น แท็บที่กำหนดเองบางส่วนจะปรับขนาดได้ แต่คุณสามารถส่งต่อ ACTIVITY\_HEIGHT\_FIXED เพื่อปิดใช้ลักษณะการทำงานนี้ ให้ทำดังนี้

  CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder(session)
        .setInitialActivityHeightPx(400)
        .setInitialActivityWidthPx(400);
        .setActivitySideSheetBreakpointDp(800);

แท็บที่กำหนดเองจะทำงานเป็นแผงด้านข้างหากความกว้างของหน้าจอใหญ่กว่า ค่าเบรกพอยท์ที่กำหนดโดย setActivitySideSheetBreakpointDp() หากความกว้างของหน้าจอมากกว่า x แท็บที่กำหนดเองจะทำงานเป็นด้านๆ ชีต มิฉะนั้นจะมีการทำงานเป็น Bottom Sheet หากไม่มีเบรกพอยท์ ตั้งค่าการใช้งานเบราว์เซอร์ควรตั้งเป็นค่าเริ่มต้น 840dp หากตั้งค่า x เป็น <600dp การใช้งานเบราว์เซอร์ควรเป็นค่าเริ่มต้น 600dp

เปิดแท็บที่กำหนดเองบางส่วนด้วยเซสชันที่มีอยู่

CustomTabsSession customTabsSession;

// ...

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
   .setInitialActivityHeightPx(500)
    .setInitialActivityWidthPx(400);
    .setActivitySideSheetBreakpointDp(800);
   .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
   // ...
   .build();

customTabsIntent.launchUrl(context, Uri.parse(url))

เปิดแท็บที่กำหนดเองบางส่วนผ่าน startActivityForResult

private ActivityResultLauncher<String> mCustomTabLauncher = registerForActivityResult(new ActivityResultContract<String, Integer>() {
    @Override
    public Integer parseResult(int statusCode, @Nullable Intent intent) {
        return statusCode;
    }

    @NonNull
    @Override
    public Intent createIntent(@NonNull Context context, String url) {
        CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder(customTabsSession)
                .setInitialActivityHeightPx(500)
                .setInitialActivityWidthPx(400);
                .setActivitySideSheetBreakpointDp(800);
                .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
                .setToolbarCornerRadiusDp(10);
        Intent customTabsIntent = builder.build().intent;
        customTabsIntent.setData(Uri.parse(url));
        return customTabsIntent;
    }
}, new ActivityResultCallback<Integer>() {
    @Override
    public void onActivityResult(Integer statusCode) {
       // ...
    }
});

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    Button selectButton = findViewById(R.id.select_button);
    selectButton.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View view) {
            mCustomTabLauncher.launch(customTabsIntent.intent);
        }
    });
}

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