Aviso

AppboyKit (também conhecido como o SDK Objective-C) não é mais suportado e foi substituído pelo Swift SDK. Não receberá mais novos recursos, correções de bugs, atualizações de segurança ou suporte técnico—no entanto, o envio de mensagens e a análise de dados continuarão a funcionar normalmente. Para saber mais, veja Apresentando o Novo SDK Braze Swift.

Personalizar o feed de Content Cards

Você pode criar sua própria interface de Content Cards estendendo ABKContentCardsTableViewController para personalizar todos os elementos de UI e o comportamento dos Content Cards. As células dos cartões de conteúdo também podem ser subclassificadas e usadas programaticamente ou por meio de um storyboard personalizado que registra as novas classes. Confira o app de exemplo de Content Cards para um exemplo completo.

Também é importante considerar se você deve usar uma estratégia de subclasse em vez de um view controller completamente personalizado e se inscrever para atualizações de dados. Por exemplo, se você subclassificar o ABKContentCardsTableViewController, pode usar o método populateContentCards para filtrar e ordenar cartões (recomendado). No entanto, se você usar uma personalização completa do view controller, terá mais controle sobre o comportamento do cartão — como exibir em um carrossel ou adicionar elementos interativos — mas precisará 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 corretamente impressões, eventos de descarte e cliques.

Personalizando a UI

Os trechos de código a seguir mostram como estilizar e alterar os Content Cards para atender às suas necessidades de UI usando métodos fornecidos pelo SDK. Esses métodos permitem personalizar todos os aspectos da UI dos Content Cards, incluindo fontes personalizadas, componentes de cores personalizados, texto personalizado e mais.

Existem duas maneiras distintas de personalizar a UI dos Content Cards:

• Método dinâmico: atualizar a UI do cartão individualmente, cartão por cartão
• Método estático: atualizar a UI em todos os cartões

UI dinâmica

O método applyCard do Content Card pode referenciar o objeto do cartão e passar pares chave-valor que serão usados para atualizar a UI:

• 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
  }
}

UI estática

O método setUpUI pode atribuir valores aos componentes estáticos dos Content Cards 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.

A Braze fornece três modelos de Content Cards (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 Content Cards populados

Os Content Cards 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
}