問題描述
(Xcode 11，斯威夫特)
(Xcode 11, Swift)
作為 iOS 和 Autolayout 的新手，我正在努力實現一個相當簡單的 (恕我直言) 視圖，該視圖顯示 [垂直] 項目列表.唯一的問題是項目是動態決定的，每個項目都可以是文本或圖像(其中任何一個都可能相當大，因此需要滾動).WebView 不是一個選項，因此必須在本地實現.
Being a newbie to iOS and Autolayout, I'm struggling with implementing a fairly simple (IMHO) view which displays a [vertical] list of items. The only problem is that items are decided dynamically and each of them could be either text or image (where either of those could be fairly large so scrolling would be required). WebView is not an option, so it has to be implemented natively.
我是這樣理解這個過程的:
This is how I understand the process:
- 在 IB 中創建一個 UIScrollView 并將其調整為外框的大小.
- 將容器視圖作為 UIScrollView 的子視圖(同樣，在 IB 中)并將其大小設置為相同.
- 設置兩個寬度相等的約束
- 在運行時，使用 UILabels/UIImageViews 填充容器視圖，并以編程方式設置約束以確保正確布局.
- 告訴"滾動視圖關于子視圖的高度，以使其管理其滾動.
這是正確的方法嗎?它似乎對我不起作用(對于一個將非常高的圖像動態添加到容器視圖的玩具示例 - 我無法讓滾動工作).在上述過程中執行最后一步的正確方法是什么 - 只需將滾動視圖的 contentSize 強制為填充容器視圖的大小(它似乎對我不起作用).任何幫助將不勝感激.
Is this the right approach? It doesn't seem to work for me (for a toy example of dynamically adding a very tall image to a container view - I cannot get the scrolling to work). What would be the proper way to do the last step in the process above - just force the contentSize of the scrollview to the size of the populated container view (it doesn't seem to work for me). Any help would be appreciated.
推薦答案
在運行時向滾動視圖添加多個元素時，您可能會發現使用 UIStackView 更容易...如果設置正確，它會隨著每個添加的對象自動增加高度.
When adding multiple elements to a scroll view at run-time, you may find it much easier to use a UIStackView... when setup properly, it will automatically grow in height with each added object.
舉個簡單的例子……
1) 首先添加一個 UIScrollView (我給它一個藍色背景以便于查看).將其在所有 4 個方面都限制為零:
1) Start by adding a UIScrollView (I gave it a blue background to make it easier to see). Constrain it to Zero on all 4 sides:
請注意，我們看到紅色圓圈"表示缺少/沖突的約束.暫時忽略它.
Note that we see the "red circle" indicating missing / conflicting constraints. Ignore that for now.
2) 在滾動視圖中添加一個 UIView 作為內容視圖"(我給它一個 systemYellow 背景以便于查看).在內容布局指南的所有 4 個方面將其限制為零——這將(最終)定義滾動視圖的內容大小.還要將其限制為等寬和等高框架布局指南:
2) Add a UIView as a "content view" to the scroll view (I gave it a systemYellow background to make it easier to see). Constrain it to Zero on all 4 sides to the Content Layout Guide -- this will (eventually) define the scroll view's content size. Also constrain it equal width and equal height to the Frame Layout Guide:
重要步驟: 選擇高度約束，然后在 Size Inspector 窗格中選擇 Placeholder - Remove at build time 復選框.這將在設計時滿足 IB 中的自動布局，但將允許該視圖的高度根據需要縮小/增長.
Important Step: Select the Height constraint, and in the Size Inspector pane select the Placeholder - Remove at build time checkbox. This will satisfy auto-layout in IB during design time, but will allow the height of that view to shrink / grow as necessary.
3) 添加一個垂直的 UIStackView 到內容視圖".將其在所有 4 個面上都約束為零.將其屬性配置為Fill/Fill/8(如下圖):
3) Add a Vertical UIStackView to the "content view". Constrain it to Zero on all 4 sides. Configure its properties to Fill / Fill / 8 (as shown below):
4) 在視圖控制器類中添加一個 @IBOutlet 連接到堆棧視圖.現在，在運行時，當您將 UI 元素添加到堆棧視圖時，您的所有可滾動性"都將由自動布局處理.
4) Add an @IBOutlet connection to the stack view in your view controller class. Now, at run-time, as you add UI elements to the stack view, all of your "scrollability" will be handled by auto-layout.
這是一個示例類:
class DynaScrollViewController: UIViewController {
@IBOutlet var theStackView: UIStackView!
override func viewDidLoad() {
super.viewDidLoad()
// local var so we can reuse it
var theLabel = UILabel()
var theImageView = UIImageView()
// create a new label
theLabel = UILabel()
// this gets set to false when the label is added to a stack view,
// but good to get in the habit of setting it
theLabel.translatesAutoresizingMaskIntoConstraints = false
// multi-line
theLabel.numberOfLines = 0
// cyan background to make it easy to see
theLabel.backgroundColor = .cyan
// add 9 lines of text to the label
theLabel.text = (1...9).map({ "Line ($0)" }).joined(separator: "
")
// add it to the stack view
theStackView.addArrangedSubview(theLabel)
// add another label
theLabel = UILabel()
// multi-line
theLabel.numberOfLines = 0
// yellow background to make it easy to see
theLabel.backgroundColor = .yellow
// add 5 lines of text to the label
theLabel.text = (1...5).map({ "Line ($0)" }).joined(separator: "
")
// add it to the stack view
theStackView.addArrangedSubview(theLabel)
// create a new UIImageView
theImageView = UIImageView()
// this gets set to false when the label is added to a stack view,
// but good to get in the habit of setting it
theImageView.translatesAutoresizingMaskIntoConstraints = false
// load an image for it - I have one named background
if let img = UIImage(named: "background") {
theImageView.image = img
}
// let's give the image view a 4:3 width:height ratio
theImageView.widthAnchor.constraint(equalTo: theImageView.heightAnchor, multiplier: 4.0/3.0).isActive = true
// add it to the stack view
theStackView.addArrangedSubview(theImageView)
// add another label
theLabel = UILabel()
// multi-line
theLabel.numberOfLines = 0
// yellow background to make it easy to see
theLabel.backgroundColor = .green
// add 2 lines of text to the label
theLabel.text = (1...2).map({ "Line ($0)" }).joined(separator: "
")
// add it to the stack view
theStackView.addArrangedSubview(theLabel)
// add another UIImageView
theImageView = UIImageView()
// this gets set to false when the label is added to a stack view,
// but good to get in the habit of setting it
theImageView.translatesAutoresizingMaskIntoConstraints = false
// load a different image for it - I have one named AquariumBG
if let img = UIImage(named: "AquariumBG") {
theImageView.image = img
}
// let's give this image view a 1:1 width:height ratio
theImageView.heightAnchor.constraint(equalTo: theImageView.widthAnchor, multiplier: 1.0).isActive = true
// add it to the stack view
theStackView.addArrangedSubview(theImageView)
}
}
如果已遵循這些步驟，您應該會得到以下輸出:
If the steps have been followed, you should get this output:
并且，在滾動到底部之后:
and, after scrolling to the bottom:
這篇關于具有動態大小內容的 UIScrollView的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！