LoginSignup
58
48

More than 5 years have passed since last update.

@marty-suzuki(suzuki marty)

【iOS】ViewControllerを汚さずにUITableViewの下部からCellを追加する実装

Last updated at Posted at 2017-03-19

はじめに

メッセージアプリでUITableViewにCellが追加される際に、下図のようにUITableViewの上部からCellが埋まっていき、下に追加されていくものが多いかと思います。

しかし、本来実現したいインタラクションとしては、下図のようにUITableViewの下部からCellが埋まっていくものではないでしょうか？

このインタラクションを簡単に実現できるものが ReverseExtension (558Star 2017/03/21)になります。
それでは、下部からCellを追加していく実装を解説していきたいと思います。

インストール方法

CocoaPodsまたはCarthageからインストールすることができます。

CocoaPods

Podfileに下記を追加し、pod updateを実行してください。

pod "ReverseExtension"

Carthage

Cartfileに下記を追加し、carthage updateを実行してください。

github "marty-suzuki/ReverseExtension"

ReverseExtension.frameworkをLinked Frameworks and Librariesとcopy-frameworksに追加してください。

実装方法

ReverseExtensionは、reというプロパティの中でインタラクションなどの処理をラップしているので

tableView.re.dataSource = self
tableView.re.deleagate = self

のように、既存のUITableViewに対してreを追加するだけで実行することができるようになるという特徴があります。

実際にViewControllerでReverseExtensionを使うと、下記のような実装になります。

import ReverseExtension

class ViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    fileprivate var messages: [MessageModel] = []

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.register(UINib(nibName: "TableViewCell", bundle: nil), forCellReuseIdentifier: "Cell")
        //reでdataSourceとdelegateを指定
        tableView.re.dataSource = self
        tableView.re.delegate = self
        tableView.estimatedRowHeight = 56
        tableView.rowHeight = UITableViewAutomaticDimension
    }

    @IBAction func addButtonTapped(_ sender: UIBarButtonItem) {
        messages.append(MessageModel())
        tableView.beginUpdates()
        //reでinsert
        tableView.re.insertRows(at: [IndexPath(row: messages.count - 1, section: 0)], with: .automatic)
        tableView.endUpdates()
    }

    @IBAction func trashButtonTapped(_ sender: UIBarButtonItem) {
        messages.removeAll()
        tableView.reloadData()
    }
}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return messages.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        (cell as? TableViewCell)?.configure(with: messages[indexPath.row])
        return cell
    }
}

extension ViewController: UITableViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        //UITableViewDelegateのハンドリングも可能
    }
}

また下部からCellを追加する処理を無くしたい場合は、reを無くすだけで標準のUITableViewの挙動に戻るようになります。

カスタムプロパティ

メッセージなどをリスト表示する際に、現在取得できているものよりも最新（または過去）のものを取得するという処理を実装するかと思います。
それらの処理の発火タイミングは、UITableViewのcontentOffsetが最下部（または最上部）に達したときになるかと思います。
ReverseExtensionではそれらのイベントを受け取れるように

  • tableView.re.scrollViewDidReachTop
  • tableView.re.scrollViewDidReachBottom

のクロージャーが利用できるようになっています。

class ViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")

        tableView.re.delegate = self
        tableView.re.scrollViewDidReachTop = { scrollView in
            print("contentOffsetが最上部に達したイベントを取得")
        }
        tableView.re.scrollViewDidReachBottom = { scrollView in
            print("contentOffsetが最下部に達したイベントを取得")
        }
    }
}

reとは

ReverseExtensionでは、ViewControllerでの実装が肥大化しないようにするため、ReverseExtension classの中でUITableViewDeleagateが実装されていて、そのメソッドを利用して反転処理などが行われています。
RxSwiftではReactiveCompatibleを採用しているクラスで、rxというプロパティを介して拡張したメソッドなどにアクセスできるようになっています。
ReverseExtensionのreはRxSwiftのrxに近い形ではあるのですが、ReactiveCompatibleの中ではrxにアクセスする度にReactive(self)が返されているので、新しいインスタンスが返されることになります。しかし、ReverseExtensionのreはdelegateやdataSourceを保持するために下記のようにAssociatedObjectとしてインスタンスが保持されています。

extension UITableView {
    private struct AssociatedKey {
        static var re: UInt8 = 0
    }

    public var re: ReverseExtension {
        guard let re = objc_getAssociatedObject(self, &AssociatedKey.re) as? ReverseExtension else {
            let re = ReverseExtension(self)
            objc_setAssociatedObject(self, &AssociatedKey.re, re, .OBJC_ASSOCIATION_RETAIN)
            return re
        }
        return re
    }
}

Delegateを複数のオブジェクトにメッセージ転送

ReverseExtensionのre.delegateにdelegate先を指定した場合、指定先のオブジェクトでもdelegateの処理を実行しつつ、ReverseExtensionの中でもdelegateの処理を実行しています。

DelegateTransporter

複数のオブジェクトでdelegateの処理を実行するために、DelegateTransporter利用してメッセージ転送を行っています。
forwardInvocationがSwiftで利用できないため、Objective-Cで実装されています。

DelegateTransporterはUITableViewDelegateTransporterのような形で継承して使われるそうていなので、イニシャライザはNS_REFINED_FOR_SWIFTを使ってSwiftに適した形で書き換えができるようにしてあります。

DelegateTransporter.h
@interface DelegateTransporter : NSObject
- (nonnull instancetype)initWithDelegates:(NSArray<id> * __nonnull)delegates NS_REFINED_FOR_SWIFT;
@end

DelegateTransporterでは複数のdelegate元を保持するのでうが、強参照で保持してしまうとオブジェクトがリリースされなくなってしまうので、[NSHashTable weakObjectsHashTable]で弱参照で保持するようになっています。

DelegateTransporter.m
#import "DelegateTransporter.h"

@interface DelegateTransporter ()
@property (nonnull, nonatomic, strong) NSHashTable<NSObject *> *delegates;
@end

@implementation DelegateTransporter

- (instancetype)initWithDelegates:(NSArray<id> *)delegates {
    self = [super init];
    if (self) {
        self.delegates = [NSHashTable weakObjectsHashTable];
        for (id delegate in delegates) {
            if (![delegate isKindOfClass:[NSObject class]]) { continue; }
            [self.delegates addObject: delegate];
        }
    }
    return self;
}

- (BOOL)respondsToSelector:(SEL)aSelector {
    for (NSObject *delegate in self.delegates) {
        if ([delegate isKindOfClass:[NSNull class]]) {
            continue;
        }
        if ([delegate respondsToSelector:aSelector]) {
            return YES;
        }
    }
    return NO;
}

- (NSMethodSignature *)methodSignatureForSelector:(SEL)aSelector {
    for (NSObject *delegate in self.delegates) {
        if ([delegate isKindOfClass:[NSNull class]]) {
            continue;
        }
        if ([delegate respondsToSelector:aSelector]) {
            return [delegate methodSignatureForSelector:aSelector];
        }
    }
    return nil;
}

- (void)forwardInvocation:(NSInvocation *)anInvocation {
    for (NSObject *delegate in self.delegates) {
        if ([delegate isKindOfClass:[NSNull class]]) {
            continue;
        }
        if ([delegate respondsToSelector:anInvocation.selector]) {
            [anInvocation invokeWithTarget:delegate];
        }
    }
}

@end

UITableViewDelegateTransporter

UITableViewDelegateTransporterはUITableViewDelegateを採用したクラスとして定義します。
このようにするとこで、tableView.delegate = UITableViewDelegateTransporter(deleagetes: [self, deleagete])のようにUITableViewDelegateTransporterをUITableViewDelegateとして扱うことができるようになります。

UITableViewDelegateTransporter.swift
class UITableViewDelegateTransporter: DelegateTransporter, UITableViewDelegate {
    @nonobjc convenience init(delegates: [UITableViewDelegate]) {
        self.init(__delegates: delegates)
    }
}

ReverseExtensionで独自実装を内包する

上記で実装したUITableViewDelegateTransporterを利用して、反転処理などの独自実装を内包します。

extension UITableView.ReverseExtension: UITableViewDelegate {
    public func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        if cell.contentView.transform == CGAffineTransform.identity {
            UIView.setAnimationsEnabled(false)
            cell.contentView.transform = CGAffineTransform.identity.rotated(by: .pi)
            UIView.setAnimationsEnabled(true)
        }
    }
}

最後に

このようにして、UITableViewのインスタンスにreを追加するだけで、UITableViewの下部からCellを追加する処理を簡単に実装することができるようになります。

58
48
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
58
48