Custom cell and stack-view programmatically - swift

I am creating a tableview with a custom cell programmatically. I would like to utilise a stack view with arranged subviews within the custom cell. However, all my efforts have failed. Firstly is it possible to do this?
Secondly I am placing the code after:
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: "cellId")
I am using this code to create the stack view:
let thestack: UIStackView = {
let sv = UIStackView()
sv.distribution = .fillEqually
sv.axis = .vertical
sv.spacing = 8
return sv
}()
But I can't add the arranged subviews to this in addition to which after I addsubview(thestack) and list all the constraints - none of my data shows in the custom cell. Any help would be appreciated.

Yes, it is possible. Follow like below:
class CustomTableViewCell: UITableViewCell {
let stackView: UIStackView = {
let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.spacing = 10
stackView.distribution = .fillEqually
return stackView
}()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: .default, reuseIdentifier: reuseIdentifier)
addSubview(stackView)
stackView.leftAnchor.constraint(equalTo: leftAnchor, constant: 10).isActive = true
stackView.topAnchor.constraint(equalTo: topAnchor, constant: 10).isActive = true
stackView.rightAnchor.constraint(equalTo: rightAnchor, constant: -10).isActive = true
stackView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -10).isActive = true
let redView = UIView()
redView.backgroundColor = .red
let yellowView = UIView()
yellowView.backgroundColor = .yellow
let blackView = UIView()
blackView.backgroundColor = .black
stackView.addArrangedSubview(redView)
stackView.addArrangedSubview(yellowView)
stackView.addArrangedSubview(blackView)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}

Related

Dinamically fill UITableViewCell with buttons side by side

Continuing to resolve the task of UITableViewCell, I could fix all UIButtons side by side but they are not appearing properly in executing time. Sometimes the second row mix with the third.
I tryied with cell.layoutIfNeeded() but still wrong.
let cell = tableView.dequeueReusableCell(withIdentifier: "cell") as! DetailViewCell
let array = sections[indexPath.section].filters
var hStackView = UIStackView()
var vStackView = UIStackView()
vStackView.axis = .vertical
vStackView.distribution = .fillEqually
vStackView.spacing = 12
vStackView.alignment = .top
for (index, item) in array.enumerated() {
let btn = UIButton()
btn.setTitle(item.title, for: .normal)
btn.titleLabel?.font = .systemFont(ofSize: 12)
btn.setTitleColor(.black, for: .normal)
btn.backgroundColor = UIColor(red: 220, green: 220, blue: 220)
btn.layer.cornerRadius = 15;
btn.addTarget(self, action: #selector(btnTapped(_:)), for: .touchUpInside)
btn.tag = index
if index % 2 == 0 {
hStackView = UIStackView()
hStackView.axis = .horizontal
hStackView.spacing = 12
hStackView.alignment = .fill
hStackView.distribution = .fillEqually
hStackView.addArrangedSubview(btn)
if (index + 1) == array.count {
vStackView.addArrangedSubview(hStackView)
hStackView.leadingAnchor.constraint(equalTo: vStackView.leadingAnchor).isActive = true
hStackView.widthAnchor.constraint(equalTo: vStackView.widthAnchor, multiplier: 0.5).isActive = true
}
}
else {
hStackView.addArrangedSubview(btn)
vStackView.addArrangedSubview(hStackView)
hStackView.leadingAnchor.constraint(equalTo: vStackView.leadingAnchor).isActive = true
hStackView.trailingAnchor.constraint(equalTo: vStackView.trailingAnchor).isActive = true
}
}
cell.addSubview(vStackView)
vStackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
cell.leadingAnchor.constraint(equalTo: vStackView.leadingAnchor, constant: -8),
cell.trailingAnchor.constraint(equalTo: vStackView.trailingAnchor, constant: 8),
cell.topAnchor.constraint(equalTo: vStackView.topAnchor, constant: -8),
cell.bottomAnchor.constraint(equalTo: vStackView.bottomAnchor, constant: 8)
])
cell.layoutIfNeeded()
return cell
You should look up information about dequeueReusableCell
It works somehow like this: when you get a cell in tableView(_: cellForRowAt:) from dequeueReusableCell you are provided with a ready-made cell that was used somewhere. It follows from this that all content that the cells differ in must be placed in the cell only in this method
Note, the button with a label сссс is clearly from the top cell
I would advise you to declare in your UITableViewCell subclass a method in which you put content inside and call it every time inside tableView(_:cellForRowAt:)
You can use a storyboard if you like, but if you want to do it with code, I can suggest custom UITableViewCell subclass template:
class CustomTableViewCell: UITableViewCell {
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
setupView()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupView()
}
// MARK: - Public methods
func setContent(_ content: <# ContentType #>) {
}
// MARK: - Private setup methods
private func setupView() {
makeConstraints()
}
private func makeConstraints() {
NSLayoutConstraint.activate([
])
}
}

Create custom UITableViewCell with using stack view and auto layout

I have 2 questions about constraints and auto layout:
How programmatically create a cell-like in the picture below? I didn't understand how to programmatically add auto-layout and constraints for my cell.
How to assign default Apple layout margins to the cell? (for example, left inset in default cell equal 20 pt for big screens and 16 pt for small).
My current code:
class cellWithTitleAndDetail: UITableViewCell {
// MARK: - Properties
let title = UILabel()
let detail = UILabel()
let stackView = UIStackView()
// MARK: - Override init
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
title.translatesAutoresizingMaskIntoConstraints = false
detail.translatesAutoresizingMaskIntoConstraints = false
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .horizontal
stackView.alignment = .center
stackView.distribution = .fillProportionally
// Set color
title.textColor = .white
detail.textColor = .white
// Highlight StackView
stackView.addBackground(color: .blue)
stackView.addArrangedSubview(title)
stackView.addArrangedSubview(detail)
stackView.layoutMargins = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
stackView.isLayoutMarginsRelativeArrangement = true
self.contentView.addSubview(stackView)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
}
}
Result:
Update:
Below added my new code and code from DonMag's answer.
New question: "LayoutMarginsGuide" works perfectly on iPhones with screen width that equal to 375 pt(image 375-1). But on big size screens separator appears earlier than the cell(image 414-2). How I can fix this?
New code:
// MARK: - Override init
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
// Off translatesAutoresizingMaskIntoConstraints
title.translatesAutoresizingMaskIntoConstraints = false
detail.translatesAutoresizingMaskIntoConstraints = false
stackView.translatesAutoresizingMaskIntoConstraints = false
// Setup stackView
stackView.axis = .horizontal
stackView.alignment = .center
stackView.distribution = .fill
// Hugging
title.setContentHuggingPriority(UILayoutPriority(rawValue: 750), for: .horizontal)
detail.setContentHuggingPriority(UILayoutPriority(rawValue: 250), for: .horizontal)
// Resistance
title.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 750), for: .horizontal)
detail.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 250), for: .horizontal)
// Set textAlignment
title.textAlignment = .left
detail.textAlignment = .right
// Set numberOfLines
title.numberOfLines = 0
// Highlight stackView and set colors
stackView.addBackground(color: .blue)
title.textColor = .white
detail.textColor = .white
// Add title and detail
stackView.addArrangedSubview(title)
stackView.addArrangedSubview(detail)
// Add to subview
self.contentView.addSubview(stackView)
// Get layoutMarginsGuide
let layoutMarginsGuide = contentView.layoutMarginsGuide
// Set constraints
NSLayoutConstraint.activate([
// constrain all 4 sides of the stack view to the content view's layoutMarginsGuide
stackView.topAnchor.constraint(equalTo: layoutMarginsGuide.topAnchor, constant: 0.0),
stackView.leadingAnchor.constraint(equalTo: layoutMarginsGuide.leadingAnchor, constant: 0.0),
stackView.trailingAnchor.constraint(equalTo: layoutMarginsGuide.trailingAnchor, constant: 0.0),
stackView.bottomAnchor.constraint(equalTo: layoutMarginsGuide.bottomAnchor, constant: 0.0),
])
}
You can use the Content View's layoutMarginsGuide:
// only if you want different margins than the content view's margins
//stackView.layoutMargins = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
//stackView.isLayoutMarginsRelativeArrangement = true
self.contentView.addSubview(stackView)
let g = contentView.layoutMarginsGuide
NSLayoutConstraint.activate([
// constrain all 4 sides of the stack view to the
// content view's layoutMarginsGuide
stackView.topAnchor.constraint(equalTo: g.topAnchor, constant: 0.0),
stackView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 0.0),
stackView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: 0.0),
stackView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: 0.0),
])
As a side note, it's not clear what you really want (and this would be a separate question if this doesn't provide the layout you want)...
Do you want your cells to look like "columns"
Do you want the "detail" to be right-aligned?
Might the detail label be multi-line?
Edit
Using your updated code - the only change I made is giving the labels a background color since you didn't show your stackView.addBackground(color: .blue) code:
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
// Off translatesAutoresizingMaskIntoConstraints
title.translatesAutoresizingMaskIntoConstraints = false
detail.translatesAutoresizingMaskIntoConstraints = false
stackView.translatesAutoresizingMaskIntoConstraints = false
// Setup stackView
stackView.axis = .horizontal
stackView.alignment = .center
stackView.distribution = .fill
// Hugging
title.setContentHuggingPriority(UILayoutPriority(rawValue: 750), for: .horizontal)
detail.setContentHuggingPriority(UILayoutPriority(rawValue: 250), for: .horizontal)
// Resistance
title.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 750), for: .horizontal)
detail.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 250), for: .horizontal)
// Set textAlignment
title.textAlignment = .left
detail.textAlignment = .right
// Set numberOfLines
title.numberOfLines = 0
// Highlight stackView and set colors
//stackView.addBackground(color: .blue)
title.backgroundColor = .blue
detail.backgroundColor = .red
title.textColor = .white
detail.textColor = .white
// Add title and detail
stackView.addArrangedSubview(title)
stackView.addArrangedSubview(detail)
// Add to subview
self.contentView.addSubview(stackView)
// Get layoutMarginsGuide
let layoutMarginsGuide = contentView.layoutMarginsGuide
// Set constraints
NSLayoutConstraint.activate([
// constrain all 4 sides of the stack view to the content view's layoutMarginsGuide
stackView.topAnchor.constraint(equalTo: layoutMarginsGuide.topAnchor, constant: 0.0),
stackView.leadingAnchor.constraint(equalTo: layoutMarginsGuide.leadingAnchor, constant: 0.0),
stackView.trailingAnchor.constraint(equalTo: layoutMarginsGuide.trailingAnchor, constant: 0.0),
stackView.bottomAnchor.constraint(equalTo: layoutMarginsGuide.bottomAnchor, constant: 0.0),
])
}
This is what I get:
Edit 2
Table view cell separators can change based on device, iOS version, table view style, etc.
For the most reliable consistency, set your own.
Here's an example...
we set the cell's stackView constraints relative to the contentView not to the content view's layout margins guide.
we set the table view's separatorInset so the left inset matches the stack view's leading anchor.
we also need to set each cell's .separatorInset equal to our table view's custom .separatorInset
Here's the full code:
class MyTestTableViewController: UITableViewController {
let testTitles: [String] = [
"Yesterday all my troubles seemed so far away, Now it looks as though they're here to stay.",
"She packed my bags last night pre-flight, Zero hour nine AM.",
"When you're weary, feeling small, When tears are in your eyes, I will dry them all."
]
let testDetails: [String] = [
"The Beatles",
"Elton John",
"Simon & Garfunkel",
]
override func viewDidLoad() {
super.viewDidLoad()
tableView.register(MyCellWithTitleAndDetail.self, forCellReuseIdentifier: "myCell")
// our custom separatorInset
// left matches cell's stackView leading anchor
tableView.separatorInset = UIEdgeInsets(top: 0, left: 15, bottom: 0, right: 0)
}
override func numberOfSections(in tableView: UITableView) -> Int {
return 3
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 3
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath) as! MyCellWithTitleAndDetail
// set cell separatorInset equal to tableView separatorInset
cell.separatorInset = tableView.separatorInset
cell.title.text = testTitles[indexPath.row]
cell.detail.text = testDetails[indexPath.row]
return cell
}
}
class MyCellWithTitleAndDetail: UITableViewCell {
// MARK: - Properties
let title = UILabel()
let detail = UILabel()
let stackView = UIStackView()
// MARK: - Override init
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
// Off translatesAutoresizingMaskIntoConstraints
title.translatesAutoresizingMaskIntoConstraints = false
detail.translatesAutoresizingMaskIntoConstraints = false
stackView.translatesAutoresizingMaskIntoConstraints = false
// Setup stackView
stackView.axis = .horizontal
stackView.alignment = .center
stackView.distribution = .fillEqually
// if we want the labels to be 50% of the width,
// set stackView.distribution = .fillEqually
// then we don't need any Content Hugging or Compression Resistance priority changes
// // Hugging
// title.setContentHuggingPriority(UILayoutPriority(rawValue: 750), for: .horizontal)
// detail.setContentHuggingPriority(UILayoutPriority(rawValue: 250), for: .horizontal)
//
// // Resistance
// title.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 750), for: .horizontal)
// detail.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 250), for: .horizontal)
// Set textAlignment
title.textAlignment = .left
detail.textAlignment = .right
// Set numberOfLines
title.numberOfLines = 0
// Highlight stackView and set colors
title.backgroundColor = .blue
detail.backgroundColor = .red
//stackView.addBackground(color: .blue)
title.textColor = .white
detail.textColor = .white
// Add title and detail
stackView.addArrangedSubview(title)
stackView.addArrangedSubview(detail)
// Add to subview
self.contentView.addSubview(stackView)
// Set constraints
NSLayoutConstraint.activate([
// constrain all 4 sides of the stack view to the content view
// with your own "margins"
stackView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 12.0),
stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 15.0),
stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -15.0),
stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -12.0),
])
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
and the results:

Custom TableView Cell is not Clickable

I have created a custom tableview cell by creating a separate class for it. The code works fine with the only exception being that if I tap the label in the cell, the cell does not register that it was selected. However, when the image in the cell is tapped, the cell registers it perfectly fine. I have included the cell's class's implementation below. I would really appreciate it if someone could help me.
class ItemCustomCell: UITableViewCell {
var message: String?
var itemImage: UIImage?
var messageView: UITextView = {
var text = UITextView()
return text
}()
var itemImageView: UIImageView = {
var itemImage = UIImageView()
return itemImage
}()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
self.addSubview(messageView)
self.addSubview(itemImageView)
itemImageView.translatesAutoresizingMaskIntoConstraints = false
itemImageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 10).isActive = true
itemImageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -10).isActive = true
itemImageView.widthAnchor.constraint(equalTo: self.heightAnchor).isActive = true
itemImageView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 10).isActive = true
messageView.translatesAutoresizingMaskIntoConstraints = false
messageView.leftAnchor.constraint(equalTo: self.itemImageView.rightAnchor, constant: 25).isActive = true
messageView.rightAnchor.constraint(equalTo: self.rightAnchor, constant: 20).isActive = true
messageView.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
let fixedWidth = messageView.frame.size.width - 50
let newSize = messageView.sizeThatFits(CGSize(width: fixedWidth, height: CGFloat.greatestFiniteMagnitude))
messageView.heightAnchor.constraint(equalToConstant: newSize.height).isActive = true
}
override func layoutSubviews() {
super.layoutSubviews()
if let message = message {
messageView.text = message
messageView.font = UIFont(name: messageView.font!.fontName, size: 15)
messageView.isEditable = false
messageView.isScrollEnabled = false
}
if let image = itemImage {
itemImageView.image = image
}
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
Since you're using UIextView for your label and not UILabel your text view catches taps earlier than the cell. Set messageView.isUserInteractionEnabled = false to avoid this behaviour.

Cannot override with a stored property 'leadingConstraint' , Overriding non-open var outside of its defining module xcode 10

I'm getting this weird error. My Project was working fine and all of a sudden I got these errors. The errors indicated by Xcode:
Cannot override with a stored property 'leadingConstraint'
Overriding non-open var outside of its defining module
I've defined a constraint variable in UITableViewCell, on which it's giving error.
I tried
clean the build folder.
Restarted the Xcode but it's still giving me
that error.
Error
Cell:
import UIKit
class ReceiverChatImageCell: UITableViewCell {
let bubbleBackgroundView: UIView = {
let v = UIView()
v.backgroundColor = UIColor.darkGray
v.layer.cornerRadius = 5
v.layer.masksToBounds = true
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
public let chatImage: UIImageView = {
let v = UIImageView()
v.contentMode = .scaleAspectFill
v.translatesAutoresizingMaskIntoConstraints = false
v.clipsToBounds = true
return v
}()
var maxMessageLength: CGFloat = 250
var leadingConstraint: NSLayoutConstraint?
var chatMessage: ChatModel! {
didSet {
profileImageView.loadImage(string: chatMessage.imageUrl)
chatImage.loadImage(string: chatMessage.chatImageUrl)
}
}
public let profileImageView: UIImageView = {
let v = UIImageView()
v.image = #imageLiteral(resourceName: "babs")
v.translatesAutoresizingMaskIntoConstraints = false
v.contentMode = .scaleAspectFill
v.clipsToBounds = true
v.layer.cornerRadius = 20
return v
}()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
func commonInit(){
backgroundColor = .clear
addSubview(profileImageView)
addSubview(bubbleBackgroundView)
addSubview(chatImage)
let available: CGFloat = UIScreen.main.bounds.width - 100
if maxMessageLength > available{
maxMessageLength = available - 50
print("Available Space \(maxMessageLength)")
}
// lets set up some constraints for our image
let constraints = [
profileImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 0),
profileImageView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8),
profileImageView.widthAnchor.constraint(equalToConstant: 40),
profileImageView.heightAnchor.constraint(equalToConstant: 40),
chatImage.topAnchor.constraint(equalTo: topAnchor, constant: 8),
chatImage.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -24),
chatImage.widthAnchor.constraint(lessThanOrEqualToConstant: maxMessageLength),
chatImage.heightAnchor.constraint(lessThanOrEqualToConstant: 250),
bubbleBackgroundView.topAnchor.constraint(equalTo: chatImage.topAnchor, constant: -8),
bubbleBackgroundView.leadingAnchor.constraint(equalTo: chatImage.leadingAnchor, constant: -16),
bubbleBackgroundView.bottomAnchor.constraint(equalTo: chatImage.bottomAnchor, constant: 8),
bubbleBackgroundView.trailingAnchor.constraint(equalTo: chatImage.trailingAnchor, constant: 16),
]
NSLayoutConstraint.activate(constraints)
leadingConstraint = chatImage.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 60)
leadingConstraint?.isActive = true
}
}
I haven't used this variable outside the cell.
How can I solve this problem?

Label text in center and moving depending on number of text lines in the label below

My UILabel is pinned to the top of the cell, just like UIImage but if the text below has f.e. 1 line (its also in UILabel) my top UILabel is in other place.
Here are my constraints and labels declaration. Thanks to anyone who will try to solve my problem :) I tried using sizeToFit method on my UILabels
var albumImage: UIImageView = {
let view = UIImageView()
view.translatesAutoresizingMaskIntoConstraints = false
view.contentMode = .scaleAspectFit
return view
}()
var albumName: UILabel = {
let view = UILabel()
view.translatesAutoresizingMaskIntoConstraints = false
view.numberOfLines = 0
view.sizeToFit()
return view
}()
var bandName: UILabel = {
let view = UILabel()
view.translatesAutoresizingMaskIntoConstraints = false
view.sizeToFit()
return view
}()
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
drawLayout()
}
required init?(coder aDecoder: NSCoder) {
fatalError("ERROR")
}
func drawLayout(){
let guide = self.safeAreaLayoutGuide
//albumImage
addSubview(albumImage)
addSubview(albumName)
addSubview(bandName)
albumImage.heightAnchor.constraint(equalToConstant: 50).isActive = true
albumImage.widthAnchor.constraint(equalToConstant: 50).isActive = true
albumImage.leadingAnchor.constraint(equalTo: guide.leadingAnchor, constant: 8).isActive = true
albumImage.topAnchor.constraint(equalTo: self.topAnchor, constant: 8).isActive = true
albumImage.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -8).isActive = true
//albumTitle
albumName.topAnchor.constraint(equalTo: bandName.bottomAnchor).isActive = true
albumName.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -8).isActive = true
albumName.leadingAnchor.constraint(equalTo: albumImage.trailingAnchor, constant: 8).isActive = true
albumName.trailingAnchor.constraint(equalTo: guide.trailingAnchor, constant: -8).isActive = true
//bandName
bandName.topAnchor.constraint(equalTo: albumImage.topAnchor).isActive = true
bandName.leadingAnchor.constraint(equalTo: albumImage.trailingAnchor, constant: 8).isActive = true
}