Skip to content

Personalização do estilo dos cartões de conteúdo

Os Cartões de Conteúdo da Braze vêm com uma aparência padrão. Este artigo cobre opções de estilo para seus Cartões de Conteúdo para ajudá-lo a corresponder à identidade da sua marca. Para obter a lista completa dos tipos de cartões de conteúdo, consulte Sobre cartões de conteúdo.

Criação de um estilo personalizado

A interface padrão dos Cartões de Conteúdo é importada da camada de interface do SDK da Braze. A partir daí, você pode ajustar certas partes do estilo do cartão, a ordem em que os cartões são exibidos e como o feed é mostrado aos seus usuários.

Dois cartões de conteúdo, um com a fonte padrão e os cantos quadrados e outro com os cantos arredondados e uma fonte encaracolada

Por padrão, os Cartões de Conteúdo do SDK do Android e do FireOS correspondem às diretrizes padrão da interface do usuário do Android para proporcionar uma experiência perfeita. Você pode ver esses estilos padrão no arquivo res/values/styles.xml na distribuição do SDK Braze:

Para personalizar o estilo do seu cartão de conteúdo, substitua este estilo padrão. Para substituir um estilo, copie-o na sua totalidade para o arquivo styles.xml no seu projeto e faça modificações. Todo o estilo deve ser copiado para o seu arquivo styles.xml local para que todos os atributos sejam configurados corretamente.

Por padrão, os Cartões de Conteúdo do SDK do Android e do FireOS correspondem às diretrizes padrão da interface do usuário do Android para proporcionar uma experiência perfeita.

Você pode aplicar estilo de duas maneiras. O primeiro é passar um ContentCardListStyling e ContentCardStyling para ContentCardsList(), como no exemplo a seguir:

O segundo é usar BrazeStyle para criar um estilo global para os componentes Braze, como no exemplo a seguir:

O controlador de visualização de Cartões de Conteúdo permite que você personalize a aparência e o comportamento de todas as células através da BrazeContentCardUI.ViewController.Attributes estrutura. Configurar cartões de conteúdo usando Attributes é uma opção fácil, permitindo que você lance sua interface de cartões de conteúdo com configuração mínima.

Modificando Attributes.default

Personalize a aparência e a sensação de todas as instâncias do controlador de visualização da interface do usuário do cartão de conteúdo da Braze modificando diretamente a variável estática Attributes.defaults .

Por exemplo, para alterar o tamanho padrão da imagem e o raio do canto para todas as células:

Inicializando o controlador de visualização com Atributos

Se você deseja modificar apenas uma instância específica do controlador de visualização da interface do cartão de conteúdo da Braze, use o init(braze:attributes:) inicializador para passar uma Attributes struct personalizada para o controlador de visualização.

Por exemplo, você pode alterar o tamanho da imagem e o raio do canto para uma instância específica do controlador de visualização:

Personalizando células por subclasse

Como alternativa, você pode criar interfaces personalizadas registrando classes personalizadas para cada tipo de cartão desejado. Para usar sua subclasse em vez da célula padrão, modifique a propriedade cells na estrutura Attributes. Por exemplo:

Modificando cartões de conteúdo programaticamente

Os cartões de conteúdo podem ser alterados programaticamente atribuindo o fechamento transform na sua estrutura Attributes. O exemplo abaixo modifica o title e o description de cartões compatíveis:

Confira o app de exemplo Exemplos para um exemplo completo.

Personalizar cartões de conteúdo por meio de Attributes não é compatível com Objective-C.

Os estilos padrão do Braze são definidos em CSS dentro do SDK do Braze. Substituindo estilos selecionados em seu aplicativo, é possível personalizar nosso feed padrão com suas próprias imagens de fundo, famílias de fontes, estilos, tamanhos, animações e muito mais. O seguinte é um exemplo de substituição que fará com que os cartões de conteúdo apareçam com 800 px de largura:

Exemplos de personalização

Fonte personalizada

Personalizar a fonte usada em seus Cartões de Conteúdo permite que você mantenha sua identidade de marca e crie uma experiência visualmente atraente para seus usuários. Use estas receitas para definir a fonte de todos os Cartões de Conteúdo programaticamente.

Para alterar a fonte padrão programaticamente, defina um estilo para os cartões e use o atributo fontFamily para instruir a Braze a usar sua família de fontes personalizada.

Por exemplo, para atualizar a fonte em todos os títulos para cartões de imagem legendados, substitua o estilo Braze.ContentCards.CaptionedImage.Title e faça referência à sua família de fontes personalizada. O valor do atributo deve apontar para uma família de fontes no seu diretório res/font.

Aqui está um exemplo truncado com uma família de fontes personalizadas, my_custom_font_family, referenciada na última linha:

Para saber mais sobre a personalização de fontes no SDK do Android, consulte o guia de famílias de fontes.

Para alterar a fonte padrão dd forma programática, você pode definir o titleTextStyle do ContentCardStyling.

Você também pode definir titleTextStyle para um tipo específico de cartão configurando-o em BrazeShortNewsContentCardStyling e passando-o para o shortNewsContentCardStyle de ContentCardStyling.

Personalize suas fontes personalizando a Attributes da propriedade de instância cellAttributes . Por exemplo:

A personalização de fontes via Attributes não é compatível com Objective-C.

Confira o app de exemplo de Exemplos para um exemplo de como criar sua própria interface com fontes personalizadas.

Assim como qualquer outro elemento da web, você pode personalizar facilmente a aparência dos cartões de conteúdo através do CSS. No seu arquivo CSS ou estilos embutidos, use a propriedade font-family e especifique o nome da fonte desejada ou a pilha de fontes.

Ícones fixados personalizados

Ao criar um cartão de conteúdo, os profissionais de marketing têm a opção de fixar o cartão. Um cartão fixado será exibido no topo do feed do usuário e não poderá ser descartado pelo usuário. À medida que você personaliza os estilos do seu cartão, você tem a capacidade de alterar a aparência do ícone fixado.

Lado a lado da prévia do cartão de conteúdo no Braze para celular e Web com a opção "Fixar este cartão na parte superior do feed" selecionada.

Para definir um ícone fixado personalizado, substitua o estilo Braze.ContentCards.PinnedIcon. Seu ativo de imagem personalizado deve ser declarado no elemento android:src. Por exemplo:

Para alterar o ícone fixado padrão, você pode definir o pinnedResourceId do ContentCardStyling. Por exemplo:

Você também pode especificar um Composable em pinnedComposable de ContentCardStyling. Se pinnedComposable for especificado, ele substituirá o valor pinnedResourceId.

Personalize o ícone do alfinete modificando as propriedades pinIndicatorColor e pinIndicatorImage da propriedade de instância cellAttributes . Por exemplo:

Você também pode usar a subclasse para criar sua própria versão personalizada de BrazeContentCardUI.Cell, que inclui o indicador de pino. Por exemplo:

A personalização do indicador de pin via Attributes não é compatível com Objective-C.

A estrutura do ícone fixado do cartão de conteúdo é:

Se você quiser usar um ícone diferente do FontAwesome, basta substituir o nome da classe do elemento i pelo nome da classe do ícone desejado.

Se você quiser trocar o ícone completamente, remova o elemento i e adicione o ícone personalizado como um filho de ab-pinned-indicator. Existem algumas formas diferentes de fazer isso, mas um método simples seria replaceChildren() no elemento ab-pinned-indicator.

Por exemplo:

Alterando a cor do indicador de não lido

Os Cartões de Conteúdo contêm uma linha azul na parte inferior do cartão que indica se o cartão foi visualizado ou não.

Dois cartões de conteúdo exibidos lado a lado. O primeiro cartão tem uma LINE azul na parte inferior, indicando que não foi visto. O segundo cartão não tem uma linha azul, o que indica que ele já foi visto.

Altere a cor da barra indicadora de não lida alterando o valor em com_braze_content_cards_unread_bar_color no seu arquivo colors.xml:

Para alterar a cor da barra indicadora de não lida, modifique o valor de unreadIndicatorColor em ContentCardStyling:

Altere a cor da barra indicadora de não lidos atribuindo um valor à cor de tonalidade da sua BrazeContentCardUI.ViewController instância:

No entanto, se você deseja modificar apenas o indicador não visualizado, pode acessar a propriedade unviewedIndicatorColor da sua estrutura BrazeContentCardUI.ViewController.Attributes. Se você usar implementações da Braze UITableViewCell, deve acessar a propriedade antes que a célula seja desenhada.

Por exemplo, para definir a cor do indicador não visualizado para vermelho:

Confira o app de exemplo Exemplos para um exemplo completo.

Altere a cor da barra indicadora de não lida atribuindo um valor à cor de tonalidade do seu BRZContentCardUIViewController:

A personalização apenas do indicador não visualizado via Attributes não é compatível com Objective-C.

Para alterar a cor do indicador de não lido de um cartão, adicione CSS personalizado à sua página da web. Por exemplo, para definir a cor do indicador não visualizado para verde:

Desativando indicador de não lido

Oculte a barra de indicador não lido configurando setUnreadBarVisible em ContentCardViewHolder para false.

Desativar o indicador de não lido não é suportado no Jetpack Compose.

Oculte a barra de indicador não lido definindo a propriedade attributes.cellAttributes.unviewedIndicatorColor em sua estrutura Attributes para .clear.

A personalização apenas do indicador não visualizado via Attributes não é compatível com Objective-C.

Oculte a barra indicadora de não lida adicionando o seguinte estilo ao seu css:

QUÃO ÚTIL FOI ESTA PÁGINA?
New Stuff!