Skip to content

Latest commit

 

History

History
584 lines (488 loc) · 38.7 KB

DEPRECATED-README-ZH.md

File metadata and controls

584 lines (488 loc) · 38.7 KB

VHBoomMenuButton

WoWoViewPager BoomMenu CoCoin BlurLockView LeeCo GithubWidget JellyToggleButton FaceOffToggleButton


#Guide

Englist README
Pod
Note

###Usage

  1. Basic Usage
  2. Boom Buttons
    1. Simple Circle Button
      1. Piece Place Type
      2. Button Place Type
      3. Properties
    2. Text Inside Circle Button
      1. Piece Place Type
      2. Button Place Type
      3. Properties
    3. Text Outside Circle Button
      1. Piece Place Type
      2. Button Place Type
      3. Properties
    4. Ham Button
      1. Piece Place Type
      2. Button Place Type
      3. Properties
      4. Last Ham Button Margin More Top
    5. Common Button Place Types
      1. VHButtonPlace_Horizontal
      2. VHButtonPlace_Vertical
  3. Button Place Alignments
  4. Boom Types
  5. Ease Types
  6. Frames, Duration and Delay
  7. Background Dim
  8. Auto Hide
  9. Cancelable
  10. NoBackground
  11. Draggable
  12. Rotate Degree
  13. Shadow and Background Color
  14. Dimensions
  15. Boom or Reboom It Programmatically
  16. Delegate

Versions
License

#Pod 把BMB加入你的项目中:

  1. 通过Pod: pod "VHBoomMenuButton", "~> 1.0.2"
  2. 或者直接复制源代码到项目中

#Note

  1. BMB其实早在Android平台上开源
  2. 我刚学iOS,如果哪些地方写得不好,可以直接在issue或者e-mail中告诉我(Nightonke@outlook.com)。
  3. BMB架构:

    BMB主要分为一个主体和三个子模块。主体负责BMB按钮的基本UI和调度三个子模块,三个子模块分别负责在BMB上的pieces、动画、在屏幕上的按钮。如果你想fork我的库并添加自己的按钮,比如说按钮A,你需要:
    1. 写一个ABuilder继承自VHBoomButtonBuilder
    2. 写一个AButton继承自VHBoomButton
    3. 写一个对应AButton的APiece继承自VHBoomPiece
    4. 添加自己的piece-place(Piece在BMB上的放置逻辑)和自己的button-place(按钮在屏幕上的放置逻辑),你应该想BMB中已有的代码一样,放在VHPiecePlaceManagerVHButtonPlaceManager 中。

#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_1VHButtonPlace_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 <= 图片数量)

按钮数量 VHPiecePlaceEnum 图例
1 VHPiecePlace_DOT_1
2 VHPiecePlace_DOT_2_M
3 VHPiecePlace_DOT_3_M
4 VHPiecePlace_DOT_4_M
5 VHPiecePlace_DOT_5_M
6 VHPiecePlace_DOT_6_M
7 VHPiecePlace_DOT_7_M
8 VHPiecePlace_DOT_8_M
9 VHPiecePlace_DOT_9_M

Button Place Type

设置BMB中的按钮在爆炸后于屏幕中的位置:bmb.buttonPlaceEnum = VHButtonPlace_SC_3_3
直接看代码来查看目前BMB支持的位置类型:VHButtonPlaceEnum 。类似地,VHButtonPlace_SC_N_M中,N是按钮的数量。
VHButtonPlace_SC_1 VHButtonPlace_SC_2_1 VHButtonPlace_SC_2_2 VHButtonPlace_SC_3_1 VHButtonPlace_SC_3_2 VHButtonPlace_SC_3_3 VHButtonPlace_SC_3_4 VHButtonPlace_SC_4_1 VHButtonPlace_SC_4_2 VHButtonPlace_SC_5_1 VHButtonPlace_SC_5_2 VHButtonPlace_SC_5_3 VHButtonPlace_SC_5_4 VHButtonPlace_SC_6_1 VHButtonPlace_SC_6_2 VHButtonPlace_SC_6_3 VHButtonPlace_SC_6_4 VHButtonPlace_SC_6_5 VHButtonPlace_SC_6_6 VHButtonPlace_SC_7_1 VHButtonPlace_SC_7_2 VHButtonPlace_SC_7_3 VHButtonPlace_SC_7_4 VHButtonPlace_SC_7_5 VHButtonPlace_SC_7_6 VHButtonPlace_SC_8_1 VHButtonPlace_SC_8_2 VHButtonPlace_SC_8_3 VHButtonPlace_SC_8_4 VHButtonPlace_SC_8_5 VHButtonPlace_SC_8_6 VHButtonPlace_SC_8_7 VHButtonPlace_SC_9_1 VHButtonPlace_SC_9_2 VHButtonPlace_SC_9_3

####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类型一样。

Button Place Type

和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类型一样。

Button Place Type

和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

Button Place Type

也是纯粹的叠汉堡型:

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;

所有的ease类型运动曲线:

##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.