My project doesn't use Storyboards since it's using CleanSwift architecture.
Every views are built programmatically. Here's my table cell class.
class LiveScoreCell: UITableViewCell {
var data: LiveScores.Data? {
didSet {
leagueLogo.setImage(data?.leagueLogo)
}
}
var container: UIView = {
let view = UIView()
view.backgroundColor = .white
view.layer.cornerRadius = 10
view.layer.shadowColor = UIColor.black.cgColor
view.layer.shadowOffset = .zero
view.layer.shadowOpacity = 0.6
view.layer.shadowRadius = 10
view.layer.shadowPath = UIBezierPath(rect: view.bounds).cgPath
view.layer.borderWidth = 1
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
var leagueLogo: UIImageView = {
let imgView = UIImageView()
imgView.translatesAutoresizingMaskIntoConstraints = false
return imgView
}()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
selectionStyle = .none
setupViews()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
selectionStyle = .none
setupViews()
}
override func prepareForReuse() {
super.prepareForReuse()
}
func setupViews() {
addSubview(container)
container.topAnchor.constraint(equalTo: self.topAnchor, constant: 8).isActive = true
container.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -8).isActive = true
container.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 8).isActive = true
container.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -8).isActive = true
addSubview(leagueLogo)
leagueLogo.topAnchor.constraint(equalTo: container.topAnchor, constant: 8).isActive = true
leagueLogo.leadingAnchor.constraint(equalTo: container.leadingAnchor, constant: 8).isActive = true
leagueLogo.widthAnchor.constraint(equalToConstant: 26).isActive = true
leagueLogo.heightAnchor.constraint(equalToConstant: 26).isActive = true
}
}
And the result is ..
Only border involves.. Any idea why is this happening?
As of this line
view.layer.shadowPath = UIBezierPath(rect: view.bounds).cgPath
runs when bounds is zero so make it inside
override func layoutSubviews() {
super.layoutSubviews()
container.layer.shadowPath = UIBezierPath(rect: container.bounds).cgPath
}
Related
I am new to swift - I want to add a label ONTO the ui image view image in a collectionview, however i am having some issues. The text sits below the image view, how can i adjust it so it stays in the middle of the image. I want to do this in code and not use storyboards or a nib file. I believe it may be due to my frames i have set:
import UIKit
class ExploreCollectionViewCell: UICollectionViewCell {
static let identifier = "ExploreCollectionViewCell"
private let label: UILabel = {
let label = UILabel()
label.textColor = .white
label.font = UIFont(name: Settings.shared.MAIN_APP_FONT_BOLD, size: 13)
return label
}()
private let imageView: UIImageView = {
let imageView = UIImageView()
imageView.clipsToBounds = true
imageView.layer.cornerRadius = 0
imageView.contentMode = .scaleAspectFill
return imageView
}()
override init(frame: CGRect) {
super.init(frame: frame)
contentView.addSubview(label)
contentView.addSubview(imageView)
}
required init?(coder: NSCoder) {
fatalError()
}
override func layoutSubviews() {
super.layoutSubviews()
label.frame = CGRect(x: 5, y: 0, width: contentView.frame.size.width-10, height: 50)
//imageView.frame = contentView.bounds
imageView.frame = CGRect(x: 0, y: 0, width: 250, height: 250)
}
override func prepareForReuse() {
super.prepareForReuse()
imageView.image = nil
}
func configure(with urlString: String, label: String) {
guard let url = URL(string: urlString) else {
return
}
let task = URLSession.shared.dataTask(with: url) { [weak self] data, _, error in
guard let data = data, error == nil else {
return
}
DispatchQueue.main.async {
self?.label.text = label
let image = UIImage(data: data)
self?.imageView.image = image
}
}
task.resume()
}
}
First, add the imageView before adding the label, so that it will be shown behind the label:
override init(frame: CGRect) {
super.init(frame: frame)
contentView.addSubview(imageView) // behind
contentView.addSubview(label) // front
}
Second, it would be easier to use auto layout:
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.widthAnchor.constraint(equalToConstant: 250).isActive = true
imageView.heightAnchor.constraint(equalToConstant: 250).isActive = true
label.translatesAutoresizingMaskIntoConstraints = false
label.centerYAnchor.constraint(equalTo: imageView.centerYAnchor).isActive = true
label.widthAnchor.constraint(equalTo: imageView.widthAnchor).isActive = true
private let label: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = .white
label.font = UIFont(name: Settings.shared.MAIN_APP_FONT_BOLD, size: 13)
return label
}()
private let imageView: UIImageView = {
let imageView = UIImageView()
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.clipsToBounds = true
imageView.layer.cornerRadius = 0
imageView.contentMode = .scaleAspectFill
return imageView
}()
override init(frame: CGRect) {
super.init(frame: frame)
contentView.addSubview(label)
contentView.addSubview(imageView)
imageView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 0).isActive = true
imageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 0).isActive = true
imageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 0).isActive = true
imageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: 0).isActive = true
label.heightAnchor.constraint(equalToConstant: 50).isActive = true
label.centerYAnchor.constraint(contentView.centerYAnchor).isActive = true
label.centerXAnchor.constraint(contentView.centerXAnchor).isActive = true
label.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 5).isActive = true
label.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -5).isActive = true
}
required init?(coder: NSCoder) {
fatalError()
}
I'm creating a simple app. I'm trying to make two screens look the same but I can't seem to get one of the table views to work. Instead, when the set up table view function is called, the error signal sigbart appears. I can't see why this is since on the other screen the table view works no problem and I've copied over the code.
let tableview: UITableView = {
let tv = UITableView()
tv.backgroundColor = UIColor.white
tv.translatesAutoresizingMaskIntoConstraints = false
return tv
}()
func setupTableView() {
tableview.delegate = self
tableview.dataSource = self
tableview.register(BunchCells.self, forCellReuseIdentifier: "cellId")
tableview.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0)
view.addSubview(tableview)
NSLayoutConstraint.activate([
tableview.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 170),
tableview.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
tableview.rightAnchor.constraint(equalTo: self.view.rightAnchor),
tableview.leftAnchor.constraint(equalTo: self.view.leftAnchor)
])
}
class BunchCells: UITableViewCell {
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
setupView()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
let cellView: UIView = {
let view = UIView()
view.backgroundColor = UIColor.red
view.layer.cornerRadius = 10
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
let dayLabel: UILabel = {
let label = UILabel()
label.text = "Day 1"
label.textColor = UIColor.white
label.font = UIFont.boldSystemFont(ofSize: 16)
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
func setupView() {
addSubview(cellView)
NSLayoutConstraint.activate([
cellView.topAnchor.constraint(equalTo: self.topAnchor, constant: 20),
cellView.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -10),
cellView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 10),
cellView.bottomAnchor.constraint(equalTo: self.bottomAnchor)
])
dayLabel.heightAnchor.constraint(equalToConstant: 200).isActive = true
dayLabel.widthAnchor.constraint(equalToConstant: 200).isActive = true
dayLabel.centerYAnchor.constraint(equalTo: cellView.centerYAnchor).isActive = true
dayLabel.leftAnchor.constraint(equalTo: cellView.leftAnchor, constant: 20).isActive = true
}
}
I run your program and doesn't have any error, but I think this looks a little bit weird:
weak var tableView: UITableView!
let tableview: UITableView = {
let tv = UITableView()
tv.translatesAutoresizingMaskIntoConstraints = false
tv.separatorColor = UIColor.white
return tv
}()
Maybe cause of your error was what you accidentally invoke method on tableView which is always nil.? If it is not, give some hints how to reproduce your error).
class CustomTableViewCell: UITableViewCell {
let nameLbl: UILabel = UILabel()
let profileBtn: UIButton = UIButton()
let aboutLbl: UILabel = UILabel()
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
contentView.addSubview(profileBtn)
contentView.addSubview(nameLbl)
contentView.addSubview(aboutLbl)
nameLbl.translatesAutoresizingMaskIntoConstraints = false
profileBtn.translatesAutoresizingMaskIntoConstraints = false
aboutLbl.translatesAutoresizingMaskIntoConstraints = false
profileBtn.backgroundColor = UIColor.red
nameLbl.font = UIFont(name: "Arial", size: 16)
aboutLbl.font = UIFont(name: "Arial", size: 16)
profileBtn.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
profileBtn.leftAnchor.constraint(equalTo: leftAnchor, constant: 20).isActive = true
profileBtn.widthAnchor.constraint(equalToConstant: 40).isActive = true
profileBtn.heightAnchor.constraint(equalToConstant: 40).isActive = true
self.profileBtn.layer.masksToBounds = true
self.profileBtn.layer.cornerRadius = CGFloat(roundf(Float(self.profileBtn.frame.size.width/2.0)))
nameLbl.topAnchor.constraint(equalTo: topAnchor, constant: 30).isActive = true
nameLbl.leftAnchor.constraint(equalTo: leftAnchor, constant: 70).isActive = true
nameLbl.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20).isActive = true
aboutLbl.topAnchor.constraint(equalTo: nameLbl.bottomAnchor, constant: 10).isActive = true
aboutLbl.leftAnchor.constraint(equalTo: leftAnchor, constant: 70).isActive = true
aboutLbl.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20).isActive = true
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
i want the profile button inside the cell to have a round design.but ebven setting the corener radius and marskstobounds to true i am getting a square button. what am i doing wrong any help is apreciated. thanks in advance.
You are calculating the corner radius when the profile button hasn't been laid out yet. This means the width of the profile button will be zero rendering the corner radius the same. Move the line that you set the corner radius to an overriding method of layoutSubviews – this will ensure the views and subsequent sizes have been laid out in order for you to set the appropriate corner radius.
override func layoutSubviews() {
super.layoutSubviews()
profileBtn.layer.cornerRadius = profileBtn.frame.width / 2
}
Here is my solution:
override func layoutSubviews() {
super.layoutSubviews()
self.makeItCircle()
}
func makeItCircle() {
self.yourbutton.layer.masksToBounds = true
self.yourbutton.layer.cornerRadius = CGFloat(roundf(Float(self.yourbutton.frame.size.width/2.0)))
}
self.imageView.layer.masksToBounds = true //- in main
When you initialise the cell, the button does not have any frame. So self.profileBtn.layer.cornerRadius = CGFloat(roundf(Float(self.profileBtn.frame.size.width/2.0))) results in cornerRadius to be 0.
Since you are giving 40 constant width and height to the button, you can simply do this:
self.profileBtn.layer.cornerRadius = 20.0
Also make sure to set the button to clip the bounds:
self.profileBtn.clipsToBounds = true
class ChatCollectionViewCell: UICollectionViewCell {
var chatView: UIView!
var chatTextView: UITextView!
var isTextFromCurrentUser: Bool = true
var chatViewWidth: CGFloat = 200
override init(frame: CGRect) {
super.init(frame: frame)
chatView = UIView()
chatTextView = UITextView()
contentView.addSubview(chatView)
contentView.addSubview(chatTextView)
setupViews()
}
override func layoutSubviews() {
if isTextFromCurrentUser {
chatView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 10).isActive = true
chatTextView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 15).isActive = true
chatTextView.backgroundColor = .white
} else {
chatView.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -10).isActive = true
chatTextView.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -15).isActive = true
chatTextView.backgroundColor = UIColor(r: 157, g: 255, b: 164)
}
chatView.widthAnchor.constraint(equalToConstant: chatViewWidth).isActive = true
chatView.topAnchor.constraint(equalTo: self.topAnchor, constant: 10).isActive = true
chatTextView.widthAnchor.constraint(equalTo: chatView.widthAnchor, constant: -10).isActive = true
chatTextView.topAnchor.constraint(equalTo: chatView.topAnchor, constant: 5).isActive = true
chatView.translatesAutoresizingMaskIntoConstraints = false
chatTextView.translatesAutoresizingMaskIntoConstraints = false
}
func setupViews() {
chatView.backgroundColor = .blue
chatTextView.font = UIFont.systemFont(ofSize: 16)
chatTextView.layer.cornerRadius = 9
chatTextView.clipsToBounds = true
chatTextView.isScrollEnabled = false
}
override func prepareForReuse() {
super.prepareForReuse()
chatView = nil
chatTextView = nil
chatView = UIView()
chatTextView = UITextView()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
(for clarification, I am setting the chatViewWidth and the chatTextView.text property in the ViewController's cellForRow method)
So right now, the error that XCode is giving is the following: "Unable to activate constraint with anchors and because they have no common ancestor. Does the constraint or its anchors reference items in different view hierarchies?"
I looked through many posts regarding common ancestor errors on StackOverflow, but none of the solutions solved my problem.
Which is very confusing.
I tried using breakpoints to analyze what was wrong, but the program crashed after creating around ~14 cells or so. And sometimes it works, but when I add more cells, it will begin crashing. I'm not sure what the issue is--my views are definitely children views of the CollectionViewCell, correct?
Thank you!
This is how i would do it ... well basicy i would set all the stuff in Storyboard and set an Outlet for the widthConstraint ... but to take your code, this should work. But its not testet ... :)
class ChatCollectionViewCell: UICollectionViewCell {
var chatView: UIView!
var chatTextView: UITextView!
var isTextFromCurrentUser: Bool = true {
didSet {
if isTextFromCurrentUser {
NSLayoutConstraint.deactivate(rightAlignmentConstraints)
NSLayoutConstraint.activate(leftAlignmentConstraints)
chatTextView.backgroundColor = .white
} else {
NSLayoutConstraint.deactivate(leftAlignmentConstraints)
NSLayoutConstraint.activate(rightAlignmentConstraints)
chatTextView.backgroundColor = UIColor(r: 157, g: 255, b: 164)
}
}
}
var chatViewWidth: CGFloat = 200 {
didSet {
chatView.widthAnchor.constraint(equalToConstant: chatViewWidth).isActive = true
}
}
private var leftAlignmentConstraints: [NSLayoutConstraint] = []
private var rightAlignmentConstraints: [NSLayoutConstraint] = []
override init(frame: CGRect) {
super.init(frame: frame)
setupViews()
}
func setupViews() {
chatView = UIView()
chatTextView = UITextView()
contentView.addSubview(chatView)
contentView.addSubview(chatTextView)
chatView.translatesAutoresizingMaskIntoConstraints = false
chatTextView.translatesAutoresizingMaskIntoConstraints = false
chatView.backgroundColor = .blue
chatTextView.font = UIFont.systemFont(ofSize: 16)
chatTextView.layer.cornerRadius = 9
chatTextView.clipsToBounds = true
chatTextView.isScrollEnabled = false
leftAlignmentConstraints = [
chatView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 10),
chatTextView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 15)
]
rightAlignmentConstraints = [
chatView.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -10),
chatTextView.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -15)
]
chatView.widthAnchor.constraint(equalToConstant: chatViewWidth).isActive = true
chatView.topAnchor.constraint(equalTo: self.topAnchor, constant: 10).isActive = true
chatTextView.widthAnchor.constraint(equalTo: chatView.widthAnchor, constant: -10).isActive = true
chatTextView.topAnchor.constraint(equalTo: chatView.topAnchor, constant: 5).isActive = true
NSLayoutConstraint.activate(leftAlignmentConstraints)
}
override func prepareForReuse() {
super.prepareForReuse()
chatTextView.text = ""
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
Good Luck and Happy Coding
I'm working on a exercise to create a custom control of anything. My idea is to have a UIView in the middle of the screen and a UILabel below it. When you tap on the view a random color will appear with the label changing to its hex value. When trying to create this custom control I'm having a problem trying to center the UIView programmatically. I get to an issue at `colorBox.center~
import UIKit
#IBDesignable
class Color: UIView {
private lazy var label : UILabel = {
let label = UILabel()
label.backgroundColor = UIColor.clear
label.translatesAutoresizingMaskIntoConstraints = false
label.heightAnchor.constraint(equalToConstant: 25.0).isActive = true
label.widthAnchor.constraint(equalToConstant: 100.0).isActive = true
label.font = .systemFont(ofSize: 15.0, weight: UIFontWeightRegular)
return label
}()
private lazy var colorGen : UIView = {
let colorBox = UIView()
colorBox.backgroundColor = UIColor.black
colorBox.heightAnchor.constraint(equalToConstant: 100.0).isActive = true
colorBox.widthAnchor.constraint(equalToConstant: 100.0).isActive = true
colorBox.centerXAnchor.constraint(equalTo: colorBox.frame.size.width /2)
}()
override init (frame: CGRect) {
super.init(frame:frame)
setUpLabel()
setUpView()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setUpLabel()
setUpView()
}
I've tried the answers about using self.view but it doesn't work for me so I'm a bit lost.
You're close, but you need to add the label and the view so you can then constrain them relative to the superview...
#IBDesignable
class ColorView: UIView {
private lazy var colorLabel : UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.backgroundColor = UIColor.clear
label.heightAnchor.constraint(equalToConstant: 25.0).isActive = true
label.widthAnchor.constraint(equalToConstant: 100.0).isActive = true
label.font = .systemFont(ofSize: 15.0, weight: UIFontWeightRegular)
return label
}()
private lazy var colorGen : UIView = {
let colorBox = UIView()
colorBox.translatesAutoresizingMaskIntoConstraints = false
colorBox.backgroundColor = UIColor.cyan
colorBox.heightAnchor.constraint(equalToConstant: 100.0).isActive = true
colorBox.widthAnchor.constraint(equalToConstant: 100.0).isActive = true
return colorBox
}()
override init (frame: CGRect) {
super.init(frame:frame)
commonSetup()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonSetup()
}
func commonSetup() -> Void {
self.addSubview(colorGen)
self.addSubview(colorLabel)
colorGen.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 0.0).isActive = true
colorGen.rightAnchor.constraint(equalTo: self.rightAnchor, constant: 0.0).isActive = true
colorGen.topAnchor.constraint(equalTo: self.topAnchor, constant: 0.0).isActive = true
colorLabel.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 0.0).isActive = true
colorLabel.rightAnchor.constraint(equalTo: self.rightAnchor, constant: 0.0).isActive = true
colorLabel.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 0.0).isActive = true
colorLabel.topAnchor.constraint(equalTo: colorGen.bottomAnchor, constant: 0.0).isActive = true
colorLabel.text = "the label"
}
}