自分でデザインしたテーブルセルをテーブルビューに配置しようとしています。テーブルビューには、アーティストの曲、アルバムの写真、再生ボタンが表示されますが、レイアウトを希望どおりに正しく表示できません。それ。
現在のアプリレイアウトのスクリーンショット:
すべての再生ボタンをテーブルビューの右側にフラッシュしたいのですが、テーブルビューに設定した制約を無視して、範囲を超えているようです。また、ラベルに追加のスペース(下のリンク先の画像を参照)を追加して、セル全体にスペースを空けて、再生ボタンをテーブルビューセルの右側に配置できるようにします。
現在のテーブルビューセル:
これが私のViewControllerレイアウトとそれらに課した制約の写真です。私にできることや変更できることがあれば教えてください。ありがとう。
コントローラーレイアウトの表示:
プログラムで実行してみてください。この例では、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に次の2行を追加するだけです。
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
print("Play...", indexPath.row)
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加