Text Outside Circle Button (Swift)

Add text outside circle buttons with a text outside and an image inside for each to BMB.

Swift | Objective-C

Create BMB

As mentioned in Basic Usage, BMB must know the kind of boom-buttons and how it should place the boom-buttons on itself and screen.

bmb.buttonEnum = .textOutsideCircle
bmb.piecePlaceEnum = .dot_3_1
bmb.buttonPlaceEnum = .sc_3_1

For more information and pictures about piece-place-enum and button-place-enum, check the lists below.

Add Builders

The builder of text outside circle button has lots of methods to customize the boom-buttons. Needn't to set every attributes for boom-buttons, just customize what you want. For example:

for _ in 0..<bmb.piecePlaceEnum.pieceNumber() {
    let builder = TextOutsideCircleButtonBuilder.init()
    builder.normalImageName = "butterfly"
    builder.normalText = "Text Outside"
    bmb.addBuilder(builder)
}

In the above loop, the value of bmb.piecePlaceEnum.pieceNumber() is 3, because the piecePlaceEnum is set to .dot_3_1. So we provide 3 builders for the 3 boom-buttons, with the same image butterfly and same text Text Outside.

If you wanna customize more properties for boom-buttons:

for _ in 0..<bmb.piecePlaceEnum.pieceNumber() {
    let builder = TextOutsideCircleButtonBuilder.init()
    
    // Event closure when the boom-button corresponding the builder itself is clicked.
    builder.clickedClosure = { (index: Int) -> Void in
        // the boom-button is clicked
    }
    
    // Whether the boom-button is unable (for click event). The default value is false.
    builder.unable = false
    
    // Whether the image in boom-button plays a rotation animation.
    builder.rotateImage = false

    // Whether the text plays rotation animation when booming and rebooming.
    builder.rotateText = false

Piece

    // The color of the corresponding piece. 
    // If the color of piece is nil (by default), then BMB will use the color of boom-button 
    // at normal state (if the boom-buttons is unable, then use color at unable state) to draw the piece. 
    // If the color of piece is different from boom-button's, then BMB will play a discoloration 
    // animation when booming or rebooming.
    builder.pieceColor = UIColor.white

Shadow

    // Whether the boom-button has a shadow effect.
    builder.hasShadow = true
    
    // The rect of shadow path of boom-button.
    builder.shadowPathRect = CGRect.init(x: 2, y: 2, width: 76, height: 76)
    
    // The offset (in points) of shadow in x axis.
    builder.shadowOffsetX = 0
    
    // The offset (in points) of shadow in y axis.
    builder.shadowOffsetY = 8
    
    // The blur radius (in points) used to render the boom-button's shadow.
    builder.shadowRadius = 4
    
    // The color of the boom-button's shadow.
    builder.shadowColor = UIColor.darkGray

Image

    // The name of the image on the boom-button at normal state.
    builder.normalImageName = "butterfly"
    
    // The image on the boom-button at normal state.
    builder.normalImage = UIImage.init(named: "butterfly")
    
    // The name of the image on the boom-button at highlighted state.
    builder.highlightedImageName = "bear"
    
    // The image on the boom-button at highlighted state.
    builder.highlightedImage = UIImage.init(named: "bear")
    
    // The name of the image on the boom-button at unable state.
    builder.unableImageName = "bat"
    
    // The image on the boom-button at unable state.
    builder.unableImage = UIImage.init(named: "bat")
    
    // The tint color of image on boom-button at normal state.
    builder.normalImageTintColor = UIColor.red
    
    // The tint color of image on boom-button at highlighted state.
    builder.highlightedImageTintColor = UIColor.yellow
    
    // The tint color of image on boom-button at unable state.
    builder.unableImageTintColor = UIColor.blue
    
    // The frame of the image view on boom-button.
    builder.imageFrame = CGRect.init(x: 10, y: 10, width: 60, height: 60)
    
    // The image size of the image view on boom-button.
    builder.imageSize = CGSize.init(width: 60, height: 60)

Text

    // The text on boom-button at normal state.
    builder.normalText = "Text Inside"
    
    // The text on boom-button at highlighted state.
    builder.highlightedText = "Highlighted Text"

    // The text on boom-button at unable state.
    builder.unableText = "Unable"

    // The attributed text on boom-button at normal state.
    builder.normalAttributedText = NSAttributedString.init(string: "Text")

    // The attributed text on boom-button at highlighted state.
    builder.highlightedAttributedText = NSAttributedString.init(string: "Text")

    // The attributed text on boom-button at unable state.
    builder.unableAttributedText = NSAttributedString.init(string: "Text")

    // The color of text on boom-button at normal state.
    builder.normalTextColor = UIColor.white

    // The color of text on boom-button at highlighted state.
    builder.highlightedTextColor = UIColor.yellow

    // The color of text on boom-button at unable state.
    builder.unableTextColor = UIColor.darkGray

    // The frame of text on boom-button.
    builder.textFrame = CGRect.init(x: 15, y: 52, width: 50, height: 20)

    // The font of text on boom-button.
    builder.textFont = UIFont.systemFont(ofSize: 10)

    // The alignment of text on boom-button.
    builder.textAlignment = NSTextAlignment.center

    // The line break mode of text on boom-button.
    builder.textLineBreakMode = NSLineBreakMode.byCharWrapping

    // The maximum number of lines to use for text on boom-button.
    builder.textLines = 2

    // The color of shadow for text on boom-button.
    builder.textShadowColor = UIColor.darkGray

    // The shadow offset (in points) on x axis for text on boom-button.
    builder.textShadowOffsetX = 2

    // The shadow offset (in points) on y axis for text on boom-button.
    builder.textShadowOffsetY = 2

Button

    // The color of boom-button at normal state.
    builder.normalColor = UIColor.white
    
    // The color of boom-button at highlighted state.
    builder.highlightedColor = UIColor.green
    
    // The color of boom-button at unable state.
    builder.unableColor = UIColor.black
    
    // The corner radius (in points) of boom-button.
    builder.cornerRadius = 5
    
    // Width (in points) of the boom-button (including the text label).
    builder.width = 80

    // Height (in points) of the boom-button (including the text label).
    builder.height = 96
    
    // Whether the boom-button is in a circular shape. If not, then the text-inside-circle-button 
    // looks like a text-inside-square-button. Only after the 'round' property is false does 
    // the corner-radius property work.
    builder.round = true
    
    bmb.addBuilder(builder)
}

Piece Place Enum for Text Outside Circle Button

All piece-place-enum and button-place-enum can be found in demo.

1. PiecePlaceEnum.dot_1
   
2. PiecePlaceEnum.dot_2_m
   
3. PiecePlaceEnum.dot_3_m
   
4. PiecePlaceEnum.dot_4_m
   
5. PiecePlaceEnum.dot_5_m
   
6. PiecePlaceEnum.dot_6_m
   
7. PiecePlaceEnum.dot_7_m
   
8. PiecePlaceEnum.dot_8_m
   
9. PiecePlaceEnum.dot_9_m
   
10. PiecePlaceEnum.share
PiecePlaceEnum.share places the pieces as a share-style on BMB. Check the demo and wiki for more information.
11. PiecePlaceEnum.custom
PiecePlaceEnum.custom enables developers to customize the number and the positions of boom-buttons. Check the demo and wiki for more information.

Button Place Enum for Text Outside Circle Button

All piece-place-enum and button-place-enum can be found in demo.

1. ButtonPlaceEnum.sc_1
   
2. ButtonPlaceEnum.sc_2_m
   
3. ButtonPlaceEnum.sc_3_m
   
4. ButtonPlaceEnum.sc_4_m
   
5. ButtonPlaceEnum.sc_5_m
   
6. ButtonPlaceEnum.sc_6_m
   
7. ButtonPlaceEnum.sc_7_m
   
8. ButtonPlaceEnum.sc_8_m
   
9. ButtonPlaceEnum.sc_9_m
   
10. ButtonPlaceEnum.horizontal
ButtonPlaceEnum.horizontal place all the boom-buttons in a horizontal line.
    
11. ButtonPlaceEnum.vertical
ButtonPlaceEnum.vertical place all the boom-buttons in a vertical line.
    
12. ButtonPlaceEnum.custom
ButtonPlaceEnum.custom enables developers to customize the number and the positions of boom-buttons. Check the demo and wiki for more information.