Personnaliser le flux des cartes de contenu

Vous pouvez créer votre propre interface de cartes de contenu en étendant le ABKContentCardsTableViewController pour personnaliser tous les éléments de l’interface utilisateur et le comportement des cartes de contenu. Les cellules de la 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 Cartes de contenu 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 commander des cartes (recommandé). Cependant, si vous utilisez une personnalisation complète du contrôleur de visualisation, 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 cartes de contenu 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 de la carte de contenu, y compris les polices personnalisées, les composants de couleur personnalisés, le texte personnalisé, etc.

Il existe deux manières distinctes de personnaliser l’interface utilisateur de la carte de contenu :

• 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’IU :

• 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 tous les types de cartes souhaités.

Braze propose trois types de modèles de cartes de contenu : (bannière, image légendée et classique). Sinon, 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 des cartes de contenu remplies

Les cartes de contenu 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
}