Avertissement

AppboyKit (également connu sous le nom de SDK Objective-C) n’est plus pris en charge et a été remplacé par Swift SDK. Il ne recevra plus de nouvelles fonctionnalités, de corrections de bugs, de mises à jour de sécurité ou d’assistance technique - cependant, la messagerie et l’analyse continueront à fonctionner normalement. Pour en savoir plus, consultez Présentation du nouveau SDK Braze Swift.

Personnaliser le flux de Content Cards

Vous pouvez créer votre propre interface de Content Cards en étendant ABKContentCardsTableViewController pour personnaliser tous les éléments de l’interface utilisateur et le comportement des Content Cards. Les cellules de carte de contenu peuvent également être sous-classées puis utilisées par programmation ou en introduisant un storyboard personnalisé qui enregistre les nouvelles classes. Consultez l’exemple d’application Content Cards pour un exemple complet.

Il est également important de déterminer si vous devez utiliser une stratégie de sous-classement plutôt qu’un contrôleur de vue entièrement personnalisé et vous abonner aux mises à jour de données. Par exemple, si vous sous-classez le ABKContentCardsTableViewController, vous pouvez utiliser la méthode populateContentCards pour filtrer et ordonner les cartes (recommandé). Cependant, si vous utilisez une personnalisation complète du contrôleur de vue, vous disposez d’un plus grand contrôle sur le comportement de la carte — comme l’affichage dans un carrousel ou l’ajout d’éléments interactifs — mais vous devez ensuite compter sur un observateur pour implémenter la logique de tri et de filtrage. Vous devez également implémenter les méthodes d’analyse respectives pour enregistrer correctement les impressions, les événements de rejet et les clics.

Personnalisation de l’interface utilisateur

Les extraits de code suivants montrent comment styliser et modifier les Content Cards pour répondre à vos besoins d’interface utilisateur à l’aide des méthodes fournies par le SDK. Ces méthodes vous permettent de personnaliser tous les aspects de l’interface utilisateur des Content Cards, y compris les polices personnalisées, les composants de couleur personnalisés, le texte personnalisé, et plus encore.

Il existe deux manières distinctes de personnaliser l’interface utilisateur des Content Cards :

• Méthode dynamique : mettre à jour l’interface utilisateur carte par carte
• Méthode statique : mettre à jour l’interface utilisateur sur toutes les cartes

Interface utilisateur dynamique

La méthode applyCard de la carte de contenu peut référencer l’objet de carte et lui transmettre les paires clé-valeur qui seront utilisées pour mettre à jour l’interface utilisateur :

• 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 utilisateur statique

La méthode setUpUI peut affecter des valeurs aux composants statiques de la carte de contenu sur toutes les cartes :

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

Fournir des interfaces personnalisées

Des interfaces personnalisées peuvent être fournies en enregistrant des classes personnalisées pour chaque type de carte souhaité.

Braze propose trois modèles de Content Cards (bannière, image légendée et classique). Si vous souhaitez fournir vos propres interfaces personnalisées, référez-vous aux extraits de code suivants :

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

Remplacer les Content Cards préremplies

Les Content Cards peuvent être modifiées de façon programmatique à l’aide de la méthode 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
}