Multitarefas com guias personalizadas parciais

Sebastian Benz

Por padrão, guias personalizadas são iniciadas como uma atividade em tela cheia. A partir do Chrome 107, é possível usar guias personalizadas parciais para especificar uma altura de inicialização diferente no modo retrato para que os usuários possam realizar várias tarefas interagindo com o app enquanto visualizam 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 restaurar a altura inicial da inicialização arrastando a 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, é possível especificar uma largura máxima de inicialização para mostrar uma guia personalizada parcial em uma página lateral. Ao definir um ponto de interrupção, você pode decidir quando iniciar uma guia personalizada parcial em uma página inferior ou lateral.

Guia personalizada parcial em uma página lateral.

Ponto principal:

• Especificar a altura da atividade inicial não terá efeito se o navegador padrão não for compatível com 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 iniciar uma Guia Personalizada.

Pré-requisitos

Para usar Guias personalizadas parciais, você precisa:

• Inicie uma nova sessão do navegador usando um CustomTabsServiceConnection e transmita-o para a intent de guias personalizadas ou

• inicie a atividade da guia personalizada usando startActivityForResult().

Combine as duas abordagens se você quiser uma inicialização rápida caso a conexão de serviço ainda não tenha sido estabelecida.

Configurando a página inferior

Para transformar uma guia personalizada em parte personalizada, defina a altura inicial de inicialização em pixels chamando o método setInitialActivityHeightPx() da classe CustomTabBuilder. 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 mínima parcial da guia personalizada é 50% da altura da tela. Se a altura da tela estiver definida como um valor menor que 50%, o Chrome vai ajustar automaticamente a guia "Personalizada" para 50% da altura da tela.

Configurar a página lateral

Para configurar o comportamento da página lateral, defina a largura de inicialização inicial em pixels chamando o método setInitialActivityWidthPx() da classe CustomTabBuilder.

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 vai se comportar como uma página lateral se a largura da tela for maior que o valor do ponto de interrupção definido por setActivitySideSheetBreakpointDp(). Se a largura da tela for maior que x, a guia personalizada vai se comportar como uma página secundária. Caso contrário, ela vai 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 vai precisar padronizar como 600dp.

Iniciar uma guia personalizada parcial com uma sessão atual

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

Iniciar 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 do usuário nas suas guias personalizadas.