アプリ開発したい人にオススメのプログラミングスクール

【Swift5/Xcode】おしゃれな画面遷移ライブラリ『BubbleTransition』の使い方

サトリク

この記事では、ライブラリ『BubbleTransition』の使い方を初心者でもわかるように解説していきたいと思います。

動作環境

item Version
Swift 5.1.3
Xcode 11.3

バージョンの確認方法

『BubbleTransition』とは

BubbleTransitionとはこのような、おしゃれな画面遷移が簡単に実装できるライブラリです。

BubbleTransitionの実装方法

簡単に手順を説明

  1. ライブラリ導入
  2. SegueでpresentModally接続
  3. ViewControllerとNextViewControllerを変更←ここまでスキップ

ライブラリ導入

まずは、こちらの記事でをみながら、BubbleTransitionを導入してください。

【CocoaPods】超初心者向け!CocoaPodsのインストールの仕方と使い方

storyboardの実装

STEP.1
遷移先画面を配置

まずは、遷移先の画面を配置します。

ViewControllerを配置の画像

①Main.storyboardを選択

②「+」をクリックするか、command + shift + Lをしてオブジェクトウィンドウを表示

ViewControllerをドラッグ&ドロップ

STEP.2
ボタンを配置

次に、2つの画面にボタンを配置します。

Buttonを配置の画像

①「+」をクリックするか、command + shift + Lをしてオブジェクトウィンドウを表示

②2つの画面の真ん中に、Buttonをドラッグ&ドロップ

STEP.3
背景の色を変更

①Viewを選択

(inspector)を選択

③BackgroundでSystem Red Colorを選択

STEP.4
背景色を変更

背景色を変える画像

①下のViewを選択

(inspector)を選択

③BackgroundでSystem Yellow Colorを選択

STEP.5
ボタンの変更

①ボタンを選択

(inspector)を選択

③以下のように記述

Name:+

Font:System 40.0

Text Color:White Color

STEP.6
ボタンの背景色を変更

BackgroundをSystem Yellow Colorを選択

STEP.7
2つ目の画面のボタンを変更

先ほどと同じように、もう1つの画面のボタンも変更します。

①ボタンを選択

(inspector)を選択

③以下のように記述

Name:-

Font:System 40.0

Text Color:White Color

STEP.8
ボタンの背景色を変更

BackgroundをSystem Red Colorを選択

STEP.9
ボタンの位置を決める

次は、ボタンの位置を決めます。

①ボタンを選択

(Constraints)を選択

Horizontally in ContainerVertically in Containerの2つにチェックを入れ、「Add 2 Constraints」をクリック

STEP.10
ボタンの大きさを決める

次は、ボタンの大きさを決めます。

①ボタンを選択

(Constraints)を選択

WidthHeightにチェックを入れる

④それぞれ60にする

⑤「Add 2 Constraints」をクリック

STEP.11
画面遷移させる

ボタンを押したら、画面遷移するように設定します。

controlを押しながら、2つ目の画面にドラッグ&ドロップしましょう。

「Present Modally」を選択

STEP.12
フルスクリーンにする

画面遷移を設定すると、右側の画面の上に余白ができてしまうので、フルスクリーンにします。

①右側のボードの上のバーを選択

(inspector)を選択

③PresentationをFull Screenに変更

完了
これで、storyboardの設定が完了です!

コードとストーリーボードを紐付ける

STEP.1
コード画面と2画面で表示する

コードと紐づけるために、コード画面を出します。

①ボタンを選択

command + control + option + enterで、コード画面と2画面表示します。

STEP.2
ボタンを接続

ボタンを選択し、controlを押しながら、12行目と13行目にドラッグ&ドロップ

NameにnextBtnと入力し、「Connect」をクリック

STEP.3
ファイル作成

次は、遷移先の画面のコードファイルを作成します。

command + nで、ファイル作成画面を開く

①「Cocoa Touch Class」を選択

②「Next」をクリック

STEP.4
ファイルの設定

①ClassにNextViewControllerと入力

②「Next」をクリック

STEP.5
ファイルの保存先を選択

「Create」をクリック

STEP.6
ストーリーボードとコードを紐づける

①遷移先のstoryboardの上のバーを選択

② (inspector)を選択

③先ほど作成したファイルを選択

STEP.7
コード画面と2分割

command + control + option + enterで2画面にします。

STEP.8
NextViewControllerを開く

NextViewControllerが開かない場合、上記の画像のように、「<」をクリックし、NextViewControllerを開きます。

STEP.8
ボタンを紐づける

controlを押しながら、11行目と12行目の間にドラッグ&ドロップ

NameにbackBtnと入力し、「Connect」をクリック

STEP.8
ボタンのアクションを紐づける

ボタンが押した時の処理を紐付けます。

controlを押しながら、19行目と20行目の間にドラッグ&ドロップします。

NameにbackActionと入力し、「Connect」をクリック

完了
これで、コードとの紐付けが完了です。

コーディング

続いて、コーディングします。

ViewControllerを以下のように、変更しましょう。

簡単に説明すると、

①まずは、インポートする

②インスタンスを生成する

③ボタンを丸くする

④画面遷移のセグエに設定する

⑤アニメーションを追加する

こんな感じです。

次は、NextViewControllerを変更しましょう。

簡単に説明すると

①ボタンを丸くする

②画面遷移元に戻る処理

サトリク

これで、実装完了です!

実行して確認してみてください。

まとめ

他にもたくさんのSwiftの記事を書いていますので、読んでみてください!

 

ブランドはじめました

エンジニアの心をくすぐるようなデザイン

購入はこちらから