Whole Cell is covered animation(Programmatically Solved!!)

[oguzveozturk]

⚠️ Please fill out this template when filing an issue.

🙏🏼 Please check if it already exists other issue related with yours.

What did you do?

`import UIKit import SkeletonView

class ViewController: UITableViewController, SkeletonTableViewDataSource {

override func viewDidLoad() {
    super.viewDidLoad()
    view.isSkeletonable = true
    tableView.isSkeletonable = true
    tableView.register(TableViewCell.self, forCellReuseIdentifier: "cell")
    tableView.estimatedRowHeight = 130
  tableView.rowHeight = UITableView.automaticDimension
    view.showAnimatedSkeleton()
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    view.updateSkeleton()
}

override func updateViewConstraints() {
    super.updateViewConstraints()
    view.updateSkeleton()
}

func collectionSkeletonView(_ skeletonView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 30
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 30
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
    cell.label.text = "test skeletonView"
    return cell
}

func collectionSkeletonView(_ skeletonView: UITableView, cellIdentifierForRowAt indexPath: IndexPath) -> ReusableCellIdentifier {
    return "cell"
}

}

class TableViewCell: UITableViewCell {

lazy var label: UILabel = {
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.text = ""
    label.isSkeletonable = true
    return label
}()

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    isSkeletonable = true
    setupLayout()
}

required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

func setupLayout() {
    addSubview(label)
    NSLayoutConstraint.activate([
        label.centerXAnchor.constraint(equalTo: self.centerXAnchor),
        label.centerYAnchor.constraint(equalTo: self.centerYAnchor),
        label.widthAnchor.constraint(equalToConstant: 300),
        label.heightAnchor.constraint(equalToConstant: 25)
    ])
}

}`

What did you expect to happen?

just want to try skeleton animation in a simple project

What happened instead?

as it shows in the picture; whole cell is covered with animation, not the label inside.

Steps to reproduce the behavior

my code is programmatically written. no storyboard or interface builder. download project.

SkeletonView Environment

SkeletonView version: 1.8.6 Xcode version: 11.4 **Swift version: 5

[oguzveozturk]

Solved issue; when you writing programmatically; view objects should not be added to cell. Should be added to cell's contentView. (as it shows in the pic below) @Juanpe you must add this information to the "How to use" because there are lot of people who encounter the same problem while writing programmatically.

[boungly]

Hello @oguzveozturk

I also work on the UI programmatically, and in my case also on UITableViewCell, But I face a problem with the layout during animating as the layout keeps jumping.

UI Structure

OUTPUT

• First Load

• Second ViewDidAppear

• Other ViewDidAppear

[mendesahdivio]

hi i tried creating programmatic view as like mentioned above but i dont see any skeleton view for it

import UIKit import SkeletonView

class ViewController: UIViewController { private var viewModel = ViewModel() var strings: [String]?

private let uiTableView: UITableView = { let tableView = UITableView() tableView.translatesAutoresizingMaskIntoConstraints = false tableView.estimatedRowHeight = 100 tableView.rowHeight = 100 tableView.isSkeletonable = true return tableView }()

override func viewDidLoad() { super.viewDidLoad() //set up the tableview uiTableView.register(CustomTableViewCell.self, forCellReuseIdentifier: "CellId") setupTableView(uiTableView) setTableViewDelegateAndDataSource(uiTableView)

//call the skeleton view
showAnimationForView()

// call network which is just a simple dispatchqeue with 5 seconds delay
callNetwork()

}

final func setupTableView(_ tableView: UITableView) { view.addSubview(tableView) NSLayoutConstraint.activate([ tableView.topAnchor.constraint(equalTo: self.view.topAnchor), tableView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor), tableView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor), tableView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor) ]) }

final func setTableViewDelegateAndDataSource(_ tableView: UITableView){ tableView.delegate = self tableView.dataSource = self } }

//table view delegate and data source extension ViewController: UITableViewDelegate, SkeletonTableViewDataSource { func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return strings?.count ?? 10 }

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "CellId", for: indexPath) as! CustomTableViewCell if let value = strings?[indexPath.item] { cell.labelView.text = value ?? "boyjdkjfhdsh" cell.uiImageView.image = UIImage(systemName: "heart.fill") } return cell }

func collectionSkeletonView(_ skeletonView: UITableView, cellIdentifierForRowAt indexPath: IndexPath) -> ReusableCellIdentifier { return "CellId" } }

//functions to call skeleton view animations extension ViewController {

private final func showAnimationForView() { view.showAnimatedSkeleton() }

func stopSkeletonView() { self.view.stopSkeletonAnimation() self.view.hideSkeleton() }

func callNetwork() {

DispatchQueue.main.asyncAfter(deadline: .now() + 5) {[weak self] in
  self?.strings =  self?.viewModel.getdata()
  self?.stopSkeletonView()
  self?.uiTableView.reloadData()
}

} }

//dumy view model struct ViewModel { func getdata() -> [String] { return ["hey", "there", "boy", "lol", "test", "make", "proud", "test", "you", "make it worth"] } }

//custom tableview cells with programatic UI class CustomTableViewCell: UITableViewCell {

let labelView: UILabel = { let labelView = UILabel() labelView.font = .systemFont(ofSize: 25) labelView.translatesAutoresizingMaskIntoConstraints = false labelView.numberOfLines = 0 labelView.text = "some randon text" labelView.isSkeletonable = true return labelView }()

let uiImageView: UIImageView = { var imageView = UIImageView() imageView.translatesAutoresizingMaskIntoConstraints = false imageView.image = UIImage() imageView.contentMode = .scaleAspectFit imageView.frame.size.width = 70 imageView.frame.size.height = 70 imageView.clipsToBounds = true imageView.isSkeletonable = true return imageView }()

private lazy var stackView: UIStackView = { let hstack = UIStackView(arrangedSubviews: [ uiImageView, labelView ]) hstack.translatesAutoresizingMaskIntoConstraints = false hstack.axis = .horizontal hstack.spacing = 10 hstack.distribution = .fillEqually hstack.isSkeletonable = true return hstack }()

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) { super.init(style: style, reuseIdentifier: reuseIdentifier) isSkeletonable = true contentView.addSubview(stackView) NSLayoutConstraint.activate([ stackView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 0), stackView.topAnchor.constraint(equalTo: self.topAnchor, constant: 0), stackView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 0), stackView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: 0), labelView.widthAnchor.constraint(equalToConstant: 200), labelView.heightAnchor.constraint(equalToConstant: 25) ])

}

required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } }