【问题标题】:How to make UIButton a circle?如何让 UIButton 变成一个圆圈?
【发布时间】:2016-10-12 17:35:33
【问题描述】:

我一直试图使单元格中的 UIButton 成为一个完美的圆圈。不幸的是,圆圈是基于背景图像而不是 UIButton 框架形成的。

我创建一个圆圈的代码:

cell.StoryViewButton.setImage(image, forState: .Normal)
cell.StoryViewButton.frame = CGRectMake(50, 8, 100, 100)
cell.StoryViewButton.layer.masksToBounds = false
cell.StoryViewButton.layer.cornerRadius = cell.StoryViewButton.frame.width/2
cell.StoryViewButton.clipsToBounds = true

输出如下所示:

如何获得我想要的完美圆形按钮框架?

【问题讨论】:

  • 您在使用自动布局吗?然后设置框架不起作用。
  • @HDT 是的,我正在使用 Autolayout,我应该不使用它吗?
  • 这取决于您当前的实现,您仍然可以使用 Autolayout,但是,不要设置框架,而是使用约束来平等地设置视图的宽度和高度。
  • @HDT 我取消了自动布局约束,让它回到了完美的循环,谢谢!
  • cell.StoryViewButton.frame.width/2 到 cell.StoryViewButton.layer.bound.size/2

标签: ios swift uiimageview uibutton


【解决方案1】:

斯威夫特 4

您可以将以下功能应用于任何视图,包括按钮。

func makeViewCircular(view: UIView) {
    view.layer.cornerRadius = view.bounds.size.width / 2.0
    view.clipsToBounds = true
}

太好了。

虽然我在 viewDidLoad 中应用了它,但起初这对我不起作用。此时,约束仍在使用按钮的大小,并且圆角半径应用于它认为是两倍大小的按钮,从而产生奇怪的形状。要将正确的值应用于正确的测量,请将代码放入 override func viewDidLayoutSubviews()

我知道这可能是我个人流程中的一个更具体的案例,但我相信它会对某人有所帮助。

【讨论】:

    【解决方案2】:

    有工作代码。我测试它。希望能帮助到你。 我不知道为什么,但我通过在此处“CGRectMake(50, 8, 120, 120)”中更改框架的高度和宽度来检查框架的高度和宽度以及按钮的高度和宽度应该相同,得到完美的圆。

     cell.StoryViewButton.setImage(image, forState: .Normal)
     cell.StoryViewButton.frame = CGRectMake(50, 8, 120, 120)
     cell.StoryViewButton.layer.cornerRadius = self.btn.frame.width/2;
     cell.StoryViewButton.layer.masksToBounds = true
    

    希望对你有帮助。

    【讨论】:

    • 是的,它可以工作,但即使 UI 显示为圆形,用户仍然可以点击角落。无论如何,无论我们用cornerRadius定义什么,都只能与圆进行交互吗?
    【解决方案3】:

    试试这样的

     cell.StoryViewButton.layer.masksToBounds = true
     cell.StoryViewButton.layer.cornerRadius = cell.StoryViewButton.frame.width/2
    

    如果你需要创建一个视野,你必须将masksToBounds设置为true,不要设置clipsToBounds

    希望这会对你有所帮助。

    【讨论】:

    • 尺寸缺失:“cell.StoryViewButton.frame.size.width/2”
    猜你喜欢
    • 2017-12-06
    • 1970-01-01
    • 2020-06-06
    • 2015-04-15
    • 2012-08-16
    • 1970-01-01
    • 2012-11-12
    • 1970-01-01
    • 2018-12-15
    相关资源
    最近更新 更多