リングの中心点の周りに円形のボタンをプロットするにはどうすればよいですか?

ルーク・イレトン

このようなリングに円形のボタンをプロットしようとしています。

ここに画像の説明を入力してください

私は6つのUIボタンを持っており、それらはすべて360度の角半径を持​​っています。私がSwiftでやろうとしているのは、上の画像のように中央のボタン/ポイントの周りに均等にプロットすることです。各円は、隣接する円から等間隔に配置されます。この機能を実現するための最良の方法は何ですか?ベジェ曲線を作成してから、数学を使用してその曲線の周りにボタンをプロットする必要がありますか、それとも別の方法を提案しますか?

ちなみに、私はいかなる種類の放射状メニューも探していません。アニメーションは必要ありません。既存のUIボタンを上記の形式でプロットしようとしています。

ありがとう!

バカワマ

数学(三角法)を使用して中央のボタンからの水平方向と垂直方向のオフセットを計算してから、レイアウトアンカーを使用してボタンを配置することをお勧めします。

これは自己完結型の例です:

class ViewController: UIViewController {

    func createButton(size: CGFloat) -> UIButton {
        let button = UIButton(type: .custom)
        button.backgroundColor = .red
        button.translatesAutoresizingMaskIntoConstraints = false
        button.widthAnchor.constraint(equalToConstant: size).isActive = true
        button.heightAnchor.constraint(equalToConstant: size).isActive = true
        button.layer.cornerRadius = size / 2

        return button
    }

    func setUpButtons(count: Int, around center: UIView, radius: CGFloat) {
        // compute angular separation of each button
        let degrees = 360 / CGFloat(count)

        for i in 0 ..< count {
            let button = createButton(size: 50)
            self.view.addSubview(button)

            // use trig to compute offsets from center button
            let hOffset = radius * cos(CGFloat(i) * degrees * .pi / 180)
            let vOffset = radius * sin(CGFloat(i) * degrees * .pi / 180)

            // set new button's center relative to the center button's
            // center using centerX and centerY anchors and offsets
            button.centerXAnchor.constraint(equalTo: center.centerXAnchor, constant: hOffset).isActive = true
            button.centerYAnchor.constraint(equalTo: center.centerYAnchor, constant: vOffset).isActive = true
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        let centerButton = createButton(size: 50)
        self.view.addSubview(centerButton)

        // use anchors to place center button in the center of the screen
        centerButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        centerButton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true

        setUpButtons(count: 6, around: centerButton, radius: 100)
    }

}

ノート:

  • 中央のボタンが必要ない場合は、周りにボタンを設定するだけself.viewです。

    setupButtons(count: 6, around: self.view, radius: 100)
    

    または任意のポイントの周り:

    let point = CGPoint(x: 180, y: 300)
    let centerView = UIView(frame: CGRect(origin: point, size: CGSize.zero))
    self.view.addSubview(centerView)
    setUpButtons(count: 6, around: centerView, radius: 140)
    
  • UIViewポイントの代わりにを中心として使用すると、動的に移動できUIView、ボタンが追従するため、より柔軟になります。

ここでは、シミュレーターで実行されています。

シミュレータで実行されているデモ

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ボタンの中心点を要素の左側ではなく中央に表示するにはどうすればよいですか?

分類Dev

Swiftでマップピンの周りに円を追加するにはどうすればよいですか?

分類Dev

ScaleTransformを使用して任意の中心点にスケーリングするにはどうすればよいですか?

分類Dev

「i」の周りの円を完全に円形にするにはどうすればよいですか?

分類Dev

円形のUIViewの周りに湾曲したプログレスバーを作成するにはどうすればよいですか?

分類Dev

直径3xpの円形のjavafxボタンを作成するにはどうすればよいですか?

分類Dev

データの中心点の周りに2つの円をプロットします

分類Dev

PNG画像から円形のボタンを作成するにはどうすればよいですか?

分類Dev

ポリゴンの周りにフィットする円を作成するにはどうすればよいですか?

分類Dev

Matlabで円筒形の3Dコンタープロットを作成するにはどうすればよいですか?

分類Dev

散布図上の点の周りにドーナツグラフをプロットするにはどうすればよいですか?

分類Dev

HTML5マップエリアの中心点を取得するにはどうすればよいですか?

分類Dev

Rの円形プロットに分割を追加するにはどうすればよいですか?

分類Dev

点の周りのグリッドに「ひし形」の形を描くにはどうすればよいですか

分類Dev

Flutterのボタンの周りに影を追加するにはどうすればよいですか?

分類Dev

divタグの周りにタグをラップするにはどうすればよいですか?

分類Dev

次のコードに関連するプログラムのリセットボタンを作成するにはどうすればよいですか?

分類Dev

cgpointの配列から中心点を取得するにはどうすればよいですか?

分類Dev

Matplotlibを使用して、すべての画像プロットの周りに中心軸を配置するにはどうすればよいですか?

分類Dev

PythonでのDiscordボットのプログラミング-ボットをより速く実行するにはどうすればよいですか?

分類Dev

アンドロイドスタジオのタブ付きアクティビティテンプレートから円形のピンクのメールボックスアイコンを削除するにはどうすればよいですか?

分類Dev

tkinterのボタンクリックでプログレスバーをインクリメントするにはどうすればよいですか?

分類Dev

gridViewセルの中心点を取得するにはどうすればよいですか?

分類Dev

PythonでのDiscordボットのプログラミング-ボットに画像を繰り返させるにはどうすればよいですか?

分類Dev

中心の円の上部から始めて、中心の円の周りにx個の円を描くにはどうすればよいですか?

分類Dev

数字の周りに静的ボタンを作成するにはどうすればよいですか?

分類Dev

マトリックスの周りにミラーリングされたパディングを追加するにはどうすればよいですか?

分類Dev

トリミングされた円形のボタン画像をAndroidのドローアブルフォルダに追加するにはどうすればよいですか?

分類Dev

パンダのデータを使用して円グラフグラフをプロットするにはどうすればよいですか

Related 関連記事

  1. 1

    ボタンの中心点を要素の左側ではなく中央に表示するにはどうすればよいですか?

  2. 2

    Swiftでマップピンの周りに円を追加するにはどうすればよいですか?

  3. 3

    ScaleTransformを使用して任意の中心点にスケーリングするにはどうすればよいですか?

  4. 4

    「i」の周りの円を完全に円形にするにはどうすればよいですか?

  5. 5

    円形のUIViewの周りに湾曲したプログレスバーを作成するにはどうすればよいですか?

  6. 6

    直径3xpの円形のjavafxボタンを作成するにはどうすればよいですか?

  7. 7

    データの中心点の周りに2つの円をプロットします

  8. 8

    PNG画像から円形のボタンを作成するにはどうすればよいですか?

  9. 9

    ポリゴンの周りにフィットする円を作成するにはどうすればよいですか?

  10. 10

    Matlabで円筒形の3Dコンタープロットを作成するにはどうすればよいですか?

  11. 11

    散布図上の点の周りにドーナツグラフをプロットするにはどうすればよいですか?

  12. 12

    HTML5マップエリアの中心点を取得するにはどうすればよいですか?

  13. 13

    Rの円形プロットに分割を追加するにはどうすればよいですか?

  14. 14

    点の周りのグリッドに「ひし形」の形を描くにはどうすればよいですか

  15. 15

    Flutterのボタンの周りに影を追加するにはどうすればよいですか?

  16. 16

    divタグの周りにタグをラップするにはどうすればよいですか?

  17. 17

    次のコードに関連するプログラムのリセットボタンを作成するにはどうすればよいですか?

  18. 18

    cgpointの配列から中心点を取得するにはどうすればよいですか?

  19. 19

    Matplotlibを使用して、すべての画像プロットの周りに中心軸を配置するにはどうすればよいですか?

  20. 20

    PythonでのDiscordボットのプログラミング-ボットをより速く実行するにはどうすればよいですか?

  21. 21

    アンドロイドスタジオのタブ付きアクティビティテンプレートから円形のピンクのメールボックスアイコンを削除するにはどうすればよいですか?

  22. 22

    tkinterのボタンクリックでプログレスバーをインクリメントするにはどうすればよいですか?

  23. 23

    gridViewセルの中心点を取得するにはどうすればよいですか?

  24. 24

    PythonでのDiscordボットのプログラミング-ボットに画像を繰り返させるにはどうすればよいですか?

  25. 25

    中心の円の上部から始めて、中心の円の周りにx個の円を描くにはどうすればよいですか?

  26. 26

    数字の周りに静的ボタンを作成するにはどうすればよいですか?

  27. 27

    マトリックスの周りにミラーリングされたパディングを追加するにはどうすればよいですか?

  28. 28

    トリミングされた円形のボタン画像をAndroidのドローアブルフォルダに追加するにはどうすればよいですか?

  29. 29

    パンダのデータを使用して円グラフグラフをプロットするにはどうすればよいですか

ホットタグ

アーカイブ