Xcode|ボタンをかっこよく表示・非表示させる。

20160809_008

こんにちは、あまのじゃくHikaruappです。
ボタンを非表示するとき UIButton.hidden = YES; でパッと非表示するのではなく、スーと消えながらStoryBoardのAutoLayout機能を利用して他のアイテムが追従して、かっこよく表示・非表示にする方法を紹介します。

20160809_009

StoryBoardに部品を配置する

表示・非表示させるボタンと非表示されるボタン。その下にラベルを一つおきます。

20160809_001

button Open/Closeを押すことによってButton1が表示・非表示となりButton1の状態によってラベルの位置が上下します。ラベルが上下するのはAutoLayoutの機能を使用しますので位置の設定は不要になります。

button open/close Actionの設定

20160809_002

button1 高さ関係のプロパティーの設定

ここが今までと違います。

20160809_003

“button Open/Close”と”button1″のスペースのプロパティーと”button1″高さのプロパティを作ります。

1.”button Open/Close”と”button1″のスペースのプロパティの設定

20160809_004

button1.top上でマウス右でドラッグして@interface ViewController ()へドロップ

20160809_005

NameにbuttonTopSpaceと入力してConnectをクリック

2.”button1″高さのプロパティの設定

20160809_006

“height = 30″上でマウス右でドラッグして@interface ViewController ()へドロップ

20160809_007

Nameにbutton1Heightと入力してConnectをクリック

3.button1のプロパティを設定

Storyboard上にあるbuttonを右ドラックして@interface ViewController ()へドロップ

Nameにbutton1と入力してConnectをクリック

@interface ViewController ()のコード

これで設定が完了です。

アニメーション無しで表示・非表示

まずは、簡単にアニメーションなしにパッと表示・非表示させます。

わかる人にはそうですよねという感じですね。それでは次はアニメーション付きです。

アニメーションありで表示・非表示

アニメーションには UIViewのanimateWithDurationを使用します。ここで気をつけないといけないところがあります。setNeedsUpdateConstraintsとlayoutIfNeeded使用しないとアニメーションしないところです。
では、コードです。

ボタン連打対策

表示・非表示のアニメーション中にボタンを連打されると動作がおかしくなってしまいます。
その対策としてアニメーション中はボタン操作を無効にするようにアニメーション動作中をisAnimationOpenCloseで管理します。

まとめ|iPhoneらしくおしゃれな動作となりましたね

こういう機能はAPIで用意して欲しいところです。
Button意外にもUIViewも同じ方法で表示・非表示ができます。
この方法を利用して是非かっこいいUIのアプリを作ってみてください。

ソースコード

プロジェクトファイル — github

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする

スポンサーリンク