我试图将设计好的表格单元放到表格视图中,该表格单元应该显示艺术家的歌曲,专辑图片以及播放按钮,但是我无法以正确的方式获得布局我想要的。
当前应用布局的屏幕截图:
我希望所有播放按钮都平移到表格视图的右侧,但似乎无视我在表格视图中施加的约束并且超出范围。我还希望标签具有多余的空间(如下图所示),以便在整个单元格中都保持一定的空间,以便“播放”按钮可以位于表格视图单元格的右侧。
当前表格视图单元格:
这是我的视图控制器布局和约束的图片。让我知道我有什么可以做和改变的。谢谢。
视图控制器布局:
答案 0 :(得分:0)
尝试以编程方式执行此操作,在本示例中,我将numberOfRowsInSection设置为返回20,并在UITableViewCell类中设置对象:
let containerViw: UIView = {
let myView = UIView()
myView.translatesAutoresizingMaskIntoConstraints = false
myView.heightAnchor.constraint(equalToConstant: 100).isActive = true
myView.widthAnchor.constraint(equalToConstant: 100).isActive = true
return myView
}()
lazy var buttonPlay: UIButton = {
let button = UIButton(type: .system)
let image = UIImage(systemName: "play.circle")
button.setBackgroundImage(image, for: .normal)
button.addTarget(self, action: #selector(handlePlay), for: .touchUpInside)
button.translatesAutoresizingMaskIntoConstraints = false
return button
}()
let dummyLabel: UILabel = {
let label = UILabel()
label.text = "Dummy Label"
label.font = .systemFont(ofSize: 16, weight: .regular)
label.textColor = .black
return label
}()
let finestraBackground: UIImageView = {
let imageView = UIImageView()
imageView.backgroundColor = .red
imageView.image = UIImage(named: "yourImage")?.withRenderingMode(.alwaysOriginal)
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.heightAnchor.constraint(equalToConstant: 100).isActive = true
imageView.widthAnchor.constraint(equalToConstant: 100).isActive = true
imageView.layer.cornerRadius = 50
imageView.layer.masksToBounds = true
return imageView
}()
现在在UITableViewCell.CellStyle中设置stackView并添加约束:
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
backgroundColor = .white
containerViw.addSubview(buttonPlay)
buttonPlay.heightAnchor.constraint(equalToConstant: 50).isActive = true
buttonPlay.widthAnchor.constraint(equalToConstant: 50).isActive = true
buttonPlay.centerYAnchor.constraint(equalTo: containerViw.centerYAnchor).isActive = true
buttonPlay.centerXAnchor.constraint(equalTo: containerViw.centerXAnchor).isActive = true
let stackView = UIStackView(arrangedSubviews: [finestraBackground, dummyLabel, containerViw])
stackView.distribution = .fillProportionally
stackView.spacing = 10
stackView.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(stackView)
stackView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10).isActive = true
stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10).isActive = true
stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10).isActive = true
stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -10).isActive = true
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
最后一步,设置播放功能:
@objc fileprivate func handlePlay() {
print("Play...")
}
这是结果:
完整代码:
class TableViewCellCustom: UITableViewCell {
let containerViw: UIView = {
let myView = UIView()
myView.translatesAutoresizingMaskIntoConstraints = false
myView.heightAnchor.constraint(equalToConstant: 100).isActive = true
myView.widthAnchor.constraint(equalToConstant: 100).isActive = true
return myView
}()
lazy var buttonPlay: UIButton = {
let button = UIButton(type: .system)
let image = UIImage(systemName: "play.circle")
button.setBackgroundImage(image, for: .normal)
button.addTarget(self, action: #selector(handlePlay), for: .touchUpInside)
button.translatesAutoresizingMaskIntoConstraints = false
return button
}()
let dummyLabel: UILabel = {
let label = UILabel()
label.text = "Dummy Label"
label.font = .systemFont(ofSize: 16, weight: .regular)
label.textColor = .black
return label
}()
let finestraBackground: UIImageView = {
let imageView = UIImageView()
imageView.backgroundColor = .red
imageView.image = UIImage(named: "yourImage")?.withRenderingMode(.alwaysOriginal)
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.heightAnchor.constraint(equalToConstant: 100).isActive = true
imageView.widthAnchor.constraint(equalToConstant: 100).isActive = true
imageView.layer.cornerRadius = 50
imageView.layer.masksToBounds = true
return imageView
}()
@objc fileprivate func handlePlay() {
print("Play...")
}
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
backgroundColor = .white
containerViw.addSubview(buttonPlay)
buttonPlay.heightAnchor.constraint(equalToConstant: 50).isActive = true
buttonPlay.widthAnchor.constraint(equalToConstant: 50).isActive = true
buttonPlay.centerYAnchor.constraint(equalTo: containerViw.centerYAnchor).isActive = true
buttonPlay.centerXAnchor.constraint(equalTo: containerViw.centerXAnchor).isActive = true
let stackView = UIStackView(arrangedSubviews: [finestraBackground, dummyLabel, containerViw])
stackView.distribution = .fillProportionally
stackView.spacing = 10
stackView.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(stackView)
stackView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10).isActive = true
stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10).isActive = true
stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10).isActive = true
stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -10).isActive = true
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
更新,以编程方式创建带顶视图的tableView示例,而没有故事板
import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
let cellId = "cellId"
let tableView = UITableView()
let containerView = UIView()
let dummyImageView = UIImageView()
let artistLabel = UILabel()
override func viewDidLoad() {
super.viewDidLoad()
artistLabel.text = "Artist Name\nArtist Song Name"
artistLabel.font = .systemFont(ofSize: 16, weight: .semibold)
artistLabel.numberOfLines = 0
artistLabel.textColor = .white
dummyImageView.image = UIImage(named: "yourImage")
dummyImageView.contentMode = .scaleAspectFill
dummyImageView.clipsToBounds = true
dummyImageView.translatesAutoresizingMaskIntoConstraints = false
dummyImageView.widthAnchor.constraint(equalToConstant: 150).isActive = true
dummyImageView.heightAnchor.constraint(equalToConstant: 150).isActive = true
dummyImageView.layer.cornerRadius = 75
containerView.backgroundColor = .darkGray
containerView.translatesAutoresizingMaskIntoConstraints = false
tableView.delegate = self
tableView.dataSource = self
tableView.translatesAutoresizingMaskIntoConstraints = false
tableView.register(TableViewCellCustom.self, forCellReuseIdentifier: cellId)
view.addSubview(containerView)
containerView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
containerView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
containerView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
containerView.heightAnchor.constraint(equalToConstant: 200).isActive = true
let stackView = UIStackView(arrangedSubviews: [dummyImageView, artistLabel])
stackView.axis = .horizontal
stackView.spacing = 10
stackView.distribution = .fillProportionally
stackView.translatesAutoresizingMaskIntoConstraints = false
containerView.addSubview(stackView)
stackView.heightAnchor.constraint(equalToConstant: 150).isActive = true
stackView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -20).isActive = true
stackView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 10).isActive = true
stackView.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true
view.addSubview(tableView)
tableView.topAnchor.constraint(equalTo: containerView.bottomAnchor).isActive = true
tableView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
tableView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 120
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 20
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: cellId, for: indexPath) as! TableViewCellCustom
return cell
}
}
在场景委托中激活导航控制器,如下所示:
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
guard let windowScene = (scene as? UIWindowScene) else { return }
window = UIWindow(windowScene: windowScene)
// let controller = UINavigationController(rootViewController: ViewController())//if you want navigation controller uncomment that
let controller = ViewController() // if you want navigation Controller COMMENT That
window?.makeKeyAndVisible()
window?.rootViewController = controller
}
或者您可以使用didSelecrRowAt方法: 只需在TableViewController中添加这两行:
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
print("Play...", indexPath.row)
}
答案 1 :(得分:0)
无需代码即可实现。
只需将“播放按钮”的Content Compression Resistance Priority
设置为1000,将Content Hugging Priority
设置为高于“歌曲名称”标签,例如按钮251和标签250。
答案 2 :(得分:0)
如我所见,您给错误的约束条件不正确,您可以更改播放按钮的约束条件,方法是尾随到超级视图,然后垂直将其卡特向超级视图。然后从按钮中删除引导线(如果有的话)将使其位于单元格视图的右侧。
然后将图像视图作为顶部和底部,并赋予SuperView约束,并使superView或cellView的高度恒定。
然后使标签领先约束到ImageView,并在图像view / superView中垂直居中。并给位于按钮后面的标签一个固定触点(仅10个)。您就可以了。
答案 3 :(得分:-1)
我认为这是因为您已将PlayButton放在StackView中。 StackView自动并排放置您的组件。 尝试将“播放按钮”放到StackView之外,并为stackView和PlayButton添加约束。