哪些限制会阻止我的 UIView 相互堆叠?
What constraints would prevent my UIViews from stacking on top of each other?
我的 UIView 像这样相互堆叠:
每个 UIView 都在 wordContainer
中。每个 UIView 内部都有两个 UILabel
我用两个子 UILabel 创建了每个单独的 UIView:
var labels = [UIView]()
for word in words {
let wordLabel = UILabel(frame: CGRectZero)
wordLabel.text = word.valueForKey("sanskrit") as? String
wordLabel.numberOfLines = 0
wordLabel.sizeToFit()
wordLabel.translatesAutoresizingMaskIntoConstraints = false
let englishWordLabel = UILabel(frame: CGRectMake(wordLabel.frame.width + 10,0,0,0))
englishWordLabel.text = word.valueForKey("english") as? String)
englishWordLabel.numberOfLines = 0
englishWordLabel.sizeToFit()
englishWordLabel.lineBreakMode = .ByWordWrapping
englishWordLabel.translatesAutoresizingMaskIntoConstraints = false
let wordView = UIView(frame: CGRectMake(0,0,self.view.frame.width,englishWordLabel.frame.height))
wordView.translatesAutoresizingMaskIntoConstraints = false
wordView.addSubview(wordLabel)
wordView.addSubview(englishWordLabel)
wordView.sizeToFit()
labels.append(wordView)
}
然后我将这个 UIView 集合添加到我的 wordContainer
。这是我想象的部分,我应该设置 NSLayoutConstraints。我的想法是,我希望它们都正确地堆叠在一起。例如,它应该是这样的:
word: definition
word: definition
word: definition
word: definition
但它看起来像这样:
我像这样将它们添加到 wordContainer
中:
let wordContainer = UIView(frame: CGRectZero)
var currentY:CGFloat = 0.0
let margin_height:CGFloat = 4.0
var height:CGFloat = 0
for view in wordViews {
var rect = view.frame
rect.origin.y = currentY
view.frame = rect
currentY += view.frame.height
height += view.frame.height
wordContainer.addSubview(view)
}
let containRect = CGRectMake(0,0,self.view.frame.width, height)
wordContainer.frame = containRect
然后我为 wordContainer
设置约束条件,这实际上允许所有单词的 space 存在,如果它们没有堆叠在一起的话:
wordContainer.bottomAnchor.constraintEqualToAnchor(cell.contentView.bottomAnchor).active = true
wordContainer.topAnchor.constraintEqualToAnchor(cell.contentView.topAnchor).active = true
我的最新想法是,也许我应该为此添加约束。我已经尝试将 NSLayoutConstraints
添加到 cell
的高度,当我这样做时,所有单词的布局都不再合适。相反,它们堆叠在一起。但这似乎是正确的方向..
为了让单元格自动调整其高度,您在 contentView 中的内容必须对 contentView 的所有 4 个边缘都有约束。
我自己刚刚用不同的单元格类型为文本、图像和嵌入式推文完成了这项工作,并且遇到了您描述的一些问题。我发现最简单的方法是在内容视图中的任何组件周围添加一个视图,然后您可以轻松地向周围的元素添加约束。
我刚刚快速浏览了一下可以证明这一点的东西,并找到了另一个 SO answer 用几张截图解释它的东西。
我今天做这个的时候参考的也是This post on Ray Wenderlich's site
在你的 UITableViewController
中,在 viewDidLoad()
中,尝试:
//set up table view cell dynamic height
tableView.rowHeight = UITableViewAutomaticDimension
在 Storyboard 中,确保使用 AutoLayout 并且单元格元素对父视图的所有约束都已设置并修复。例如,单元格的顶部文本必须定义其到 Superview 的边距并设置为一个值。
我的 UIView 像这样相互堆叠:
每个 UIView 都在 wordContainer
中。每个 UIView 内部都有两个 UILabel
我用两个子 UILabel 创建了每个单独的 UIView:
var labels = [UIView]()
for word in words {
let wordLabel = UILabel(frame: CGRectZero)
wordLabel.text = word.valueForKey("sanskrit") as? String
wordLabel.numberOfLines = 0
wordLabel.sizeToFit()
wordLabel.translatesAutoresizingMaskIntoConstraints = false
let englishWordLabel = UILabel(frame: CGRectMake(wordLabel.frame.width + 10,0,0,0))
englishWordLabel.text = word.valueForKey("english") as? String)
englishWordLabel.numberOfLines = 0
englishWordLabel.sizeToFit()
englishWordLabel.lineBreakMode = .ByWordWrapping
englishWordLabel.translatesAutoresizingMaskIntoConstraints = false
let wordView = UIView(frame: CGRectMake(0,0,self.view.frame.width,englishWordLabel.frame.height))
wordView.translatesAutoresizingMaskIntoConstraints = false
wordView.addSubview(wordLabel)
wordView.addSubview(englishWordLabel)
wordView.sizeToFit()
labels.append(wordView)
}
然后我将这个 UIView 集合添加到我的 wordContainer
。这是我想象的部分,我应该设置 NSLayoutConstraints。我的想法是,我希望它们都正确地堆叠在一起。例如,它应该是这样的:
word: definition
word: definition
word: definition
word: definition
但它看起来像这样:
我像这样将它们添加到 wordContainer
中:
let wordContainer = UIView(frame: CGRectZero)
var currentY:CGFloat = 0.0
let margin_height:CGFloat = 4.0
var height:CGFloat = 0
for view in wordViews {
var rect = view.frame
rect.origin.y = currentY
view.frame = rect
currentY += view.frame.height
height += view.frame.height
wordContainer.addSubview(view)
}
let containRect = CGRectMake(0,0,self.view.frame.width, height)
wordContainer.frame = containRect
然后我为 wordContainer
设置约束条件,这实际上允许所有单词的 space 存在,如果它们没有堆叠在一起的话:
wordContainer.bottomAnchor.constraintEqualToAnchor(cell.contentView.bottomAnchor).active = true
wordContainer.topAnchor.constraintEqualToAnchor(cell.contentView.topAnchor).active = true
我的最新想法是,也许我应该为此添加约束。我已经尝试将 NSLayoutConstraints
添加到 cell
的高度,当我这样做时,所有单词的布局都不再合适。相反,它们堆叠在一起。但这似乎是正确的方向..
为了让单元格自动调整其高度,您在 contentView 中的内容必须对 contentView 的所有 4 个边缘都有约束。
我自己刚刚用不同的单元格类型为文本、图像和嵌入式推文完成了这项工作,并且遇到了您描述的一些问题。我发现最简单的方法是在内容视图中的任何组件周围添加一个视图,然后您可以轻松地向周围的元素添加约束。
我刚刚快速浏览了一下可以证明这一点的东西,并找到了另一个 SO answer 用几张截图解释它的东西。
我今天做这个的时候参考的也是This post on Ray Wenderlich's site
在你的 UITableViewController
中,在 viewDidLoad()
中,尝试:
//set up table view cell dynamic height
tableView.rowHeight = UITableViewAutomaticDimension
在 Storyboard 中,确保使用 AutoLayout 并且单元格元素对父视图的所有约束都已设置并修复。例如,单元格的顶部文本必须定义其到 Superview 的边距并设置为一个值。