2016-02-01 11 views
8

カスタムビューの中央に配置されたサークルの周りにオブジェクトを配置するコードを記述しましたが、サークルの周りは完全にはありません。コードのどこが間違っているのか分かりません。ここでUIViewでサークルの周りにオブジェクトを正しく設定する方法

enter image description here

コードは次のとおりです。あなたのコードは大丈夫働いている

func createObjectsAroundCircle() { 

    let center = CGPointMake(bounds.width/2 ,bounds.height/2) 
    let radius : CGFloat = 100 
    let count = 20 

    var angle = CGFloat(2 * M_PI) 
    let step = CGFloat(2 * M_PI)/CGFloat(count) 

    let circlePath = UIBezierPath(arcCenter: center, radius: radius, startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true) 

    let shapeLayer = CAShapeLayer() 
    shapeLayer.path = circlePath.CGPath 

    shapeLayer.fillColor = UIColor.clearColor().CGColor 
    shapeLayer.strokeColor = UIColor.redColor().CGColor 
    shapeLayer.lineWidth = 3.0 

    self.layer.addSublayer(shapeLayer) 

    // set objects around circle 
    for var index = 0; index < count ; index++ { 
     let x = cos(angle) * radius + center.x 
     let y = sin(angle) * radius + center.y 

     let label = UILabel() 
     label.text = "\(index)" 
     label.frame.origin.x = x 
     label.frame.origin.y = y 
     label.font = UIFont(name: "Arial", size: 20) 
     label.textColor = UIColor.blackColor() 
     label.sizeToFit() 

     self.addSubview(label) 
     angle += step 
    } 
} 
+1

ラベルフレームの原点は、左上隅です。それで、あなたのラベルのテキストは、右下の象限の外側と、左上の象限の内側に表示されます。 –

+1

一時フレームを設定した後、これらのxとyポイントをラベルの中心に設定するだけです。 – raki

+0

@PetahChristianiありがとう、本当に忘れました。 –

答えて

10

、単に計算ロジックが間違っています。あなたはlabel.center代わりのlabel.frame.origin、または

let label = UILabel() 
label.text = "\(index)" 
label.font = UIFont(name: "Arial", size: 20) 
label.textColor = UIColor.blackColor() 
label.sizeToFit() 
label.frame.origin.x = x - label.frame.midX 
label.frame.origin.y = y - label.frame.midY 

フレームを変更したり、ラベルのcenterを設定する前にsizeToFit()に覚えておいてくださいを設定してみてください。がんばろう!

+1

編集のおかげで、迅速に 'midX'と' midY'について知りませんでした。 –

+0

@Fahri Azimov、@ Leo Dabusありがとうございました:) –

+1

https://developer.apple.com/library/prerelease/ios/samplecode/CircleLayout/Introduction/Intro.html サンプルコードをダウンロードしてご覧ください。 –

関連する問題