UIViewを背景としてカスタマイズする

Question

UIViewを使用して暗い灰色の曲線をデザインとして作成したいと考えています。

しかし、私はcornerRadiusを設定しようとすると間違っていると思うし、cornerRadiusはコーナーのためだけだと知っています。たぶん私は実際に別の方法があり、そこに行く簡単な方法があるかどうかを知りたいと思っていることを認識していません。私がこれをやっているところは、StoryBoardにUIViewを作成し、UIViewのサブクラスであるCocoa Touch Classを作成し、カスタムクラスを設定してその特性を継承するようにしました。

ここにはどんな提案もあります。曲線はあなたがcornerRadiusを使用して達成することができるようになります何かされていないことを

Answer 1

。あらかじめレンダリングしたUIImageまたはカスタムを描いたCAShapeLayerの2つの簡単な方法があります。

オプション1：UIImageの背景

あなたはその後、中心の背景として設定し、お好みの画像エディタで背景画像を作成することができます。

UIViewControllerの viewDidLoad()にすることを入れて

// create the UIImageView to display the image 
let backgroundImageView = UIImageView() 
backgroundImageView.image = UIImage(named: "background") 
backgroundImageView.translatesAutoresizingMaskIntoConstraints = false 
self.view.addSubview(backgroundImageView) 

// create constraints to position the UIImageView and apply them 
let horizontalConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0) 
let verticalConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.top, multiplier: 1, constant: 0) 
view.addConstraints([horizontalConstraint, verticalConstraint]) 

あなたは背景を持っていたい。

対象とする最大の画面に合わせて背景画像を作成し、アプリのアセットに追加する必要があります。サイズに関する制約を設定することで、すべての画面で必要なように設定することができます。

この方法の利点は、背景をより精巧なものにしたい場合、画像を編集することができることです。

オプション2：あなたの特定のケースではCAShapeLayer背景

（灰色の曲線）は、ベクターでかなり簡単にそれを行うことができます。

// decide on size of ellipse and how to center it 
let ellipseWidth:CGFloat = view.frame.width * 7 
let ellipseHeight:CGFloat = view.frame.height * 3 
let ellipseTop:CGFloat = 100 
let ellipseLeft:CGFloat = -ellipseWidth/2 + view.frame.width/2 

// create the ellipse path 
let ellipseOrigin = CGPoint(x:ellipseLeft,y:ellipseTop) 
let ellipseSize = CGSize(width: ellipseWidth, height: ellipseHeight) 
let ellipsePath = CGPath(ellipseIn: CGRect(origin: ellipseOrigin, size: ellipseSize), transform: nil) 

// create the shape layer 
let shapeLayer = CAShapeLayer() 
shapeLayer.frame = view.frame 
shapeLayer.fillColor = UIColor.darkGray.cgColor 
shapeLayer.path = ellipsePath 
view.layer.addSublayer(shapeLayer) 

は、あなたがの割合を試してみる必要がある場合があります楕円を見て右に見えるようにします。 7x3はあなたの例にかなり近いようです。

他の図形、線、グラデーションなどを追加したり、UIBezierPathを使用して正確な曲線を得ることができます。これはあなたのファイルの先頭に

import CoreGraphics 

をする必要があります動作するために

も注意してください。