Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

Version 1 Next »

목차

개요

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

탭 UI 변경

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

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

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

필터 UI 변경

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

 Objective-C
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];

 Swift
let config = BABFeedConfig(unitId: "YOUR_FEED_UNIT_ID")
config.filterTextDefaultColor = .black
config.filterTextSelectedColor = .white
config.filterBackgroundDefaultColor = .white
config.filterBackgroundSelectedColor = .black

Feed 지면 구분선 UI 변경

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

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

 Objective-C
BABFeedConfig *config = [[BABFeedConfig alloc] initWithUnitId:@"YOUR_FEED_UNIT_ID"];
config.separatorHeight = 1.0f / UIScreen.mainScreen.scale;
config.separatorColor = [UIColor lightGrayColor];
config.separatorHorizontalMargin = 10;

 Swift
let config = BABFeedConfig(unitId: "YOUR_FEED_UNIT_ID")
config.separatorHeight = 1.0 / UIScreen.main.scale
config.separatorColor = .lightGray
config.separatorHorizontalMargin = 10

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

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

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

 Objective-C
@interface CustomErrorView : BABFeedDefaultErrorView
@end

@implementation CustomErrorView

- (UIImage *)errorImage {
    return [UIImage imageWithName:@"Custom Error Image"];
}

- (NSString *)errorTitleText {
    return @"Custom Error Title";
}

- (NSString *)errorDescriptionText {
    return @"Custom Error Description";
}

@end
BABFeedConfig *config = [[BABFeedConfig alloc] initWithUnitId:@"YOUR_FEED_UNIT_ID"];
config.errorViewClass = [CustomErrorView class];

 Swift
class CustomErrorView : BABFeedDefaultErrorView {
    override var errorImage: UIImage {
        get { return UIImage(named: "Custom Error Image") }
        set { self.errorImage = newValue }
    }
    override var errorTitleText: String {
        get { return "Custom Error Title" }
        set { self.errorTitleText = newValue }
    }
    override var errorDescriptionText: String {
        get { return "Custom Error Description" }
        set { self.errorDescriptionText = newValue }
    }
}
let config = BABFeedConfig(unitId: "FEED_UNIT_ID")
config.errorViewClass = CustomErrorView.self

  • No labels