Personalizar o feed dos Cartões de Conteúdo

Você pode criar sua própria interface de Cartões de Conteúdo estendendo ABKContentCardsTableViewController para personalizar todos os elementos da interface do usuário e o comportamento dos Cartões de Conteúdo. As células do cartão de conteúdo também podem ser subclassificadas e, em seguida, usadas programaticamente ou introduzindo um storyboard personalizado que registra as novas classes. Confira o app de exemplo de Cartões de Conteúdo para um exemplo completo.

Também é importante considerar se você deve usar uma estratégia de subclasse versus um controlador de visualização completamente personalizado e inscrever-se para atualizações de dados. Por exemplo, se você criar uma subclasse do ABKContentCardsTableViewController, pode usar o método populateContentCards para filtrar e ordenar cartões (recomendado). No entanto, se você usar uma personalização completa do controlador de visualização, terá mais controle sobre o comportamento do cartão—como exibir em um carrossel ou adicionar elementos interativos—mas, então, terá que contar com um observador para implementar a lógica de ordenação e filtragem. Você também deve implementar os respectivos métodos de análise de dados para registrar adequadamente as impressões, eventos de rejeição e cliques.

Personalizando a IU

Os trechos de código a seguir mostram como estilizar e alterar os Cartões de Conteúdo para atender às suas necessidades de interface do usuário usando métodos fornecidos pelo SDK. Esses métodos permitem que você personalize todos os aspectos da UI do cartão de conteúdo, incluindo fontes personalizadas, componentes de cores personalizadas, texto personalizado e mais.

Existem duas maneiras distintas de personalizar a interface do usuário do cartão de conteúdo:

• Método dinâmico: atualizar a interface do usuário do cartão em uma base por cartão
• Método estático: atualizar a interface do usuário em todos os cartões

Interface dinâmica

O método cartão de conteúdo applyCard pode referenciar o objeto cartão e passar pares chave-valor que serão usados para atualizar a interface do usuário:

• objective-c
• swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
- (void)applyCard:(ABKCaptionedImageContentCard *)captionedImageCard {
  [super applyCard:captionedImageCard];    
 
  if ([card.extras objectForKey:ContentCardKeyBackgroundColorValue]) {
    NSString *backgroundColor = [card.extras objectForKey:ContentCardKeyBackgroundColor];
    if ([backgroundColor colorValue]) {
      self.rootView.backgroundColor = [backgroundColor colorValue];
    } else {
      self.rootView.backgroundColor = [UIColor lightGray];
    }
  } else {
    self.rootView.backgroundColor = [UIColor lightGray];
  }  
}

1
2
3
4
5
6
7
8
9
10
override func apply(_ captionedImageCard: ABKCaptionedImageContentCard!) {
  super.apply(captionedImageCard)         
 
  if let backgroundColor = card.extras?[ContentCardKey.backgroundColor.rawValue] as? String,
     let backgroundColorValue = backgroundColor.colorValue() {
    rootView.backgroundColor = backgroundColorValue
  } else {
    rootView.backgroundColor = .lightGray
  }
}

Interface de Usuário Estática

O método setUpUI pode atribuir valores aos componentes estáticos do cartão de conteúdo em todos os cartões:

• objective-c
• swift

1
2
3
4
5
6
7
8
9
10
11
#import "CustomClassicContentCardCell.h"  
 
@implementation CustomClassicContentCardCell
 
- (void)setUpUI {
  [super setUpUI];
  self.rootView.backgroundColor = [UIColor lightGrayColor];
  self.rootView.layer.borderColor = [UIColor purpleColor].CGColor;
  self.unviewedLineView.backgroundColor = [UIColor redColor];
  self.titleLabel.font = [UIFont italicSystemFontOfSize:20];
}

1
2
3
4
5
6
7
8
override func setUpUI() {
  super.setUpUI()
     
  rootView.backgroundColor = .lightGray
  rootView.layer.borderColor = UIColor.purple.cgColor
  unviewedLineViewColor = .red
  titleLabel.font = .italicSystemFont(ofSize: 20)
}

Fornecendo interfaces personalizadas

Interfaces personalizadas podem ser fornecidas registrando classes personalizadas para cada tipo de cartão desejado.

Braze fornece três modelos de cartão de conteúdo (banner, imagem legendada e clássico). Como alternativa, se você quiser fornecer suas próprias interfaces personalizadas, consulte os seguintes trechos de código:

• objective-c
• swift

1
2
3
4
5
6
7
- (void)registerTableViewCellClasses {
  [super registerTableViewCellClasses];
 
  // Replace the default class registrations with custom classes for these two types of cards
  [self.tableView registerClass:[CustomCaptionedImageContentCardCell class] forCellReuseIdentifier:@"ABKCaptionedImageContentCardCell"];
  [self.tableView registerClass:[CustomClassicContentCardCell class] forCellReuseIdentifier:@"ABKClassicCardCell"];
}

1
2
3
4
5
6
7
8
9
override func registerTableViewCellClasses() {
  super.registerTableViewCellClasses()
     
  // Replace the default class registrations with custom classes
  tableView.register(CustomCaptionedImageContentCardCell.self, forCellReuseIdentifier: "ABKCaptionedImageContentCardCell")
  tableView.register(CustomBannerContentCardCell.self, forCellReuseIdentifier: "ABKBannerContentCardCell")
  tableView.register(CustomClassicImageContentCardCell.self, forCellReuseIdentifier: "ABKClassicImageCardCell")
  tableView.register(CustomClassicContentCardCell.self, forCellReuseIdentifier: "ABKClassicCardCell")
}

Substituindo Cartões de Conteúdo Populados

Os Cartões de Conteúdo podem ser alterados programaticamente usando o método populateContentCards:

• objective-c
• swift

1
2
3
4
5
6
7
8
9
10
- (void)populateContentCards {
  NSMutableArray<ABKContentCard *> *cards = [NSMutableArray arrayWithArray:[Appboy.sharedInstance.contentCardsController getContentCards]];
  for (ABKContentCard *card in cards) {
    // Replaces the card description for all Classic Content Cards
    if ([card isKindOfClass:[ABKClassicContentCard class]]) {
      ((ABKClassicContentCard *)card).cardDescription = @"Custom Feed Override title [classic cards only]!";
    }
  }
  super.cards = cards;
}

1
2
3
4
5
6
7
8
9
10
override func populateContentCards() {
  guard let cards = Appboy.sharedInstance()?.contentCardsController.contentCards else { return }
  for card in cards {
    // Replaces the card description for all Classic Content Cards
    if let classicCard = card as? ABKClassicContentCard {
      classicCard.cardDescription = "Custom Feed Override title [classic cards only]!"
    }
  }
  super.cards = (cards as NSArray).mutableCopy() as? NSMutableArray
}