月別アーカイブ: 2016年5月

[Swift]UITableViewで無限スクロールしてみる

WEBAPIから取得したブログエントリーを無限スクロールで表示するビューアを作成する事になったので、
UITableViewを使って実装のサンプルを作ってみました。

実装の概要
・UITableViewのスクロールに応じて必要なデータを必要なタイミングでロード。
・上にスクロールした場合にはデータを先頭に、下にスクロールした場合にはデータを末尾に追加する
・データの変更時にはUITableViewの表示位置(contentOffset)を調整する
・セルの高さは動的に決定する(行毎の高さはキャッシュする)

表示用のデータはこんなものを想定します。

class MyData
{
    var date:NSDate;
    var text:String;
    
    init(date:NSDate,text:String){
        self.date = date;
        self.text = text;
    }
}

dateが並び順(タイトル)で、表示コンテンツとしてtextがあります。

で、この情報をUITableViewに表示するのですが、今回のサンプルはコンテンツの内容に応じてセルの高さを動的に決定しようと思います。
高さを求めるのはそれなりにコストが高いので、計算した高さを表示用データとペアにして格納するためのクラスを定義します。

class CellData<T> {
    // 表示データ
    var data:T
    // セルの高さ
    var height:CGFloat?
    
    init(data:T,height:CGFloat?){
        self.data = data
        self.height = height
    }
}

セルの高さを求める時には表示用のコードと殆ど同じになりますので、実際のセルに計算させると良いかと。
ですので、こんな感じのUITableViewCellを定義します。

class MyTableViewCell: UITableViewCell
{
    private var titleLbl:UILabel!
    private var textLbl:UILabel!
    
    // 計算済の高さが設定される
    var requiredHeight:CGFloat = 0
    
    
    override init(style: UITableViewCellStyle, reuseIdentifier: String!)
    {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        self.setupSubviews()
    }
    
    required init?(coder aDecoder: NSCoder)
    {
        super.init(coder: aDecoder)
        self.setupSubviews()
    }

    func setupSubviews()
    {
        self.titleLbl = UILabel()
        self.titleLbl.font = UIFont.boldSystemFontOfSize(15)
        self.addSubview(self.titleLbl)
        
        self.textLbl = UILabel()
        self.textLbl.font =  UIFont.systemFontOfSize(13)
        self.textLbl.numberOfLines = 0
        self.addSubview(self.textLbl)
    }
    
    // 表示用のデータを設定
    // 必要な高さも求めてrequiredHeightに保存
    func setData(data:MyData)
    {
        titleLbl.frame = CGRectMake(5, 5, self.frame.width - 5 * 2.0, 18)
        titleLbl.text = "\(data.date)"
        
        
        self.textLbl.frame = CGRectMake(5, titleLbl.frame.origin.y + titleLbl.frame.height + 5, self.frame.width - 5 * 2.0, 10)
	// 設定した文字列によってサイズを動的に変更
        self.textLbl.text = data.text
        self.textLbl.sizeToFit()
        
        // 必要な高さを保存しておく
        requiredHeight = textLbl.frame.origin.y + textLbl.frame.size.height + 5
    }

}

setDataでMyDataを渡すと、requiredHeightにセルを表示するために必要な高さが設定されます。

これらのクラスを使ってUITableViewを使います。
コードはこんな感じ!(ズババン!)

class SampleViewController:UIViewController,UITableViewDelegate,UITableViewDataSource {

    // MARK: - Properties
    
    var tableView: UITableView = UITableView()
    
    
    // テーブルに表示するデータを保持する
    // ※SortedList(→コード)を使っていますが、なんでも大丈夫です
    var tableData:SortedList<CellData<MyData>> = SortedList<CellData<MyData>>(compFunc: { (left, right) -> CompareResult in
        switch (left.data.date.compare(right.data.date)){
        case .OrderedSame: return CompareResult.Equal
        case .OrderedAscending: return CompareResult.RightLarge
        case .OrderedDescending: return CompareResult.LeftLarge
        }
    })


    // セルの高さを算出するための作業セル
    var workingCell = MyTableViewCell()
    
    // データ処理の実行フラグ
    var isLoading = false


    // MARK: - Initialize
    
    init() {
        super.init(nibName: nil, bundle: nil)
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    


    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.view.backgroundColor = UIColor.yellowColor()
        
        
        // テーブルの設定
        tableView.registerClass(MyTableViewCell.self, forCellReuseIdentifier: "cell")
        tableView.dataSource = self
        tableView.delegate = self
        self.view.addSubview(tableView)
        
    
        // 初期データの読み込み  昨日から30日分のデータを取得して初期データとします
        let date = NSDate(timeInterval: 24 * 60 * 60 * -1, sinceDate: NSDate())
        self.loadDataFromDate(date, count: 30, toFuture: true, containTargetDate: true) {[weak self] (results) in
            
            self?.tableData.append(results)
            self?.tableView.reloadData()
            
            // 指定した日付が先頭に表示されるようにスクロール
            let indexPath = NSIndexPath(forRow: 1, inSection: 0)
            self?.tableView.selectRowAtIndexPath(indexPath, animated: false, scrollPosition: UITableViewScrollPosition.Top)
        }

    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()   
        tableView.frame = self.view.bounds;
    }
    
    override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)
    }    
    
    override func viewWillDisappear(animated: Bool) {
        super.viewWillDisappear(animated)
    }


    // MARK: - 表示用データの取得
    
    // データの取得
    // DBやWebAPI使う事を前提に非同期処理としています
    func loadDataFromDate(date:NSDate,count:Int,toFuture:Bool
        ,containTargetDate:Bool,callback:(results:Array<CellData<MyData>>) -> ())
    {
        isLoading = true;
        // データ取得中はウエイトカーソル的なものを表示した方が良いかもね
 
        let queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0)
        let mainQueue = dispatch_get_main_queue()
        weak var weakself = self
        
        dispatch_async(queue,{
            autoreleasepool {
                // ダミーデータを作成する
                var loaded = Array<CellData<MyData>>()
                let dayInterval = Double(24 * 60 * 60 * (toFuture ? 1 : -1))
                
                var dt = containTargetDate ? date : date.dateByAddingTimeInterval(dayInterval)
                
                while loaded.count < count {
                    
                    let csdata = CellData(data: MyData(date: dt, text: weakself!.makeRandomString()), height: .None)
                    
                    loaded.append(csdata)
                    
                    dt =  dt.dateByAddingTimeInterval(dayInterval)
                }
                // 少しウエイトしてみる
                NSThread.sleepForTimeInterval(0.5)
             
                dispatch_sync(mainQueue, {
                    callback(results: loaded)
                    weakself!.isLoading = false;
                })
                
            }
        })
    }
    

    // ランダムな文字列を生成する
    func makeRandomString() -> String {
        let wordTable = ["りんご","梨","ひよこ","ごりら","犬","を食べる","を投げる","を拾う","を蹴る","自分","へ怒る","を割る","コップ","テレビ"];
        let wordCount = arc4random_uniform(50) + 1
        
        let  result = (0..<wordCount).reduce("") { (v, no) -> String in
            let idx = Int(arc4random_uniform(UInt32(wordTable.count)))
            return v + wordTable[idx]
        }
        
        return result
    }
    

    // MARK: - UITableViewDelegate,UITableViewDataSource 
    
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1;
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return tableData.count
    }
    
    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        
        let obj = tableData[indexPath.row]
        if let height = obj.height {
            return height
        } else {
            // セルの表示サイズを計算してキャッシュする
            workingCell.setData(obj.data)
            let height = workingCell.requiredHeight
            obj.height = height
            return height
        }
    }
    
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath)        
        let obj = tableData[indexPath.row]
        
        if let csCell = cell as? MyTableViewCell {
            csCell.setData(obj.data)
        }
        
        return cell
    }

    
    func scrollViewDidScroll(scrollView: UIScrollView) {
        
        // データ取得中は処理しない
        if isLoading {
            return
        }
        
		// 事前読み込みを行う末端からの距離
		let margin:CGFloat = 100
        
        // 下方向への読み込み判定
        // ここの判定に一定のマージンを設ける事で事前読み込みが可能となります
        // このサンプルでは必要となったときにガバッと取得
        let bottomOffset = self.tableView.contentOffset.y + self.tableView.bounds.size.height
		let lengthFromBotton = self.tableView.contentSize.height - bottomOffset        
        if (lengthFromBotton >= margin){            
            let dt = tableData[tableData.count-1].data.date            
            self.loadDataFromDate(dt, count: 10, toFuture: true, containTargetDate: false) {[weak self] (results) in
                self?.tableData.append(results)
                self?.tableView.reloadData()
            }
        }
        

        // 上方向への読み込み判定
        if (self.tableView.contentOffset.y <= margin){            
            let dt = tableData[0].data.date            
            self.loadDataFromDate(dt, count: 5, toFuture: false, containTargetDate: false) {[weak self] (results) in
   		 // 上方向へのスクロールの場合にはスクロール位置の調整が必要
                var height:CGFloat = 0
                for v in results {
                    // セル毎の高さを求めるつつ、tableDataへ格納する
                    self!.workingCell.setData(v.data)
                    v.height = self!.workingCell.requiredHeight
                    height += v.height!                    
                    self?.tableData.append(v)
                }
                
                // 取得したセルの高さ(合計)だけスクロール位置を移動させる
                self?.tableView.contentOffset.y = self!.tableView.contentOffset.y + height
                
                self?.tableView.reloadData()
            }
            
        }
        
    }

}

ポイントは上方向にスクロール(先頭方向)した場合のスクロール位置の調整ですかね。
下方向にスクロールした場合にはデータを末尾に追加するのでスクロール位置は変更しなくて良いのですが、上方向の場合には今表示している位置より前にデータを追加することになります。
ですので、今の表示位置を読み込んだセルの高さ分だけ下に調整してあげる必要があります。

このサンプルではMyDate.dateで勝手にソートされるようにSortedListを使っていますが、普通のArrayでも大丈夫です。
上にスクロールするときは先頭にデータを追加、下にスクロールした時は末尾に追加すれば良いのです。