【Swift4.2】初心者向け!Storyboardでボタンを画像にする方法を解説

どうも、はるかす(@mametyralove)です。

ボタンを画像にしたくて少し調べたものの、それだけを解説しているサイトがなく(見つけることができなく)困っていましたがなんとか理解。
僕が勉強中のSwiftの新鮮な情報をアウトプットします!

▼僕のSwiftの勉強状況はここから見れます▼

【毎日更新】中卒が本気でプログラミング言語「Swift」を学ぶ話

2018.10.04
はるかす
Xcodeの使い方を少しでも理解していればできるはずだよ!

まずはボタンの設置から

Storyboardを開こう

もしあなたが新しいプロジェクトで試したいと思えば新しいプロジェクトのStoryboardを開けば良いですし、既存のプロジェクトで試したいと思えば既存のプロジェクトのStoryboardを開いても良いので、とにかくStoryboardの画面に行きましょう。

僕は今回は新しいプロジェクトを作って説明します。
Storyboardはこんな画面です。

ボタンの設置

次にボタンを設置していきます。
右上の方にある二重丸っぽい図形が描かれているボタンをタップしてオブジェクトをStoryboardに挿入していきます。

ボタンを押したら表示されるのがオブジェクトの検索欄です。
ここからボタンのオブジェクトを検索します。

検索欄に「button」と入力してみましょう。
候補に4つほど出てくるかもしれませんが、ここではシンプルな「Button」を選択してStoryboardにドラッグ&ドロップします。

ボタンを画像にする

画像をインポートする

まずはボタンにしたい画像をプロジェクトにインポートする必要があります。
インポートと聞くと難しいように聞こえますが、ファイルを選択するかドラッグ&ドロップで済ませることができます。

まずはStoryboardからAssets.xcassetsというフォルダに移動しましょう。
場所は画像の通りです。

ボタンにしたい画像ファイルをドラッグ&ドロップ!
今回はぱくたそ様からお借りしたフリー画像をボタンにしたいと思います。

ボタンを画像にする

画像のインポートを終えたら遂にボタンを画像にしていきます。
main.storyboardに戻り、先程設置したボタンを選択し、画像の部分をクリックしてください。

クリックしたらTypeを「System」から「Custom」に変更。
Imageインポートした画像を選んでください。

これでボタンを画像にすることができたと思います。
大きさは自由に変更できるのでお好みでどうぞ!

お疲れ様でした!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です