BFPaperButton, 由Google材料设计论文启发的iOS按钮

分享于 

11分钟阅读

GitHub

  繁體 雙語
iOS Buttons inspired by Google's Paper Material Design.
  • 源代码名称:BFPaperButton
  • 源代码网址:http://www.github.com/bfeher/BFPaperButton
  • BFPaperButton源代码文档
  • BFPaperButton源代码下载
  • Git URL:
    git://www.github.com/bfeher/BFPaperButton.git
    Git Clone代码到本地:
    git clone http://www.github.com/bfeher/BFPaperButton
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/bfeher/BFPaperButton
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    BFPaperButton

    CocoaPods

    一个受谷歌设计主题论文启发的平板按钮。

    Animated Screenshot

    现在拥有更平滑的动画和更易于定制的public 属性 !

    BFPaperButton 是UIButton的一个子类,它与google设计实验室的新文件按钮的行为非常相似。 所有动画都是异步的,并且在sublayers上执行。 BFPaperButtons可以立即使用令人舒适的默认行为,但是它们可以轻松定制 ! 角半径,点击圆色,背景淡色颜色,并且点击圆圈直径可以通过 public 属性自定义。

    BFPaperButtons有 2种风格,平坦或者凸起。 平面BFPaperButtons没有阴影,将在所有动画中保持平坦。 平面按钮可以是透明的,在这种情况下背景也会淡化一点时。 引起的BFPaperButtons有一个投影,它与一个水龙头一起动画,给它提高触摸的感觉。 引起的BFPaperButtons看起来没有明显的背景颜色,因为它会将阴影层公开。

    默认情况下,BFPaperButtons使用"智能颜色",它将匹配龙头圆和背景淡色颜色的titleLabel 颜色。 通过设置属性,.usesSmartColorNO,可以关闭智能颜色。 如果禁用智能颜色,默认情况下将使用灰色颜色和背景色淡入背景色。 你可以通过以下方式设置自己的颜色: .tapCircleColor.backgroundFadeColor。请注意,设置这些选项将禁用智能颜色。

    注意:要将按钮类型设置为在 Storyboard 中设置为自定义,需要注意 ,这样就可以防止标题在UIControlStateHighlighted上淡出。

    属性

    UIColor *shadowColor

    凸起按钮的阴影的UIColor。 当shadowOpacity覆盖这里颜色的alpha时,建议使用 1的alpha值。

    CGFloat loweredShadowOpacity

    CGFLoat代表 raise button的阴影的不透明度。 默认值为 0.5f

    CGFloat loweredShadowRadius

    一个 CGFLoat,表示提升按钮的阴影的半径,它们降低( 空闲)。 默认值为 1.5f

    CGSize loweredShadowOffset

    表示被提升按钮的阴影的偏移量的CGSize,当它们被降低时。 默认值为 (0, 1)

    CGFloat liftedShadowOpacity

    一个 CGFLoat,表示提升的按钮提升( 触摸时) 时的阴影阴影的不透明度。 默认值为 0.5f

    CGFloat liftedShadowRadius

    CGFLoat代表提升按钮的阴影半径的半径。 默认值为 4.5f

    CGSize liftedShadowOffset

    一个 CGSize,表示提升的按钮提升( 触摸时) 时的阴影偏移量。 默认值为 (2, 4)

    CGFloat touchDownAnimationDuration

    一个 CGFLoat,表示在触摸下发生的动画的持续时间 ! 默认为 0.25f 秒。( 转到 Steelers )

    CGFloat touchUpAnimationDuration

    一个 CGFLoat,表示在触摸时发生的动画的持续时间 ! 默认值为 2 * touchDownAnimationDuration 秒。

    CGFloat tapCircleDiameterStartValue

    一个 CGFLoat,表示在生成之前一个圆圆圆的直径,它在生成之前。 默认值为 5.f

    CGFloat tapCircleDiameter

    表示抽头圆直径的CGFloat值。 默认情况下,它将是 MAX(self.frame.width, self.frame.height)tapCircleDiameterFull 将计算始终填充整个视图的圆。 任何小于或者等于 tapCircleDiameterFull的值都将导致使用默认值。 常数:tapCircleDiameterLargetapCircleDiameterMediumtapCircleDiameterSmall 也可以使用。 */

    CGFloat tapCircleBurstAmount

    表示在爆炸时应该增加抽头圆直径的CGFloat值。 默认值为 100.f

    CGFloat cornerRadius

    传播到子层的角半径。 默认值为 0

    UIColor *tapCircleColor

    用于显示你点击的圆圈的UIColor。 注:设置这里操作会使"智能颜色"循环的能力下降。 推荐的Alpha值小于 1

    UIColor *backgroundFadeColor

    要淡化背景的UIColor。 注:设置会使背景淡入淡出的"智能颜色"能力降低。 推荐的Alpha值小于 1

    BOOL rippleFromTapLocation

    设置为 YES的标志,使tap圆从触摸点溢出。 如果设置为 NO,则龙头圆将始终从视图中心旋转。 默认值为 YES

    BOOL rippleBeyondBounds

    设置为 YES 以使tap循环超出视图边界的标志。 如果设置为 NO,则剪辑圆将被剪裁到视图的边界。 默认值为 NO

    BOOL isRaised

    要设置为 YES 以更改要引发的平面视图或者设置为 NO 以将引起视图更改为平面的标志。 如果你使用了提供的自定义初始化器之一,则应该只保留这里参数。 如果通过 Storyboard 或者IB实例化,并希望从riased更改为 flat,则这是你的参数 ! 默认值为 YES

    BOOL usesSmartColor

    设置使用智能颜色或者不使用自定义颜色方案的标志。 虽然智能颜色是默认的( usesSmartColor = 是),但定制也很酷。

    关于提升 vs 平面和智能颜色 vs 非智能颜色的说明:

    有阴影,所以清晰的背景看起来很愚蠢。 它只有tap颜色。 无背景淡入淡出。

    平面

    无阴影,因此背景清晰。 如果背景清晰,它也有背景淡入色,帮助可视化按钮和它的框架。

    智能颜色

    将使用titlelabel颜色的字体选择一个圆圈颜色,如果背景清晰,也会选择更轻的背景色。

    非智能颜色

    将使用半透明的灰色圆筒圆,如果背景清晰,一个较轻的半透明灰色背景淡色。

    用法

    将 BFPaperButton 头和实现文件添加到项目中。 ( &。h。)

    创建平面 BFPaperButton

    BFPaperButton *flatPaperButton = [[BFPaperButton alloc] initWithFrame:rect raised:NO];

    创建一个提升的BFPaperButton

    BFPaperButton *raisedPaperButton = [[BFPaperButton alloc] initWithFrame:rect raised:YES];

    工作示例

    ( 直接从示例项目中获取。)

    BFPaperButton *bfFlatSmart = [[BFPaperButton alloc] initWithFrame:CGRectMake(20, 20, 280, 43) raised:NO];
    [bfFlatSmart setTitle:@"BFPaperButton Flat: Smart Color"forState:UIControlStateNormal];
    bfFlatSmart.backgroundColor = [UIColor paperColorGray600]; // You can find this from my other library, BFPaperColors :)[bfFlatSmart setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [bfFlatSmart setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];
    [bfFlatSmart addTarget:selfaction:@selector(buttonWasPressed:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:bfFlatSmart];

    自定义示例

    ( 直接从示例项目中获取。)

    BFPaperButton *circle2 = [[BFPaperButton alloc] initWithFrame:CGRectMake(116, 468, 86, 86) raised:YES];
    [circle2 setTitle:@"Custom"forState:UIControlStateNormal];
    [circle2 setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [circle2 setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];
    [circle2 addTarget:selfaction:@selector(buttonWasPressed:) forControlEvents:UIControlEventTouchUpInside];
    circle2.backgroundColor = [UIColor colorWithRed:0.3green:0blue:1alpha:1];
    circle2.tapCircleColor = [UIColor colorWithRed:1green:0blue:1alpha:0.6]; // Setting this color overrides"Smart Color".circle2.cornerRadius = circle2.frame.size.width/2;
    circle2.rippleFromTapLocation = NO;
    circle2.rippleBeyondBounds = YES;
    circle2.tapCircleDiameter = MAX(circle2.frame.size.width, circle2.frame.size.height) * 1.3;
    [self.view addSubview:circle2];

    CocoaPods

    CocoaPods是在 objective-c 项目中管理库依赖关系的最佳方法。 了解更多关于 http://cocoapods.org的信息。

    将这个添加到你的podfile中,以便向你的项目添加 BFPaperButton。

    platform :ios, '7.0'pod 'BFPaperButton'

    许可证

    BFPaperButton 使用MIT许可证:

    请参见包含许可证文件。


    DES  MAT  设计  Material  按钮  MATE  
    相关文章