Skip to content

Text Outside Circle Button (Objective C)

Jump to bottom
Weiping Huang edited this page May 13, 2017 · 3 revisions

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 = VHButtonTextOutsideCircle;
bmb.piecePlaceEnum = VHPiecePlaceDOT_3_1;
bmb.buttonPlaceEnum = VHButtonPlaceSC_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 (int i = 0; i < bmb.pieceNumber; i++)
{
    VHTextOutsideCircleButtonBuilder *builder = [VHTextOutsideCircleButtonBuilder builder];
    builder.normalImageName = @"butterfly";
    builder.normalText = @"Text Outside";
    [self.bmb addBuilder:builder];
}

In the above loop, the value of bmb.pieceNumber is 3, because the piecePlaceEnum is set to VHPiecePlaceDOT_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 (int i = 0; i < self.bmb.pieceNumber; i++)
{
    VHTextOutsideCircleButtonBuilder *builder = [VHTextOutsideCircleButtonBuilder builder];
    
    // Event block when the boom-button corresponding the builder itself is clicked.
    builder.clickedBlock = ^(int index) {
        // the boom-button is clicked
    };
    
    // Whether the boom-button is unable (for click event).
    builder.unable = NO;
    
    // Whether the image in boom-button plays a rotation animation.
    builder.rotateImage = YES;

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

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.whiteColor;

Shadow

    // Whether the boom-button has a shadow effect.
    builder.hasShadow = YES;
    
    // The rect of shadow path of boom-button.
    builder.shadowPathRect = CGRectMake(2, 2, 76, 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.darkGrayColor;

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 imageNamed:@"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 imageNamed:@"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 imageNamed:@"bat"];
    
    // The tint color of image on boom-button at normal state.
    builder.normalImageTintColor = UIColor.redColor;
    
    // The tint color of image on boom-button at highlighted state.
    builder.highlightedImageTintColor = UIColor.yellowColor;
    
    // The tint color of image on boom-button at unable state.
    builder.unableImageTintColor = UIColor.blueColor;
    
    // The frame of the image view on boom-button.
    builder.imageFrame = CGRectMake(10, 10, 60, 60);
    
    // The image size of the image view on boom-button.
    builder.imageSize = CGSizeMake(60, 60);

Text

    // The text on boom-button at normal state.
    builder.normalText = @"Text Outside";
        
    // 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 alloc] initWithString:@"Text"];
        
    // The attributed text on boom-button at highlighted state.
    builder.highlightedAttributedText = [[NSAttributedString alloc] initWithString:@"Text"];
        
    // The attributed text on boom-button at unable state.
    builder.unableAttributedText = [[NSAttributedString alloc] initWithString:@"Text"];
        
    // The color of text on boom-button at normal state.
    builder.normalTextColor = [UIColor whiteColor];
        
    // The color of text on boom-button at highlighted state.
    builder.highlightedTextColor = [UIColor yellowColor];
        
    // The color of text on boom-button at unable state.
    builder.unableTextColor = [UIColor darkGrayColor];
        
    // The frame of text on boom-button.
    builder.textFrame = CGRectMake(15, 52, 50, 20);
        
    // The font of text on boom-button.
    builder.textFont = [UIFont systemFontOfSize:10];
        
    // The alignment of text on boom-button.
    builder.textAlignment = NSTextAlignmentCenter;
        
    // The line break mode of text on boom-button.
    builder.textLineBreakMode = NSLineBreakByCharWrapping;
        
    // 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 darkGrayColor];
        
    // 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.whiteColor;
    
    // The color of boom-button at highlighted state.
    builder.highlightedColor = UIColor.greenColor;
    
    // The color of boom-button at unable state.
    builder.unableColor = UIColor.blackColor;
    
    // 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 simple-circle-button
    // looks like a simple-square-button. Only after the 'round' property is false does
    // the corner-radius property work.
    builder.round = YES;
    
    [self.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. VHPiecePlaceDOT_1
  2. VHPiecePlaceDOT_2_M
  3. VHPiecePlaceDOT_3_M
  4. VHPiecePlaceDOT_4_M
  5. VHPiecePlaceDOT_5_M
  6. VHPiecePlaceDOT_6_M
  7. VHPiecePlaceDOT_7_M
  8. VHPiecePlaceDOT_8_M
  9. VHPiecePlaceDOT_9_M
  10. VHPiecePlaceShare
    VHPiecePlaceShare places the pieces as a share-style on BMB. Check the demo and wiki for more information.
  11. VHPiecePlaceCustom
    VHPiecePlaceCustom 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. VHButtonPlaceSC_1
  2. VHButtonPlaceSC_2_M
  3. VHButtonPlaceSC_3_M
  4. VHButtonPlaceSC_4_M
  5. VHButtonPlaceSC_5_M
  6. VHButtonPlaceSC_6_M
  7. VHButtonPlaceSC_7_M
  8. VHButtonPlaceSC_8_M
  9. VHButtonPlaceSC_9_M
  10. VHButtonPlaceHorizontal
    VHButtonPlaceHorizontal place all the boom-buttons in a horizontal line.
  11. VHButtonPlaceVertical
    VHButtonPlaceVertical place all the boom-buttons in a vertical line.
  12. VHButtonPlaceCustom
    VHButtonPlaceCustom enables developers to customize the number and the positions of boom-buttons. Check the demo and wiki for more information.

Developer Cocoapods Lisense

Home
Chapters

  1. Basic Usage
  2. Simple Circle Button
  3. Text Inside Circle Button
  4. Text Outside Circle Button
  5. Ham Button
  6. Share Style
  7. Custom Position
  8. Button Place Alignments
  9. Different Ways to Boom
  10. Ease Animations for Buttons
  11. Different Order for Buttons
  12. Other Animations Attributes for Buttons
  13. Click Event and Listener
  14. Control BMB
  15. Use BMB in Navigation Bar
  16. Use BMB in Table View
  17. Attributes for BMB or Pieces on BMB
  18. Cache Optimization & Boom Area
  19. Change Boom Buttons Dynamically
  20. Blur Background & Tip
  21. Fade Views
  22. Structure of BMB
  23. Version History
Clone this wiki locally