Swift：创建喜欢和评论按钮，如Facebook和Twitter iOS应用程序

Question

使用Swift编写的社交网络iPhone应用程序，我正试图弄清楚如何创建类似于Facebook和Twitter iOS应用程序上的类似按钮和评论按钮。

例如，对于我当前的喜欢按钮，我有一个UIButton带有一个微笑的表情符号作为原型UIButton中Cell的图像。在这个按钮的右边，我有一个UILabel，文字是“喜欢”（表示左边的笑脸是一个类似的按钮）。

如何创建一个将图标和文本组合在一起作为一个按钮的按钮，以便用户可以点击Like图标部分或按钮的“Like”文本部分，这使用户更容易点按相似按钮？

Screenshot: Facebook buttons example

Screenshot : Twitter buttons example

当我的手指按下类似按钮时，我截取了Twitter按钮的屏幕截图。请注意这里的“按钮”按钮是否显示为灰色（心脏图标部分和喜欢的数量）。这就是我想要的效果。

我感谢任何帮助。谢谢。

Answer 1

我只会告诉你如何做到这一点的基本想法，因为你的问题很广泛而且没有显示你所尝试的内容。

基本上，创建一个UIButton子类。我们称之为SocialButton。

覆盖drawRect课程中的SocialButton方法。在该方法中，您应该使用UIGraphicsGetCurrentContext()来获取CGContext。然后调用CGContextDrawImage在CGRect中绘制图像。此CGRect是您的图片的位置。

这里有一些代码可以给你一个想法：

class SocialButton: UIButton {
    override func drawRect(rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        CGContextDrawImage(context, someRect, UIImage(named: "someImage")?.CGImage)
    }
}

someRect是将绘制图像的矩形。

编辑：

要在故事板中添加社交按钮，您需要在课堂上添加@IBDesignable。我认为你还应该添加一个名为image的属性。这样人们就可以在按钮中设置他们想要的图像。所以现在这个课程看起来像这样：

@IBDesignable
class SocialButton: UIButton {
    @IBInspectable // This is added so that you can change the image in interface builder
    var image: UIImage?

    override func drawRect(rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        CGContextDrawImage(context, someRect, self.image?.CGImage)
        // You can also set the tint, bg color and other stuff here.
    }
}

现在，你必须在课堂上改变一切。在故事板上！

首先，将UIButton拖到视图控制器并选择它：

然后，打开右侧的身份检查员。如果你不知道它是什么，只需点击Xcode左侧的ID卡图标。

你看到“班级”字段了吗？只需在其中输入“SocialButton”，然后按Enter：

切换到属性检查器（带有滑块图标的那个），您应该会看到自定义按钮的图像属性：

您可以使用属性检查器选择图像，如果已正确实施drawRect，则应立即在按钮左侧看到图像。

Answer 2

您也可以使用Font Awesome将自定义图标和文字添加到UIBUtton。

例如，您可以使用：

buttonName.setFAText(prefixText: "follow me on ", icon: FAType.FATwitter, postfixText: ". Thanks!", size: 25, forState: .Normal, iconSize: 30)

获取您的标签和推特图标。

希望这会对你有帮助！