web-dev-qa-db-ja.com

プログラムでサブビューをUIStackViewに追加します

ホームアメニティ（タオル、Wi-Fi、ランドリーなど）を表す一連のアイコンを表示するテーブルビューセルを実装しようとしています。セルには多数の設備が表示される可能性があります（家の数によって異なります）。最大3つを表示し、3つ以上ある場合はセルをクリックしてさらに表示できることを示します。これが（Airbnbのアプリからの）どのように見えるべきかです：

enter image description here

テーブルビューセルのUIStackViewにUIImageViewsを動的に追加することでこれを実行しようとしています。配置を「塗りつぶし」に設定し、分布を「等間隔」に設定したUIStackViewを使用しています。これは、スタックビューにいくつ追加しても、アイコンの間隔が均等になるという考えです。

ストーリーボードでスタックビューを設定しました。コンテンツビューの上部、下部、左、および右マージンに制約があるため、テーブルビューセルをマージンまで埋めます。

以下は、UIImageViewsをセルに動的に追加するために使用しているコードです。注amenitiesは、画像アセットフォルダー内のアイコンの名前と同じ文字列の配列です。

        cell.stackView.backgroundColor = UIColor.greenColor()
        var i = 0
        while (i < amenities.count && i < 4) {
            if (i < 3) {
                let imageView = UIImageView(image: UIImage(named: amenities[i]))
                imageView.contentMode = .ScaleAspectFit
                imageView.translatesAutoresizingMaskIntoConstraints = false
                imageView.backgroundColor = UIColor.blueColor()

                // Add size constraints to the image view
                let widthCst = NSLayoutConstraint(item: imageView, attribute: NSLayoutAttribute.Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 50)
                imageView.addConstraint(widthCst)

                // Add image view to stack view
                cell.stackView.addSubview(imageView)
            } else {
                // Add a label to the stack view if there are more than three amenities
                let label = UILabel()
                label.text = "\(amens.count - i) more"
                label.textAlignment = NSTextAlignment.Left
                cell.stackView.addSubview(label)
            }
            i++
        }

画像ビューの背景は青で、スタックビューの背景色は緑です。これは、家に3つの設備がある場合の結果です。

enter image description here

すべての画像ビューが画面の左側で互いに重なり合っているように見えます。また、スタックビューがコンテンツビューの余白に固定されている場合でも、セルのコンテンツビューを上から下に塗りつぶします。緑が見えないため、スタックビューがセルの余白に固定されたままになっていないようです。

ここで何が問題なのか考えてみませんか？

iosswiftuistackview
9
kcstricks

ダンがコメントで述べたように、addArrangedSubviewを使用して、UIStackViewによって自動的にレイアウトされるサブビューを追加します。

ただし、UIStackViewのarrangedSubviews配列からビューを削除すると、それはまだサブビューになります。 UIStackViewドキュメントから：

スタックビューは、そのarrangedSubviewsプロパティが常にそのsubviewsプロパティのサブセットであることを保証します。具体的には、スタックビューは次のルールを適用します。

•スタックビューがそのarrangedSubviews配列にビューを追加するとき、まだ追加されていない場合は、そのビューもサブビューとして追加します。

•サブビューがスタックビューから削除されると、スタックビューはそのサブビューもarrangedSubviews配列から削除します。

•arrangedSubviews配列からビューを削除しても、サブビューとしては削除されません。スタックビューはビューのサイズと位置を管理しなくなりましたが、ビューは引き続きビュー階層の一部であり、表示されている場合は画面にレンダリングされます。

ドキュメントから始めることは常に良い考えです。

25
Alex Popov