#Guide
###Usage
- Basic Usage
- Boom Buttons
- Button Place Alignments
- Boom Types
- Ease Types
- Frames, Duration and Delay
- Background Dim
- Auto Hide
- Cancelable
- NoBackground
- Draggable
- Rotate Degree
- Shadow and Background Color
- Dimensions
- Boom or Reboom It Programmatically
- Delegate
#Pod 把BMB加入你的项目中:
- 通过Pod:
pod "VHBoomMenuButton", "~> 1.0.2"
- 或者直接复制源代码到项目中
#Note
- BMB其实早在Android平台上开源。
- 我刚学iOS,如果哪些地方写得不好,可以直接在issue或者e-mail中告诉我(Nightonke@outlook.com)。
- BMB架构:
BMB主要分为一个主体和三个子模块。主体负责BMB按钮的基本UI和调度三个子模块,三个子模块分别负责在BMB上的pieces、动画、在屏幕上的按钮。如果你想fork我的库并添加自己的按钮,比如说按钮A,你需要:- 写一个ABuilder继承自VHBoomButtonBuilder
- 写一个AButton继承自VHBoomButton
- 写一个对应AButton的APiece继承自VHBoomPiece
- 添加自己的piece-place(Piece在BMB上的放置逻辑)和自己的button-place(按钮在屏幕上的放置逻辑),你应该想BMB中已有的代码一样,放在VHPiecePlaceManager 和 VHButtonPlaceManager 中。
#Usage ##Basic Usage 下面一个非常简单的例子,如何构建拥有三个圆形按钮的BMB:
//
// ViewController.m
// VHBoomMenuButtonTest
//
// Created by 黄伟平 on 16/8/7.
// Copyright © 2016年 黄伟平. All rights reserved.
//
#import "ViewController.h"
#import "VHBoomMenuButton.h"
#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16)) / 255.0 green:((float)((rgbValue & 0xFF00) >> 8)) / 255.0 blue:((float)(rgbValue & 0xFF)) / 255.0 alpha:1.0]
@interface ViewController ()
@end
@implementation ViewController
- (void)loadView
{
CGRect screenFrame = [[UIScreen mainScreen] bounds];
self.view = [[UIView alloc] initWithFrame:screenFrame];
self.view.backgroundColor = [UIColor whiteColor];
self.view.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
// 1. 把BMB放在你想放的地方
CGFloat bmbRadius = 60;
VHBoomMenuButton *bmb = [[VHBoomMenuButton alloc] initWithFrame:CGRectMake(screenFrame.size.width - 20 - bmbRadius,
screenFrame.size.height - 20 - bmbRadius,
bmbRadius,
bmbRadius)];
// 2. 选择你想要的按钮类型
bmb.buttonEnum = VHButtonSimpleCircle;
// 3. 在爆炸之前,告诉BMB你想怎么放在它身上
bmb.piecePlaceEnum = VHPiecePlace_DOT_3_1;
// 4. 在爆炸之后,告诉BMB你想怎么放在屏幕上
bmb.buttonPlaceEnum = VHButtonPlace_SC_3_3;
// 5. 添加按钮
[bmb addSimpleCircleButtonBuilderBlock:^(VHSimpleCircleButtonBuilder *builder) {
builder.imageNormal = @"bat";
builder.buttonNormalColor = UIColorFromRGB(0xD32F2F);
builder.buttonPressedColor = UIColorFromRGB(0xF44336);
}];
[bmb addSimpleCircleButtonBuilderBlock:^(VHSimpleCircleButtonBuilder *builder) {
builder.imageNormal = @"bear";
builder.buttonNormalColor = UIColorFromRGB(0xD32F2F);
builder.buttonPressedColor = UIColorFromRGB(0xF44336);
}];
[bmb addSimpleCircleButtonBuilderBlock:^(VHSimpleCircleButtonBuilder *builder) {
builder.imageNormal = @"bee";
builder.buttonNormalColor = UIColorFromRGB(0xD32F2F);
builder.buttonPressedColor = UIColorFromRGB(0xF44336);
}];
[self.view addSubview:bmb];
}
@end
你所需要做的只是选择属性,其他由BMB完成。
警告! 你必须保证 piecePlaceEnum
的数量, buttonPlaceEnum
的数量, 你添加的builders
数量一致。 可以注意到,piecePlaceEnum的名字是 VHPiecePlace_XXX_N_M, XXX 是名字, N 表示按钮数量, M 用作表示不同种类。 类似的,buttonPlaceEnum
的名字是VHButtonPlace_YYY_N_M。 你必须保证两者的N相同,当然M可以不通,比如例子中的:VHPiecePlace_DOT_3_1
和 VHButtonPlace_SC_3_3
。
##Boom Buttons
###Simple Circle Button
这是四种按钮中最简单的一种,仅有一张图片,在使用时,需要告诉BMB你想用这种类型的按钮:bmb.buttonEnum = VHButtonSimpleCircle
。
####Piece Place Type
用bmb.piecePlaceEnum = VHPiecePlace_DOT_3_1
来告诉BMB你想怎么放置按钮在BMB上。从数字1到9,BMB支持一下放置方式:(1 <= M <= 图片数量)
设置BMB中的按钮在爆炸后于屏幕中的位置:bmb.buttonPlaceEnum = VHButtonPlace_SC_3_3
。
直接看代码来查看目前BMB支持的位置类型:VHButtonPlaceEnum 。类似地,VHButtonPlace_SC_N_M
中,N是按钮的数量。
####Properties 对于每个simple circle类型的按钮,你都可以通过设置其builder的属性来设置按钮的属性:
[bmb addSimpleCircleButtonBuilderBlock:^(VHSimpleCircleButtonBuilder *builder) {
builder.shadowOffset = CGSizeMake(5, 5); // Shadow offset
builder.shadowOpacity = 0; // Shadow opactity
builder.shadowColor = [UIColor redColor]; // Shadow color
builder.imageNormal = @"bat"; // Image of button normally
builder.imagePressed = @"bear"; // Image of button when button is clicked
builder.buttonNormalColor = UIColorFromRGB(0xD32F2F); // Color of button normally
builder.buttonPressedColor = UIColorFromRGB(0xF44336); // Color of button when the button is clicked
builder.imageNormalTintColor = UIColorFromRGB(0xD32F2F); // Tint color of image normally
builder.imagePressedTintColor = UIColorFromRGB(0xffffff); // Tint color of image when button is clicked
builder.imageFrame = CGRectMake(10, 10, 60, 60); // Frame of image
builder.buttonRadius = 50; // Radius of button
builder.shadowRadius = 55; // Radius of shadow
}];
注意你不必全部设置,不设置就会使用默认值 。
###Text Inside Circle Button
这种按钮和前一种很像,区别在于其中有一行文字,类似地,你需要告诉BMB使用何种按钮类型:bmb.buttonEnum = VHButtonTextInsideCircle
。
####Piece Place Type 和simple circle类型一样。
和simple circle类型一样。
####Properties
[bmb addTextInsideCircleButtonBuilderBlock:^(VHTextInsideCircleButtonBuilder *builder) {
builder.shadowOffset = CGSizeMake(5, 5); // Shadow offset
builder.shadowOpacity = 0; // Shadow opactity
builder.shadowColor = [UIColor redColor]; // Shadow color
builder.imageNormal = @"bat"; // Image of button normally
builder.imagePressed = @"bear"; // Image of button when button is clicked
builder.buttonNormalColor = UIColorFromRGB(0xD32F2F); // Color of button normally
builder.buttonPressedColor = UIColorFromRGB(0xF44336); // Color of button when the button is clicked
builder.imageNormalTintColor = UIColorFromRGB(0x000000); // Tint color of image normally
builder.imagePressedTintColor = UIColorFromRGB(0xffffff); // Tint color of image when button is clicked
builder.imageFrame = CGRectMake(10, 10, 80, 80); // Frame of image
builder.buttonRadius = 50; // Radius of button
builder.shadowRadius = 55; // Radius of shadow
builder.textNormalColor = UIColorFromRGB(0xffffff); // Color of text normally
builder.textPressedColor = UIColorFromRGB(0x000000); // Color of text when the button is clicked
builder.textFrame = CGRectMake(0, 10, 100, 20); // Frame of text
builder.textContent = @"BAT HERE!"; // Text
builder.font = [UIFont systemFontOfSize:18]; // Font
builder.lineBreakMode = NSLineBreakByClipping; // Line break mode
builder.lines = 0; // Lines
builder.rotateImage = YES; // Whether rotate the image
builder.rotateText = YES; // Whether rotate the text
}];
###Text Outside Circle Button
与前者类似,但是文字在外面:bmb.buttonEnum = VHButtonTextOutsideCircle
。
####Piece Place Type 和simple circle类型一样。
和simple circle类型一样。但是注意,这种类型的按钮本质上不是正方形,所以布局略有区别,但是大同小异。
####Properties
[bmb addTextOutsideCircleButtonBuilderBlock:^(VHTextOutsideCircleButtonBuilder *builder) {
builder.shadowOffset = CGSizeMake(5, 5); // Shadow offset
builder.textShadowOffset = CGSizeMake(2, 2); // Shadow offset of text
builder.shadowOpacity = 0; // Shadow opactity
builder.shadowColor = [UIColor redColor]; // Shadow color
builder.textShadowColor = UIColorFromARGB(0xffff0000); // Shadow color of text
builder.imageNormal = @"bat"; // Image of button normally
builder.imagePressed = @"bear"; // Image of button when button is clicked
builder.buttonNormalColor = UIColorFromRGB(0xD32F2F); // Color of button normally
builder.buttonPressedColor = UIColorFromRGB(0xF44336); // Color of button when the button is clicked
builder.imageNormalTintColor = UIColorFromRGB(0x000000); // Tint color of image normally
builder.imagePressedTintColor = UIColorFromRGB(0xffffff); // Tint color of image when button is clicked
builder.imageFrame = CGRectMake(15, 15, 60, 60); // Frame of image
builder.textFrame = CGRectMake(0, 90, 90, 20); // Frame of text
builder.buttonWidth = 90; // Width of button
builder.buttonHeight = 120; // Height of button
builder.textNormalColor = UIColorFromRGB(0xffffff); // Color of text normally
builder.textPressedColor = UIColorFromRGB(0x000000); // Color of text when the button is clicked
builder.textContent = @"BAT HERE!"; // Text
builder.lineBreakMode = NSLineBreakByClipping; // Line break mode
builder.lines = 0; // Lines
builder.rotateImage = YES; // Whether rotate the image
builder.rotateText = YES; // Whether rotate the text
builder.shadowText = YES; // Whether show the shadow of text
}];
###Ham Buttom
呈矩形的按钮,且其中可以包含图片、主标题、副标题。你也可以去掉其中一些元素来生成新的布局,比如像上图一样做一个取消按钮。通过bmb.buttonEnum = VHButtonTextOutsideCircle
来设置按钮类型。
####Piece Place Type 矩形按钮在BMB上的布局纯粹是“一”,“二”,“三”……的布局,这里不列举图片了:
VHPiecePlace_HAM_1
VHPiecePlace_HAM_2
VHPiecePlace_HAM_3
VHPiecePlace_HAM_4
VHPiecePlace_HAM_5
也是纯粹的叠汉堡型:
VHButtonPlace_HAM_1
VHButtonPlace_HAM_2
VHButtonPlace_HAM_3
VHButtonPlace_HAM_4
VHButtonPlace_HAM_5
####Properties
[bmb addHamButtonBuilderBlock:^(VHHamButtonBuilder *builder) {
builder.shadowOffset = CGSizeMake(5, 5); // Shadow offset
builder.shadowOpacity = 0.5; // Shadow opactity
builder.shadowColor = [UIColor blueColor]; // Shadow color
builder.imageNormal = @"bat"; // Image of button normally
builder.imagePressed = @"bear"; // Image of button when button is clicked
builder.buttonNormalColor = UIColorFromRGB(0xD32F2F); // Color of button normally
builder.buttonPressedColor = UIColorFromRGB(0xF44336); // Color of button when the button is clicked
builder.imageNormalTintColor = UIColorFromRGB(0x0000ff); // Tint color of image normally
builder.imagePressedTintColor = UIColorFromRGB(0x00ff00); // Tint color of image when button is clicked
builder.imageFrame = CGRectMake(10, 0, 60, 60); // Frame of image
builder.titleFrame = CGRectMake(120, 30, 120, 30); // Frame of title
builder.subTitleFrame = CGRectMake(120, 0, 120, 30); // Frame of sub title
builder.shadowWidth = 300; // Width of shadow
builder.shadowHeight = 80; // Height of shadow
builder.shadowCornerRadius = 0; // Corner radius of shadow
builder.buttonWidth = 300; // Width of button
builder.buttonHeight = 80; // Height of button
builder.buttonCornerRadius = 0; // Corner radius of button
builder.titleContent = @"Title Here"; // Title
builder.titleNormalColor = UIColorFromRGB(0x0000ff); // Color of title normally
builder.titlePressedColor = UIColorFromRGB(0x00ffff); // Color of title when the button is pressed
builder.titleFont = [UIFont systemFontOfSize:30]; // Font of title
builder.titleLineBreakMode = NSLineBreakByClipping; // Line break mode of title
builder.titlelines = 0; // Lines of title
builder.titleAlignment = NSTextAlignmentCenter; // Text alignment of title
builder.subTitleContent = @"Sub title here"; // Sub title
builder.subTitleNormalColor = UIColorFromRGB(0x0000ff); // Color of sub title normally
builder.subTitlePressedColor = UIColorFromRGB(0x00ffff); // Color of sub title when the button is pressed
builder.subTitleFont = [UIFont systemFontOfSize:8]; // Font of sub title
builder.subTitleLineBreakMode = NSLineBreakByClipping; // Line break mode of sub title
builder.subTitlelines = 0; // Lines of sub title
builder.subTitleAlignment = NSTextAlignmentCenter; // Text alignment of sub title
builder.rotateImage = YES; // Whether rotate the image
builder.containImage = YES; // Whether contains image
}];
再次提醒,没有必要设置所有的属性,点击default properties 查看默认值。
####Last Ham Button Margin More Top
你可以将最底下一个按钮与上一个按钮的间距调大,这样就更加像iOS原生的弹出按钮了:
只需要告诉BMB你需要调大间距,并设置一个间距即可:
bmb.lastHamButtonMarginMoreTop = YES;
bmb.lastHamButtonTopMargin = 50;
###Common Button Place Types
####VHButtonPlace_Horizontal
VHButtonPlace_Horizontal
是一个通用的为所有按钮在屏幕上布局的属性,你可以用这个来将按钮布局到iPad上,因为iPad比较宽,有足够的区域放置BMB的所有按钮。
####VHButtonPlace_Vertical
和VHButtonPlace_Horizontal
类似:
##Button Place Alignments
如果你不想把按钮放在屏幕最中央,可以设置VHButtonPlaceAlignmentEnum来调整方位:
bmb.buttonPlaceAlignmentEnum = VHButtonPlaceAlignmentBottom;
##Boom Types
你可以通过VHBoomEnum来选择不同的爆炸类型:
bmb.boomEnum = VHBoomParabola_3;
VHBoomStraightLine
表示直线,VHBoomRandom
表示对每一个按钮,随机选取其他的爆炸类型。
##Ease Types 如果想让BMB更加生动,可以设置VHEaseEnum值:
bmb.showMoveEaseEnum = VHEaseOutCirc;
bmb.showScaleEaseEnum = VHEaseOutCirc;
bmb.showRotateEaseEnum = VHEaseOutCubic;
bmb.hideMoveEaseEnum = VHEaseInBack;
bmb.hideScaleEaseEnum = VHEaseInCirc;
bmb.hideRotateEaseEnum = VHEaseInCubic;
##Frames, Duration and Delay
bmb.frames = 30;
bmb.duration = 3;
bmb.delay = 1;
Frames,用来控制动画的帧数,如果你想让动画不那么卡,可以降低这个值。
Duration,每一个按钮动画的延时。
Delay每一个按钮距离上一个按钮运动的延迟。
所以总运动时间:(N - 1) * delay + duration其中N为按钮数量。
##Background Dim
用bmb.dimColor = [UIColor blueColor];
来设置BMB爆炸时,变化的背景色。
##Auto Hide
用bmb.autoHide = NO;
来设置当某一个按钮被点击时,BMB是否会自动收起来。
##Cancelable
用bmb.cancelable = NO;
来设置当点击背景时,BMB是否会自动收起来。
##NoBackground
用bmb.noBackground = YES;
来将BMB的背景隐藏,这样你就可以愉快地在NavigationBar等地方添加BMB。
##Draggable
用bmb.draggable = YES;
来设置BMB是否可以被拖动。
##Rotate Degree
用bmb.rotationDegree = M_PI * 10;
来为BMB按钮中的可以旋转部分的旋转角度。
##Shadow and Background Color
bmb.shadowOffset = CGSizeMake(0, 10);
bmb.shadowColor = [UIColor redColor];
bmb.shadowOpacity = 1;
bmb.shadowRadius = 40;
bmb.buttonNormalColor = [UIColor redColor];
bmb.buttonPressedColor = [UIColor blueColor];
通过以上属性来设置BMB的背景阴影和背景色。
##Dimensions
bmb.dotRadius = 3; // The radius of dot on the BMB
bmb.hamWidth = 30; // The width of piece-ham on the BMB
bmb.hamHeight = 4; // The height of piece-ham on the BMB
bmb.pieceHorizontalMargin = 3; // The horizontal margin between pieces
bmb.pieceVerticalMargin = 5; // The vertical margin between pieces
bmb.pieceInclinedMargin = 3; // The inclined margin between pieces
bmb.buttonHorizontalMargin = 10; // The horizontal margin between buttons
bmb.buttonVerticalMargin = 10; // The vertical margin between buttons
bmb.buttonInclinedMargin = 10; // The inclined margin between buttons
bmb.buttonBottomMargin = 10; // The vertical margin between the most-bottom button and the border of screen
bmb.buttonTopMargin = 10; // The vertical margin between the most-top button and the border of screen
bmb.buttonLeftMargin = 10; // The horizontal margin between the most-left button and the border of screen
bmb.buttonRightMargin = 10; // The horizontal margin between the most-right button and the border of screen
##Boom or Reboom It Programmatically
[bmb boom];
[bmb reboom];
##Delegate
实现VHBoomDelegate
协议,然后监听和BMB相关的回调:
/**
* When one of the sub button was clicked.
*
* @param index Index of the clicked sub button.
*/
- (void)onBoomClicked:(int)index
{
}
/**
* When the background was clicked.
*/
- (void)onBoomBackgroundClicked
{
}
/**
* The reboom animation is going to start.
*/
- (void)onBoomWillHide
{
}
/**
* The reboom animation is finished.
*/
- (void)onBoomDidHide
{
}
/**
* The boom animation is going to start.
*/
- (void)onBoomWillShow
{
}
/**
* The boom animation is finished.
*/
- (void)onBoomDidShow
{
}
#Versions ###1.0.2 第一版,第一个iOS开源库。
#License
Copyright 2016 Nightonke
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.