Multitarefas com guias personalizadas parciais

Sebastian Benz

Por padrão, as guias personalizadas são iniciadas como uma atividade de tela cheia. Iniciando no Chrome 107, você pode usar guias personalizadas parciais para especificar uma altura de inicialização diferente em modo retrato para que os usuários possam fazer várias tarefas ao mesmo tempo interagindo com o app enquanto visualizar conteúdo da Web. Os usuários podem expandir a Guia Personalizada para tela cheia arrastando a alça da barra de ferramentas para cima e restaure a altura inicial da inicialização arrastando o alça para baixo.

Guia personalizada parcial em uma página inferior.

Para telas grandes ou dispositivos no modo paisagem, a partir do Chrome 120, você podem especificar, uma largura máxima de inicialização para mostrar uma Guia Personalizada parcial em um lado folha Ao definir um ponto de interrupção, você pode decidir quando lançar uma campanha personalizada Usar a tecla Tab em uma página inferior ou lateral.

Guia personalizada parcial em uma página lateral.

.

Ponto-chave:

• Especificar a altura inicial da atividade não terá efeito se o navegador padrão não oferecer suporte a guias personalizadas parciais. Nesse caso, o extra da intent será ignorado e a Guia personalizada abrangerá toda a altura da tela.
• As propriedades CustomTabColorScheme.navigationBarColor e CustomTabColorScheme.navigationBarDividerColor não funcionam ao criar uma intent para uma guia personalizada parcial. Isso ocorre porque elas herdam o esquema de cores do app host para as propriedades da interface do usuário acima. Você será responsável por garantir a consistência visual dessas propriedades antes de lançar uma Guia Personalizada.

Pré-requisito

Para usar as guias personalizadas parciais, você precisa:

• iniciar uma nova sessão do navegador usando um CustomTabsServiceConnection; e passá-lo para a intent de guias personalizadas ou

• iniciar a atividade da guia Personalizada usando startActivityForResult()

Combine as duas abordagens para uma inicialização rápida caso o serviço ainda não foi estabelecida.

Como configurar a página inferior

Para transformar uma Guia personalizada em uma personalizada parcial, defina a altura inicial da inicialização em pixels chamando o método CustomTabBuilder setInitialActivityHeightPx() . Por padrão, a Guia Personalizada parcial é redimensionável, mas você pode transmitir ACTIVITY\_HEIGHT\_FIXED para desativar esse comportamento:

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

Importante:a altura parcial mínima da guia personalizada é de 50% da altura da tela. Se a altura da tela estiver definida como um valor menor que 50% da altura, o Chrome vai ajustar automaticamente a guia personalizada para 50% da altura.

Como configurar a página lateral

Para configurar o comportamento da página lateral, defina a largura inicial da inicialização em pixels por chamar a classe CustomTabBuilder setInitialActivityWidthPx() .

Por padrão, a Guia Personalizada parcial é redimensionável, mas você pode transmitir ACTIVITY\_HEIGHT\_FIXED para desativar esse comportamento:

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

A guia "Personalizada" se comportará como uma página lateral se a largura da tela for maior que o valor do ponto de interrupção definido setActivitySideSheetBreakpointDp(). Se a largura da tela for maior que x, a guia "Personalizada" se comportará como um lado página. Caso contrário, ele se comportará como uma página inferior. Se nenhum ponto de interrupção for especificado, defina a implementação do navegador como o valor padrão 840dp. Se x for definido como <600dp, a implementação do navegador deverá usar como padrão 600dp

Iniciar uma guia personalizada parcial com uma sessão existente

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

Abrir uma guia personalizada parcial via 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);
        }
    });
}

A seguir: saiba como avaliar o engajamento dos usuários nas guias personalizadas.