当前位置：文江博客话题详情

如何制作一个圆形的UIView

发布于 2024-08-14 07:59:30 字数 74 浏览 10 评论 0原文

我想制作一个圆形的 UIView 或 UIImageView 。或者是一个圆圈，我可以使用滑块更改其大小，并使用选择器视图更改其颜色。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

或十年 2024-08-21 07:59:30

我至少可以向您展示绘制任意大小的圆圈的快捷方式。无需 OpenGL，无需 Core Graphics 绘图。

导入 QuartzCore 框架以访问 UIView 或 UIImageView 的 .cornerRadius 属性。

#import <QuartzCore/QuartzCore.h>

还可以手动将其添加到项目的 Frameworks 文件夹中。

将此方法添加到您的视图控制器或任何您需要的地方：

-(void)setRoundedView:(UIImageView *)roundedView toDiameter:(float)newSize;
{
    CGPoint saveCenter = roundedView.center;
    CGRect newFrame = CGRectMake(roundedView.frame.origin.x, roundedView.frame.origin.y, newSize, newSize);
    roundedView.frame = newFrame;
    roundedView.layer.cornerRadius = newSize / 2.0;
    roundedView.center = saveCenter;
}

要使用它，只需向其传递一个 UIImageView 和一个直径。此示例假设您有一个名为“circ”的 UIImageView 作为子视图添加到您的视图中。它应该设置一个backgroundColor，以便您可以看到它。

circ.clipsToBounds = YES;
[self setRoundedView:circ toDiameter:100.0];

这仅处理UIImageViews，但您可以将其推广到任何UIView。

注意：从 iOS 7 开始，clipToBounds 需要设置为 YES。

I can at least show you a shortcut for drawing circles of arbitrary size. No OpenGL, no Core Graphics drawing needed.

Import the QuartzCore framework to get access to the .cornerRadius property of your UIView or UIImageView.

#import <QuartzCore/QuartzCore.h>

Also manually add it to your project's Frameworks folder.

Add this method to your view controller or wherever you need it:

-(void)setRoundedView:(UIImageView *)roundedView toDiameter:(float)newSize;
{
    CGPoint saveCenter = roundedView.center;
    CGRect newFrame = CGRectMake(roundedView.frame.origin.x, roundedView.frame.origin.y, newSize, newSize);
    roundedView.frame = newFrame;
    roundedView.layer.cornerRadius = newSize / 2.0;
    roundedView.center = saveCenter;
}

To use it, just pass it a UIImageView and a diameter. This example assumes you have a UIImageView named "circ" added as a subview to your view. It should have a backgroundColor set so you can see it.

circ.clipsToBounds = YES;
[self setRoundedView:circ toDiameter:100.0];

This just handles UIImageViews but you can generalize it to any UIView.

NOTE: Since iOS 7, clipToBounds need to YES.

回复收藏 0 原文

青萝楚歌 2024-08-21 07:59:30

// For those looking to round the corners of an image view
imageView.layer.cornerRadius = imageView.bounds.size.width/2;
imageView.layer.masksToBounds = YES;

// For those looking to round the corners of an image view
imageView.layer.cornerRadius = imageView.bounds.size.width/2;
imageView.layer.masksToBounds = YES;

回复收藏 0 原文

浅笑轻吟梦一曲 2024-08-21 07:59:30

如果有人正在寻找与下面相同的 Swift，答案是（Xcode7.2）：

（要使其工作，高度和宽度必须相等。）

extension UIView {
    func makeCircular() {
        self.layer.cornerRadius = min(self.frame.size.height, self.frame.size.width) / 2.0
        self.clipsToBounds = true
    }
}

If somebody is looking for Swift equivalent than below is the answer (Xcode7.2):

(For this to work height and width must be equal.)

extension UIView {
    func makeCircular() {
        self.layer.cornerRadius = min(self.frame.size.height, self.frame.size.width) / 2.0
        self.clipsToBounds = true
    }
}

回复收藏 0 原文

画▽骨i 2024-08-21 07:59:30

正如一些评论中提到的，@IBDesignable 现在使这变得更加容易，因此您可以使用 Interface Builder 来配置圆形 UIImageView。

首先创建一个名为 RoundedImageView.swift 的类并将以下代码粘贴到其中：

import UIKit

@IBDesignable public class RoundedImageView: UIImageView {

    override public func layoutSubviews() {
        super.layoutSubviews()

        //hard-coded this since it's always round
        layer.cornerRadius = 0.5 * bounds.size.width
    }
}

在 InterfaceBuilder 中选择 UIImageView 并将该类从 UIImageView 更改为自定义 RoundedImageView：

设置 剪辑将 Bounds 设置为 true（否则图片将超出圆圈）：

它现在应该在 InterfaceBuilder 中将自身舍入，这非常漂亮。确保将宽度和高度设置为相同的值，否则它的形状会像齐柏林飞艇！

As mentioned in some comments, @IBDesignable makes this much easier now, so you can use Interface Builder to configure your rounded UIImageView.

First create a class named RoundedImageView.swift and paste this code to it:

import UIKit

@IBDesignable public class RoundedImageView: UIImageView {

    override public func layoutSubviews() {
        super.layoutSubviews()

        //hard-coded this since it's always round
        layer.cornerRadius = 0.5 * bounds.size.width
    }
}

Select the UIImageView in InterfaceBuilder and change the class from UIImageView to the custom RoundedImageView:

Set Clip to Bounds to true (or the pic will extend beyond the circle):

It should now round itself right there in InterfaceBuilder, which is pretty nifty. Be sure to set the width and height to the same values or it'll be shaped like a zeppelin!

回复收藏 0 原文

回心转意 2024-08-21 07:59:30

无需图形调用。只需将角半径设置为宽度/2。这可以在任何视觉对象（即 UI 元素）上完成

回复收藏 0 原文

国产ˉ祖宗 2024-08-21 07:59:30

一个简洁、干净且优雅的解决方案是创建一个名为 RoundedUIView 的类，并在 Xcode 的 Identity Inspector 中选择它作为 UIView 元素的自定义类，如所附屏幕截图所示。

import UIKit

@IBDesignable public class RoundedUIView: UIView {

    override public func layoutSubviews() {
        super.layoutSubviews()

        self.layer.cornerRadius = self.frame.width / 2;
        self.layer.masksToBounds = true
    }
}

我需要在白色背景的各种屏幕上显示多个彩色图标，因为应用程序本身具有绿色主题。因此，我将 UIImgeView 放在 RoundedUIView 之上，使它们看起来像这样：

A neat, clean and elegant solution is to make a class called RoundedUIView and select it as your UIView element's custom class in Xcode's Identity Inspector like shown in the attached screenshot.

import UIKit

@IBDesignable public class RoundedUIView: UIView {

    override public func layoutSubviews() {
        super.layoutSubviews()

        self.layer.cornerRadius = self.frame.width / 2;
        self.layer.masksToBounds = true
    }
}

I needed to display multiple coloured icons on various screens on white background since the app itself has green theme. So I put my UIImgeView on top of RoundedUIView to make them look like this:

回复收藏 0 原文