3.3. iOS 2.2.x 디자인 커스터마이징

Owned by George Kim (Unlicensed)
Last updated: Jul 13, 2021
3 min read

목차

개요

본 가이드에서는 BuzzAd iOS SDK에서 제공하는 UI의 구성을 지키며 디자인을 변경하기 위한 방법을 안내합니다. 추가적인 디자인 변경을 원하시는 경우에는 고급 설정에서 UI를 자체 구현하는 방법으로 진행할 수 있습니다.

 

탭 UI 변경

BABFeedConfig를 설정하여 Feed 지면의 탭 UI에서 색상 및 문구를 변경할 수 있습니다. 다음은 탭 UI를 변경하는 예시입니다.

BABFeedConfig *config = [[BABFeedConfig alloc] initWithUnitId:@"YOUR_FEED_UNIT_ID"]; config.tabDefaultColor = [UIColor whiteColor]; config.tabSelectedColor = [UIColor grayColor]; config.tabBackgroundColor = [UIColor blackColor]; config.tabTextArray = @[@"광고 적립", @"쇼핑 적립"]

 

let config = BABFeedConfig(unitId: "YOUR_FEED_UNIT_ID") config.tabDefaultColor = .white config.tabSelectedColor = .gray config.tabBackgroundColor = .black config.tabTextArray = ["광고 적립", "쇼핑 적립"]

 

 

필터 UI 변경

BABFeedConfig를 설정하여 Feed 지면의 필터 UI에서 색상을 변경할 수 있습니다. 다음은 필터 UI를 변경하는 예시입니다.

BABFeedConfig *config = [[BABFeedConfig alloc] initWithUnitId:@"YOUR_FEED_UNIT_ID"]; config.filterTextDefaultColor = [UIColor blackColor]; config.filterTextSelectedColor = [UIColor whiteColor]; config.filterBackgroundDefaultColor = [UIColor whiteColor]; config.filterBackgroundSelectedColor = [UIColor blackColor];

 

 

 

Feed 지면 구분선 UI 변경

Feed 지면에는 광고와 광고를 구분하기 위한 구분선이 있습니다.

BABFeedConfig를 설정하여 Feed 지면의 구분선의 UI를 변경할 수 있습니다. 다음은 광고 구분선 UI를 변경하는 예시입니다.

 

 

Feed 지면 광고 미할당 안내 UI 변경

사용자가 Feed 지면에 진입한 시점에 노출할 광고가 없다면 미할당 안내 UI가 노출됩니다. BuzzAd iOS SDK에서 제공하는 UI의 이미지 혹은 문구만을 변경하여 사용자 경험을 높일 수 있습니다.

BABFeedDefaultErrorView의 구현 클래스를 구현하여 이미지 및 문구를 변경할 수 있습니다. 다음은 이미지 혹은 문구를 변경하는 예시입니다.