浮动操作按钮的中心 UIButton 文本，如收件箱应用程序

Posted 2023-03-21

【中文标题】浮动操作按钮的中心 UIButton 文本，如收件箱应用程序

【英文标题】：Center UIButton text for floating action button like Inbox app

【发布时间】：2015-06-24 11:57:52

【问题描述】：

floatingButton = UIButton(x: blocx, y:blocy, width: imageSize, height: imageSize, target: self, action: "clickedFloatingButton")
floatingButton!.backgroundColor = CozyColors.StatCardSkip
floatingButton!.layer.cornerRadius = floatingButton!.frame.size.width / 2
floatingButton!.setTitle("+", forState: UIControlState.Normal)
floatingButton!.setTitleColor(CozyColors.ThemeWhite, forState: UIControlState.Normal)
floatingButton!.titleLabel?.font = UIFont(name: CozyStyles.ThemeFontName, size: imageSize*2/3)
view.addSubview(floatingButton!)

结果如下：

如您所见，加号按钮未正确对齐到中心。如何在不添加 UILabel 作为子视图的情况下将其放在中间？

【问题讨论】：

恐怕你不能

【参考方案1】：

试试这个代码：

    var floatingButton = UIButton(frame: CGRectMake(10, 20, 50, 50))
    floatingButton.backgroundColor = UIColor.redColor()
    floatingButton.layer.cornerRadius = floatingButton.frame.size.width / 2
    floatingButton.setTitle("+", forState: UIControlState.Normal)
    floatingButton.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
    floatingButton.titleLabel?.font = UIFont(name: floatingButton.titleLabel!.font.familyName , size: 50)
    floatingButton.titleEdgeInsets = UIEdgeInsetsMake(-10, 0, 0, 0)
    view.addSubview(floatingButton)

【讨论】：

如果尺寸是动态的并且edgeinset值将是动态的怎么办？

@Esq 您必须根据尺寸动态计算顶部边缘。否则，您可以按照#DharmeshKheni 的建议使用UIBezierPath

【参考方案2】：

嗯，我认为更简单的方法是为其设置背景图像

    floatingButton.setBackgroundImage(UIImage(named: "icon.png"), forState: UIControlState.Normal)

您可以应用转换或从谷歌查找类似的图像

背景图片在这里

【参考方案3】：

您将 Title Edge Inset 设置如下。更改其值并设置标题中间。

floatingButton.titleEdgeInsets = UIEdgeInsetsMake(-24, 0, 0, 0);

根据下面的函数改变值。

func UIEdgeInsetsMake(top: CGFloat, left: CGFloat, bottom: CGFloat, right: CGFloat) -> UIEdgeInsets

【讨论】：

如果尺寸是动态的并且edgeinset值将是动态的怎么办？

标题顶部空间取决于FontSize和Height，所以必须根据它的变化。

【参考方案4】：

您可以使用UIBezierPath 简单地绘制您的按钮，这是您的代码：

import UIKit

class PushButtonView: UIButton 

    override func drawRect(rect: CGRect) 
        var path = UIBezierPath(ovalInRect: rect)
        UIColor.redColor().setFill()
        path.fill()

        //set up the width and height variables
        //for the horizontal stroke
        let plusHeight: CGFloat = 3.0
        let plusWidth: CGFloat = min(bounds.width, bounds.height) * 0.6

        //create the path
        var plusPath = UIBezierPath()

        //set the path's line width to the height of the stroke
        plusPath.lineWidth = plusHeight

        //move the initial point of the path
        //to the start of the horizontal stroke
        plusPath.moveToPoint(CGPoint(x:bounds.width/2 - plusWidth/2 + 0.5, y:bounds.height/2 + 0.5))

        //add a point to the path at the end of the stroke
        plusPath.addLineToPoint(CGPoint(x:bounds.width/2 + plusWidth/2 + 0.5, y:bounds.height/2 + 0.5))

        //Vertical Line

        //move to the start of the vertical stroke
        plusPath.moveToPoint(CGPoint(x:bounds.width/2 + 0.5, y:bounds.height/2 - plusWidth/2 + 0.5))

        //add the end point to the vertical stroke
        plusPath.addLineToPoint(CGPoint(x:bounds.width/2 + 0.5, y:bounds.height/2 + plusWidth/2 + 0.5))

        //set the stroke color
        UIColor.whiteColor().setStroke()

        //draw the stroke
        plusPath.stroke()
    

你的结果将是：

您可以参考THIS 示例项目了解更多信息。您可以根据需要对其进行修改。

希望对你有所帮助。