59606
swift公式のチュートリアルを進めていますが、一向に解決できない部分があるので質問させていただきます。  
以下のURLに書かれているように、UIButtonを作るチュートリアルです。

[Start Developing iOS Apps (Swift): Implement a Custom
Control](https://developer.apple.com/library/archive/referencelibrary/GettingStarted/DevelopiOSAppsSwift/ImplementingACustomControl.html#//apple_ref/doc/uid/TP40015214-CH19-SW1)

以下が私の書いているソースコードですが、Runすると通常赤い正方形のボタンが表示されるところが、長方形のボタンになってしまいます。

```

    import UIKit
    
    class RatingControl: UIStackView {
    
    //MARK: -Initialization
    
        override init(frame: CGRect){
            //プログラムでviewを初期化
            //frameがinitializer、スーパークラスの初期化子
    
            super.init(frame: frame)
            setupButtons()
        }
    
        required init(coder: NSCoder){
            //storyboardでviewをロードできるようにする
            //coderがinitializer、スーパークラスの初期化子
    
            super.init(coder: coder)
            setupButtons()
        }
    
        //MARK: -Private Methods
    
        private func setupButtons() {
            let button = UIButton()
    
            button.backgroundColor = UIColor.red
            //ボタンの色
    
            button.translatesAutoresizingMaskIntoConstraints = false
            //厳密には必要ないが、Auto Layoutを使う時は自動生成された制約を無効にしておくほうが良い
            //stackviewにviewを追加すると自動的にfalseになっている
    
            button.heightAnchor.constraint(equalToConstant: 44).isActive = true
            button.widthAnchor.constraint(equalToConstant: 44).isActive = true
            //ボタンの高さと幅の制約を決める
    
            addArrangedSubview(button)
            //ボタンを表示させる
        }
    
    }
    
```

UIStackViewのサブクラス（Rating Control)を作成し、storyboardの方でhorizontal Stack
Viewと接続しています。  
おそらく

```

    button.translatesAutoresizingMaskIntoConstraints = false
        button.heightAnchor.constraint(equalToConstant: 44.0).isActive = true
        button.widthAnchor.constraint(equalToConstant: 44.0).isActive = true
    
```

の部分に問題があると考えていますが、どうなのでしょうか…。  
他サイトでほとんど同じような質問がされていても回答がなかったり、海外サイトでの質問と回答も試しましたがダメでした。

[![画像の説明をここに入力](https://i.stack.imgur.com/HL7MM.jpg)](https://i.stack.imgur.com/HL7MM.jpg)
CC BY-SA 4.0
2019-10-09T12:24:30.960
59601
2019-10-09T18:19:30.720
2019-10-09T16:44:07.570
3060
36035
question
swift xcode
チュートリアルのheightAnchor.constraintとwidthAnchor.constraintについて
結論から言うと、

**チュートリアルの表示例が間違っている**

と言うことです。そこまでのチュートリアルを順に進めて、説明にあるようにコードを記載していくと、あなたのご質問にあるような表示になります。チュートリアルの表示例は間違いです。

(あるいは、説明のどこにも書いていない何かをしないと同じ表示は実現できない…。)

* * *

そもそも、`UIStackView`と言うのは、「子ビューたちをうまく並べて親(`UIStackView`)全体をうまく埋める」ためのものです。それを実現するために、追加される子ビュー側に強力な制約(constraint)を付けていきます。設定によっては、そのために子ビュー側の元の制約(`button.widthAnchor.constraint(equalToConstant:
44.0).isActive = true`とか)が無視されてしまうこともあります。

子ビューが1個だけだと、それ1個だけで親ビュー全体を埋めようとしますから、あなたの画面のような表示になります。

* * *

とりあえず、現時点のコードに最小限の変更を施してチュートリアルの表示例のような画面を作りたければ、次のようにして見てください。

```

        private func setupButtons() {
            //...
    
            addArrangedSubview(button)
            //ボタンを表示させる
    
            let filler = UIView(frame: .zero) //<-
            addArrangedSubview(filler)        //<-
        }
    
```

* * *

残念ながら、このチュートリアル、Apple製の公式のものであるにも関わらず、この手の破綻がちょくちょく報告されています。(章の後半、かなり先の方のコードを記載しないと表示例が間違っているどころかビルドが通らず、画面の確認自体ができない、とか。)

一部は直されていっていると思うのですが、まだまだ100%信頼しても大丈夫と言う状態ではないようです。章の途中の表示例が違う程度の場合、「また出たか」くらいの気持ちで先に進んでみてください。それでもダメでも、あまり長時間悩まずにここなんかに質問してもらった方が良いでしょう…。
CC BY-SA 4.0
2019-10-09T18:19:30.720
59606
2019-10-09T18:19:30.720
13972
59601
answer