うるおいらんど

アプリ開発やサイト制作のメモとか。

文字入力時のようなUIButtonを起点としたフリック動作をつける【Swift】

魚ライン
魚ライン

iPhoneで文字入力をする場合多くの人はフリックで入力していると思います。

IMG_7235

しゅっしゅっしゅ〜ってやるやつです

 

こんな感じの動作をする方法を紹介します〜(もっといい方法もあるかもです )

今回は上にフリックするとカウントが1増え、下にフリックするとカウントが1減るというのをしてみました。

UIButtonとUISwipeGestureRecognizerを用いて実装していこうと思います。

 

起点となるボタンを用意する

まずは適当にボタンを用意します。

このボタンにアクションを加えていくのですが、

ボタンをタップで+−のラベルを表示する → 指が離れたらラベルを非表示にする

というアクションをつけます。

指が離れた時点、というのがイマイチ定義しづらくて、タッチキャンセルをしたとき、タッチしてそのまま指を離した時、タッチ→ドラッグしてボタンの外で離した時の3種類でごまかしてます。

この3つを書いておけばラベルが残るってことはあまりないと思います。。。今の所。。。

 

とりあえずタップ時の動作は置いといて、

UISwipeRecognizerをUIButtonにつける

そしてこのボタンにswipe動作をつけます。

directionはスワイプする向きです

これを先ほどのUIButtonにaddしてください。

 

ボタンをタップした時にラベルを表示する

 

upLabelとdownLabelがnilであるかのチェックはしておきましょう。

ボタンキャンセル時は

 

こんな感じでhiddenで隠すのではなくnilにしちゃってます。

 

Swipe時のアクション

あとはSwipeされた時のアクションを書いていきます

countには元々入っているテキストの値を入れてそこから上下させています。

 

これで上にスワイプした時はカウントが増え、下にスワイプをした時はカウントが減る、というものができたはずです。。

 

左右にスワイプした時の動作も同様にしてつければキーボードのようなものも作れるはず・・・です!

左右の場合はUISwipeGestureRecognizerDirectionをLeftまたはRightにすればOKです。

 

全体のコード

 

optionalの扱いが恐らく上手くないので分かりづらいとは思いますが。

Simulator Screen Shot 2016.03.08 16.17.57

このコードそのままコピペすると上のような感じになります。ちょっとそろそろgifで載せる方法を学ぼう分かりづらいですね・・・。

+と−はタップした時だけ見えます。

厳密にはフリックとスワイプって異なると思うんですが、うーむとりあえず上手く動いてはいます。

実際のキーボードのフリックは座標を用いてるのかなぁとは思いますが、このくらいならこの方法でも十分かなとも思います。ゆーーっくりドラッグして+上で離す、という動作には対応できてないのは少しむむって感じですが。

色々と応用が利きそうなので使っていきたい。

参考サイト

Gesture Recognizers

魚ライン 魚ライン

Swiftの記事一覧を見る

コメント

コメントは認証制です。詳しくは下記の注意をお読みください。

コメントを残す

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

魚ライン 魚ライン