読者です 読者をやめる 読者になる 読者になる

スワイプ(PanGesture)で標準キーボードを閉じることができるTKKeyboardControlを公開しました

iOS UI/UX Swift OSS

f:id:cyberz-dev-writer:20160525160205p:plain

はじめに

どうも。OPENREC事業部でゲーム実況動画共有プラットフォームサービスOPENREC.tviOSエンジニアをしている辰己です。 最近では、有名実況主である胎児(たいちゃんねる)さんのスプラトゥーン実況動画やVaingloryの世界大会の動画がアップされて盛り上がっていますので、ぜひAppStoreGooglePlayからダウンロードしてみてくださいね!

さて、今回は以前書いたUIライブラリを公開してみた企画の第2弾です!
 
その名も、、、
 
TKKeyboardControlです! (ドドン!)  

TKKeyboardControlとは

標準キーボードの上部から指でスーッと下に降ろすスワイプ(PanGesture)の操作で標準キーボードを閉じることができる機能を簡単に追加できるOSSです。

keyboard_test.gif

身近なアプリでは、Messenger (Facebook) やiPhoneに標準搭載されているメッセージアプリで実装されています。

そして、このTKKeyboardControlを使えば、それらのアプリと同じく
スワイプ(PanGesture)で標準キーボードを閉じることができます。

そもそもなぜ作ったのか

近頃、社内のプロジェクトで Pure Swift でこの機能を実装する必要が出てきたのです。
そのとき、Githubには同じ機能を持ったDAKeyboardControlというOSSが公開されていたのですが、これはすべてObjective-Cで書かれています。
そのため、Swiftでのアプリ開発でこのOSSを使おうとすると、ブリッジングヘッダーを導入してObjective-Cソースコードをインポートできるようにして、etc. 、、、あぁ、なんてこったい、、、うぉぉ(泣)
となってしまい、Pure Swift でアプリを実装したい私にとっては弊害になってしまいました。
また、これに変わるOSSGithub上で探してみましたが、全然ありませんでした。
惜しいものすら、ありませんでした。
そこで、私はこう考えたのです。
 
無ければつくればいいじゃなーい
 
そんな思いで公開したのが、このTKKeyboardControlです。
Pure Swiftで書きたくて、この機能を実現したいのですという人々に使ってもらえると嬉しいです。(あとスターをいただけると泣き叫んで喜びます。)

使い方

追加するソースコードたったの4行なので、とても簡単に導入できます。

1. 導入する

CocoaPods or マニュアルの好きな方で導入することができます。

1-a. CocoaPodsで導入する

以下の内容でPodfileを作成し、pod install します。
Swiftからはuse_frameworks!が無いとエラーになりますので、ご注意を。

platform :ios, '8.0'
use_frameworks!

pod 'TKKeyboardControl'

1-b. マニュアルで導入する

下記リンクからソースコードをダウンロードし、
中身のTKKeyboardControlディレクトリをプロジェクトに追加してください https://github.com/cztatsumi-keisuke/TKKeyboardControl/archive/master.zip

2. 動きを追加したいViewControllerにインポートする

動きを追加したいViewControllerに下記のコードでインポートします。

import TKKeyboardControl

3. PanGestureの動きをキーボードに付与する

ViewControllerのviewDidLoad()に下記コードを追加します。
これでキーボードをPanGestureで閉じれるようになります。

self.view.addKeyboardPanningWithFrameBasedActionHandler({ (keyboardFrameInView, opening, closing) in
            // ここはPanGestureが変化するたびに呼ばれます
            }, constraintBasedActionHandler: nil)

4. deinitにObserverを解放するためのメソッドを追加

最後に、deinitに下記コードを追加して完成です。

self.view.removeKeyboardControl()

PanGestureが効く始点を変更する

メッセージ系のアプリにおいて、キーボードの上部にはサンプルのようなテキストボックスを実装することがほとんどです。
その場合、keyboardTriggerOffsetプロパティを設定して、PanGestureが効く始点をテキストボックスの上部からに変更します。

// テキストボックスの高さ
let inputBaseViewHeight: CGFloat = 40

// PanGestureが効く始点をテキストボックスの上部からに設定
self.view.keyboardTriggerOffset = inputBaseViewHeight
        
self.view.addKeyboardPanningWithFrameBasedActionHandler({ (keyboardFrameInView, opening, closing) in
            // キーボードの伸縮に合わせてテキストボックスのY座標が変化するようにする
            self.inputBaseView.frame.origin.y = keyboardFrameInView.origin.y - inputBaseViewHeight
            }, constraintBasedActionHandler: nil)

マニュアルでキーボードを閉じる

マニュアルでキーボードを閉じたい場合は、下記のメソッドを使います。

self.view.hideKeyboard()

最後に

これであなたもより高いクオリティのアプリが作成できますね!
 
それと、もうお気づきかもしれませんが、
今回から公開するソースコードSwiftにしました!
Objective-Cよ、さらばじゃ。
(デモマダObjective-Cモスキー!)
 
今回も最後まで読んでくださり、ありがとうございました。
次回もお楽しみに!!!