web-dev-qa-db-ja.com

円形UIViewの作成方法

円であるUIViewまたはUIImageViewを作成したい。または、スライダーを使用するサイズと、ピッカービューの色を変更できる円。

iphoneuiviewuiimageviewgeometryquartz-core
52
Jab

少なくとも、任意のサイズの円を描くためのショートカットを紹介できます。 OpenGLもCore Graphicsの図面も必要ありません。

QuartzCoreフレームワークをインポートして、UIViewまたはUIImageViewの。cornerRadiusプロパティにアクセスします。

#import <QuartzCore/QuartzCore.h>

また、プロジェクトのFrameworksフォルダーに手動で追加します。

このメソッドをView Controllerまたは必要な場所に追加します。

-(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がサブビューとしてviewに追加されていることを前提としています。確認できるように、backgroundColorセットが必要です。

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

これはUIImageViewsを処理しますが、任意のUIViewに一般化できます。

注： iOS 7以降、clipToBoundsはYESにする必要があります。

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

誰かがSwift以下と同等のものを探している場合は、答えです（Xcode7.2）：

（これが機能するには、高さと幅が等しくなければなりません。）

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

enter image description here

22
पवन

グラフィックス呼び出しの必要はありません。角の半径を幅/ 2に設定するだけです。これは、任意のビジュアルオブジェクト、つまりUI要素で実行できます。

13
infiniteLoop

いくつかのコメントで述べたように、@ 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に変更します。

enter image description here

Clip to Boundsをtrueに設定します（または、写真が円を越えて広がります）。

enter image description here

InterfaceBuilderですぐに丸くなるはずです。幅と高さを必ず同じ値に設定してください。そうしないと、ツェッペリン型の形状になります。

enter image description here

4
James Toomey

透明なUIView（背景色アルファ0）を作成し、次にdrawRect：でCoreGraphics呼び出しを使用して円を描画する必要があります。ビューのレイヤーを編集して、cornerRadiusを指定することもできます。

3
Ben Gottlieb