はじめに

どうもkano0512sです
たまたまListPlaceholderを使う機会があり、
調べてる時に情報があまりなかったのでメモ的なノリで書きます
とりあえず、理屈云々は置いといて動かしたいよって人には少し需要はあるかなと思います。

実装

List-gif.gif
こんなん作ります。

早速、自分はCocoaPodsを使ってinstallしました。

pod 'ListPlaceholder'

をPodfileに書いて Pod install します。

そしたらstoryboardでtableViewを置いてCellの用意をしたらコードを書いていきます。

ViewController.swift
import UIKit
import ListPlaceholder

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {


    @IBOutlet weak var tableView: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.reloadData()
        tableView.showLoader()


        // Do any additional setup after loading the view, typically from a nib.
    }

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

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)

        return cell
    }

}

必要なのは、

Viewcontroller.swift
tableView.reload()
tableView.showLoader()

showLoadするとCellにアニメーションがかかります
これらをviewDidLoadに書きましょう。
あとは止めたいタイミングで。

tableView.hideLoader()

を書けば下にあるCellのやつらが表示されます。

スクリーンショット 2018-04-06 0.01.54.png

storyboardではこんな感じです。

あとはたぶんアニメーションとかを設定しなきゃいけない気がするのでそれらがこんな感じ

ViewController.swift
@IBDesignable
class ListDesigin: UIView {

    /*
     // Only override draw() if you perform custom drawing.
     // An empty implementation adversely affects performance during animation.
     override func draw(_ rect: CGRect) {
     // Drawing code
     }
     */
    @IBInspectable var borderColor:UIColor = UIColor.lightGray
    @IBInspectable var cornerRadius:CGFloat = 5.0
    @IBInspectable var shadowRadius:CGFloat = 5.0
    @IBInspectable var borderWidth:CGFloat = 0.5
    @IBInspectable var shadowOffset:CGFloat = -1
    @IBInspectable var shadowColor:UIColor = UIColor.lightGray
    @IBInspectable var shadowOpacity:Float = 0.8


    override func layoutSubviews() {
        super.layoutSubviews()
        if(self.shadowOffset >= 0){
            self.layer.shadowColor = self.shadowColor.cgColor
            self.layer.shadowOffset = CGSize(width: shadowOffset, height: shadowOffset)
            self.layer.shadowOpacity = shadowOpacity
            self.layer.shadowRadius = shadowRadius
            self.clipsToBounds = true
            self.layer.masksToBounds = false
        }

        self.layer.cornerRadius = self.cornerRadius
        self.layer.borderColor = self.borderColor.cgColor
        self.layer.borderWidth = self.borderWidth
        //self.layer.masksToBounds = true
    }
}

これはListPlaceholderのExampleの中にあったコードでClass名だけ自分で適当に変えました。
とりあえずこれをコピペして、Cellの上にあるUIViewのClassのとこにスクリーンショット 2018-04-05 23.33.02.png
ListDesignClassを設定して動かしてみると動くと思います。

全体のコードです。

ViewController.swift
import UIKit
import ListPlaceholder

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {


    @IBOutlet weak var tableView: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.reloadData()
        tableView.showLoader()


        // Do any additional setup after loading the view, typically from a nib.
    }

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

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)

        return cell
    }

}

@IBDesignable
class ListDesigin: UIView {

    /*
     // Only override draw() if you perform custom drawing.
     // An empty implementation adversely affects performance during animation.
     override func draw(_ rect: CGRect) {
     // Drawing code
     }
     */
    @IBInspectable var borderColor:UIColor = UIColor.lightGray
    @IBInspectable var cornerRadius:CGFloat = 5.0
    @IBInspectable var shadowRadius:CGFloat = 5.0
    @IBInspectable var borderWidth:CGFloat = 0.5
    @IBInspectable var shadowOffset:CGFloat = -1
    @IBInspectable var shadowColor:UIColor = UIColor.lightGray
    @IBInspectable var shadowOpacity:Float = 0.8


    override func layoutSubviews() {
        super.layoutSubviews()
        if(self.shadowOffset >= 0){
            self.layer.shadowColor = self.shadowColor.cgColor
            self.layer.shadowOffset = CGSize(width: shadowOffset, height: shadowOffset)
            self.layer.shadowOpacity = shadowOpacity
            self.layer.shadowRadius = shadowRadius
            self.clipsToBounds = true
            self.layer.masksToBounds = false
        }

        self.layer.cornerRadius = self.cornerRadius
        self.layer.borderColor = self.borderColor.cgColor
        self.layer.borderWidth = self.borderWidth
        //self.layer.masksToBounds = true

    }
}

終わりに

なんとなくでやってたら動いてしまったので詳しくは理解できてないです
自分でアニメーションをカスタマイズしたかったらListDesignクラスの中に

override func draw() {/*こんなか*/}

こんな感じで作って自分でやればいいのかなぁと思いました。

少しでも参考になれば幸いです

詳しく知りたい方は https://github.com/malkouz/ListPlaceholder ここをみてください
他にもCollectionViewなどの実装方法もあります

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.