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

【Swift5/Xcode】UIStackViewで簡単にトルツメを実装する方法(表示非表示切り替え)

サトリク

どうも、駆け出しiOSエンジニアのサトリクです。

今回は、Swift5でトルツメの実装方法についての記事を書きます。

動作環境

item Version
Swift 5.1.3
Xcode 11.3

バージョンの確認方法

「トルツメ」とは?

余計なViewを削除・排除した時に空いた空間を詰めることです。

簡単に言うと、削除「トル」して詰める「ツメ」と言うことです。

そのままですね。

「トルツメ」の完成イメージ

「トルツメ」の実装方法

storyboardの実装

まずは、Viewを2つ配置します。

STEP.1
「View」を配置

Viewをドラッグ&ドロップする画像

①プラスボタン(Shift + command + L)をクリック

②「View」をドラッグ&ドロップ

STEP.2
「View」の位置・縦横を指定

Viewの位置を決める画像

①「View」を選択

「Show the Size inspector」を選択

③以下の表の通りに入力

X 0
Y 0
Width 414
Height 150
STEP.3
色を変更

色変更の画像

①「View」を選択

「Show the Attributes inspector」を選択

③Backgroundをわかりやすい色に変更

STEP.4
「View」を複製する

Viewを複製する画像

①「View」を選択して、optionを押しながらドラッグ&ドロップして複製

STEP.5
色を変更

色を変更する

①複製した「View」を選択

「Show the Attributes inspector」を選択

③Backgroundをわかりやすい色に変更

STEP.6
複製した「View」の位置・縦横を指定

①複製したViewを選択

「Show the Size inspector」を選択

③以下の表の通りに入力

X 0
Y 150
Width 414
Height 150
STEP.7
「Stack View」を配置

StackViewを配置

①プラスボタン(Shift + command + L)をクリック

②「Vertical Stack View」をドラッグ&ドロップ

STEP.8
「Stack View」の位置・縦横を指定

Stack Viewの位置・縦横を指定の画像

①「Stack View」を選択

「Show the Size inspector」を選択

③以下の表の通りに入力

X 0
Y 0
Width 414
Height 300
STEP.8
「StackView」の中に「View」を入れる

StackViewの中にViewを入れる

2つのViewをshiftを押しながら複数選択して、StackViewの中にドラッグ&ドロップ

STEP.8
ボタンを配置

①プラスボタン(Shift + command + L)をクリック

②「Button」をドラッグ&ドロップ

STEP.9
ボタン名と大きさを指定

ボタンの名前と大きさを指定する画像

①「Button」を選択

「Show the Attributes inspector」を選択

③名前を「トルツメ」、Fontを「System 30」に変更

STEP.10
StackViewのAutolayoutの設定

StackViewのAutolayoutの設定の画像

①「StackView」を選択

を選択

③上、左、右それぞれ赤い線をクリックして0にする

④「Add 3 Constraints」をクリック

STEP.11
ButtonのAutolayoutの設定

トルツメのAutolayoutの設定の画像

①トルツメ(Button)を選択

をクリック

③「Hotizontally in Container」と「Vertically in Constainer」をチェック入れる

④「Add 2 Vonstraints」をクリック

STEP.12
ViewのAutolayoutの設定

①2つのViewをShiftを押しながら複数選択

を選択

③「Height」にチェック入れる

④「Add 2 Constraints」をクリック

完了

これでstoryboard上の設定は完了です。

コードと紐付け

次は、Main.storyboardとViewController.swiftを紐付けます。

STEP.1
コードの画面を表示する

コード画面をだす画像

①Main.storyboardを選択

control + option + command + enterを押下

STEP.2
「View」を紐づける

Viewを紐付ける画像

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

STEP.3
Connect

①Nameに「toruView」と入力

②「Connect」をクリック

STEP.4
「トルツメ(Button)」を紐づける

Buttonを紐付ける画像

①トルツメ(Button)を選択し、controlを押しながら18行目と19行目にドラッグ&ドロップ

STEP.5
Connect

①Nameに「torutumeBtn」と入力

②「Connect」をクリック

完了

これで、Main.storyboardとViewController.swiftの紐付けが完了しました。

 

コーディング

次は、いよいよコーディングしていきます。

STEP.1
現時点のコード

以下は、現時点でのコードです。

STEP.2
非表示にする処理

@IBActionの中に、以下のように記述しましょう。

 

解説:

@IBAction〜はボタンを押した時に呼ばれるメソッドです。

その中に、toruView(青いView)をisHidden(隠す)をtrue(実行)するみたいな感じです。

STEP.3
実行してみる

command + rで実行して動作確認しましょう。

STEP.4
表示しているときは非表示にし、非表示のときは表示する処理

以下のように処理を付け足しましょう。

 

解説:

if toruView.isHidden {は省略しなければif toruView.isHidden == true {です。

ですので、表示していたら表示する(false)。表示していなかったら隠す(true)

STEP.5
アニメーションをつける処理

次は、アニメーションをつけましょう。

さらに、以下のように処理を付け足しましょう。

 

解説:

UIView.animate(withDuration: 0.3) {で囲むとアニメーションをつけれます。

withDuration: 0.3の数値は、アニメーションの動くスピードを表しています。数字が大きければ大きいほどゆっくり動きます。

完了

これでトルツメの実装が完了です。

サトリク

みなさんできましたか?

できない場合、コメントやDMで教えてください。

まとめ

ここまで呼んでくださりありがとうございます。

他にもSwiftの記事をたくさん書いているので見てみてください

 

 

ブランドはじめました

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

購入はこちらから