LoginSignup
4
3

More than 3 years have passed since last update.

iOSのおしゃれな文字入力ライブラリつくってみた(swift)

Last updated at Posted at 2019-10-22

はじめに

今までいろいろiOSライブラリを作りましたが、中々使い道のないものばかりでした。

今回はいろんなアプリで使えるものということを主眼に置いて作成しました!!

カラーピッカーとかアプリ内で色を選択する機会はそうありません。しかし、大抵のアプリで行うことがあります。そう、文字入力です!!

文字入力といえば...ウィジャ盤!!!(ウィジャボード、いわゆるこっくりさん的なやつ)

GitHub

つくったものはここ AMOuijaBoard

Cocoapods,Carthage,SwiftPMに対応してます。

見た目

board

機能

  • タップで文字を選択できる(大文字アルファベットと数字のみ)
  • GoodByeのタップを検知(Enter的な役割)
  • フォントや色を設定できる

使い方

  1. AMOuijaBoardViewを設定する

    // viewDidloadで初期化
    let boardView = AMOuijaBoardView(frame: view.bounds)
    
    // ここでフォントや色を指定
    
    boardView.delegate = self
    view.addSubview(boardView)
    
  2. デリゲートを設定する(2019/10/26修正)

    func ouijaBoardView(_ ouijaBoardView: AMOuijaBoardView, didSelectKey key: AMOuijaBoardView.Key) {
      switch key {
      case .goodbye:
        // GOOD BYEタップ時に呼ばれる
        break
      case .no:
        // NOタップ時に呼ばれる
        break  
      case .yes:
        // YESタップ時に呼ばれる
        break
      case .alphabet(let text):
        // アルファベットタップ時に呼ばれる
        // textはタップしたアルファベット(A~Z)
        break
      case .number(let text):
        // 数字タップ時に呼ばれる
        // textはタップした数字(0~9)
        break
      } 
    }
    

描画の関係で幅は300~600で縦横の比は1:1.414です。この範囲外だとわりとレイアウトが崩れます...

小文字で受けたい場合は text.lowercased() で小文字にしてもらえれば小文字を取得できます。

日本語にしたい場合は applyingTransform(_:reverse:) でローマ字変換すればできなくもない気がします。

以前作ったUIViewを燃やすライブラリと組み合わせるとこんな感じです。

burn

さいごに

作ってから思いましたが入力ミスした場合の取消し処理がありません。

NOをタップでとか思いましたがそれだとYESの場合どうするか...
delegateを修正してYES/NOタップも受けれるようにしました。(2019/10/26修正)
NOタップのところで下記のような処理をすれば一文字削除ができます。(それでもやっぱりYESタップ時の処理が悩むところ...)

// inputTextが入力文字列
if !inputText.isEmpty {
  inputText.prefix(inputText.count - 1).map { String($0) }.joined()
}

計算処理やカーソル描画の妥協、タップするには間隔が狭すぎるなど改善点はいろいろあります:eyes::eyes::eyes:

つくったのまとめ

動作確認用にまとめたプロジェクト

4
3
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
4
3