MAWishfulButtonFramework

MAWishfulButtonFramework 是一个友好的、易于集成的按钮生成器，适用于希望为他们的应用增添活力的人们。一旦添加，用户可以选择从 storyboard 或代码从他们的代码中自定义按钮。然而，预定义的按钮动画需要从代码中选取。

要求

• iOS 10.0
• Swift 5.0

安装

下载名为 "MaWishfulButtonKit" 的文件夹，并将其通过拖放方式添加到应用程序中。

按钮类别

  - MARectangularButton
  - MACircularImageBaseButton
  - MASquareImageBaseButton
  - MAGradientBackgroundButton
  - MAGradientBorderButton
  - MASimpleCompositeButton
  - MAGradientCompositeButton

MARectangularButton

MARectangularButton外观简洁优雅，周围有角和阴影。

然而，通过一点几何变换，它可以轻松地变成圆形按钮。记得没有图片时的用户头像占位符按钮，仅显示用户首字母。让我们试一下-

从代码中

@IBOutlet weak var profileButton: MARectangularButton!{
    didSet{
        profileButton.backgroundColor = UIColor.black
        profileButton.borderWidth = 3.0
        profileButton.borderColor = UIColor.darkGray
        profileButton.cornerRadius = 50.0
        profileButton.buttonTitle = "MA"
        profileButton.titleTextColor = UIColor.lightGray
        profileButton.fontSize = 40.0
        profileButton.shadowColor = UIColor.white
    }
}

从场景图中

MARectangularButton 属性

• var backgroundColor: UIColor?
• var buttonTitle: String
• var fontSize: CGFloat
• var textAlignment: String
• var titleTextColor: UIColor?
• var cornerRadius: CGFloat
• var borderWidth: CGFloat
• var borderColor: UIColor?
• var shadowColor: UIColor
• var shadowOpacity: Float
• var shadowRadius: CGFloat

MACircularImageBaseButton

MACircularImageBaseButton 是一个限制只能有图片的圆形按钮。图片应为透明的 png 类型的图像。一些示例按钮 -

一个从场景图中的示例演示

MACircularImageBaseButton 属性

• var backgroundColor: UIColor?
• var imageOffsetXY : CGFloat
• var contentImage : UIImage?
• var borderWidth: CGFloat
• var borderColor: UIColor?
• var shadowColor: UIColor
• var shadowOpacity: Float
• var shadowRadius: CGFloat

MASquareImageBaseButton

MASquareImageBaseButton 几乎与 MACircularImageBaseButton 相同，仅限于只有一个图像，但与 MACircularImageBaseButton 不同的是，MASquareImageBaseButton 允许用户设置自己选择的角半径。

Storyboard 中的一个示例-

MAGradientBackgroundButton 和 MAGradientBorderButton

正如其名，MAGradientBackgroundButton 有渐变背景，而 MAGradientBorderButton 有渐变边框。目前渐变色的阴影是两种颜色以上的合并，但两个按钮的渐变颜色的起始点和终点都可以配置。

示例按钮

属性

• var darkerShade: UIColor
• var lighterShade: UIColor
• var startPointX: CGFloat
• var startPointY: CGFloat
• var endPointX: CGFloat
• var endPointY: CGFloat
• var cornerRadius: CGFloat
• var buttonTitle: String
• var fontSize: CGFloat
• var textAlignment: String
• var titleTextColor: UIColor?

MASimpleCompositeButton

MASimpleCompositeButton 是一个包含图像和标题的复合按钮。可以配置图像的位置（左、右、上、下；注意：默认值为左）、其框架偏移（应从原点移动多远，默认值是 5.0）以及其周围的填充（默认值是 0.0）。以下是一些变体 -

从故事板中演示

MASimpleCompositeButton 属性

• var titleBackgroundColor: UIColor
• var imageBackgroundColor: UIColor?
• var imagePosition: String // 默认 "左"
• var contentImage : UIImage?
• var frameOffset: CGFloat // 默认 5.0
• var imageSizingFactor: CGFloat
• var buttonTitle: String?
• var textColor: UIColor
• var fontSize: CGFloat
• var textAlignment: String
• var borderWidth: CGFloat
• var borderColor: UIColor?
• var cornerRadius: CGFloat

MAGradientCompositeButton

MAGradientCompositeButton 几乎与 MASimpleCompositeButton 相同。然而，标题和图像没有分开的阴影背景，而是按钮本身具有阴影效果。以下是一些变体 -

MAGradientCompositeButton 属性

• var darkerShade: UIColor
• var lighterShade: UIColor
• var startPointX: CGFloat
• var startPointY: CGFloat
• var endPointX: CGFloat
• var endPointY: CGFloat
• var imagePosition: String // 默认 "左"
• var contentImage : UIImage?
• var frameOffset: CGFloat // 默认 5.0
• var imageSizingFactor: CGFloat
• var buttonTitle: String?
• var textColor: UIColor
• var fontSize: CGFloat
• var textAlignment: String
• var borderWidth: CGFloat
• var borderColor: UIColor?
• var cornerRadius: CGFloat

除了所有视觉属性之外，所有按钮都还提供了一套固定的动画。

动画集

- horizontalShaking
- verticalBouncing
- zoomIn
- zoomOut
- springOut
- rotateBy45Degree
- rotateBy90Degree
- rotateBy180Degree
- rotateBy360Degree

这些动画只能通过代码添加。PS：最后4个动画只有在存在图片时才有效，因此对于 MARectangularButton、MAGradientBackgroundButton 和 MAGradientBorderButton，这些动画不会生效。

添加动画

1. 创建按钮的输出

2. 当输出建立后，例如在 viewDidload 方法或 didSet、属性观察者中，分配 appliedAnimation 的值。以下是一个添加动画的示例代码：

@IBOutlet weak var addContactButton: MASimpleCompositeButton!{
        didSet{
            addContactbutton.appliedAnimation = .rotateBy45Degree
        }
    }

就是这样。查看更多动画效果。

演示动画

按钮点击事件处理回调

var buttonPressed: ((UIButton)->())?，提供了一个回调以处理动作。为任何框架生成的按钮实现回调，例如-

myWishfulButton.buttonPressed = { sender in
    print("Code for clicking the button goes here")
}

许可

根据 MIT 许可证分发。有关更多信息，请参阅 LICENSE。