[チュートリアル]UIButtonにImageを入れる

今回はUIButtonにImageを入れるチュートリアルです！

ちょっと長いですが、ぜひ参考にしてみてください〜

併せて読みたい記事↓↓

• 【保存版】UdemyでAWSが学べる人気コース８選【セール時に買うとお得】
• 【保存版】UdemyでSwiftを学べるおすすめのコース５選！

■宣伝: Swift入門者がiOS開発の基礎を学べるクラッシュコースを作っています↓↓

☑️旅行アプリを「Travel」を作ろう

本記事で作成するもの

本記事は上のように、ボタン(UIButton)を押したら、背景の色が変わるアプリを一から作っていくチュートリアルです。

ボタン(UIButton)に画像(Image)を入れるところだけ知りたい方は、最初のところは、飛ばしていってください。

本記事の環境

環境は以下の通りです。

• Xcode10.2
• Swift 5.0

本記事の構成

本記事では以下のような手順で進めていきます。

• 画像やラベルなどの準備(ここは飛ばしてもOKです)
• ボタン(UIButton)に画像(Image)を入れる
• ボタン(UIButton)が押されたら、背景色を白から赤に変える

プロジェクトの作成

では早速はじめていきましょう。

Xcodeを開いて、Create a new Xcode Projectから新規プロジェクトを作成してください。

シュミレータの確認

本チュートリアルでは、細かいレイアウトの調整(Auto Layout)は行わないので、シュミレータはiPhone XRで起動するようにしてください。

1と2の矢印の先がそれぞれiPhone XRになっているか確認してください。

なっていなければ、クリックしてXRに変えましょう〜。

トップ画像(Image)の準備

まずは本アプリの上部にくる画像の準備をしましょう。

Xcode左のメニューから、Main.storyboardを選択してください。

画像(Image)を画面に置いていきます

① 矢印の先のLibraryをクリック

②imageと入力

③ Image Viewをドラッグ&ドロップ(クリックしたまま画面の上まで持ってきて、離す)で画面に置きます。

画像を良い感じに置いていきましょう。

① Size Inspectorを開く

② x->0 y->44 Width(414) Height->695 と入力する

① Attributes Inspectorを開く

② imageに、トップ画像の名前を入力する

③ Content Modeを Aspect Fillに変える

もし画像(Image)の名前が分からなければ、Assets.Xcassetsを開いて確認しましょう。

これでトップ画像の準備は終わりです。

ラベルの準備

次にラベルの準備します。

① 上で画像を出したように、Libraryを選択して、Labelと打ちます。

② だいたい2の位置あたりにラベルをおきます。

③ Attributes Inspectorをクリックします。

④ ラベルのTextを、ADER error STORE にします。

⑤ Fontの右のTマークのボタンを押して、Semiboldを押します。

次にサイズと位置の調整をします。

① Size Inspectorを選択

② x->20, Y->747, Width(幅)->160, Height(高さ)->27

画像付きロゴボタンの準備

画像付きのボタンを準備していきます。

①Libraryをクリック

② buttonと入力

③ Buttonをドラッグ&ドロップでラベルの下あたりにおきます。

ボタンに画像を入れていきます。

① Buttonをクリック

② Attributes Inspectorをクリック

③ Titleのテキストを消して、enter

④Imageに、画像の名前を入力(Assets.xcassetsに書いてある名前)

続いて、画像のサイズと位置を調整します。

①Buttonが選択されていることを確認

②Size Inspectorをクリック

③X->20, Y->782, Width(幅)->35, Height(高さ)->35をクリック

ここまででボタン(UIButton)に画像(Image)を入れることができるようになりました。

ロゴボタン横のラベルを準備

①Libraryをクリック

②Labelと入力

③ドラッグ&ドロップで画面に持ってくる

①Attributes Inspectorを選択

②Aderと入力

サイズと位置は以下の画像の通りにしてください。

①Size Insepctorをクリック

②X->63, Y->789,Width(幅)->37,Height(高さ)->21

フォローワーラベルの準備

画面の準備はこれで最後です。

上でやってきた方法と全く同じ方法で、ラベルをLibraryから引っ張ってきて、Aderラベルの下あたりにおきます。

そして、

①Attrubutes Inspectorをクリック

②5731フォロワーと入力

③Fontの矢印の先の、上下カーソルの下をクリックして、12.0まで下げる。

サイズと位置は以下の画像のように設定してください。

以上で、画面の作成は終わりです。

シュミレータを起動して確認してみましょう。

矢印の先をクリック

iPhone XR をクリック

矢印の先のボタンを押して、シュミレータを起動。

しばらく待つと、下のような画面ができていると思います。

画像付きボタンをクリックしたら背景の色を赤に変える処理

ボタンを押したら、背景の色が赤に変わる処理を書いていきます。

①矢印の先の黄色のボタンを押します

②矢印の先の、Assistant editor をクリック

上のように、左に画面、右にViewController.swfitファイルが表示されます。

※もし違うファイルが出てくる場合は、矢印の先の×ボタンを押して、もう一度試してみてください。

それではボタンの処理を書いていきます。

画像付きボタンを右クリックして、クリックしたまま、コードファイルの方に持ってきて、はなします。

すると下のようなポップアップが出てきます。

上の画像のように設定してください。

• Connection -> Action
• Object -> View Controller
• Name -> logoTapped (ここは好きな名前でOKです)
• Type -> Any
• Touch Up Inside
• Sender

Connectをクリックします。

これで、logoTappedというメソッドができました。

このメソッドには、ボタンが押された時に行う処理を書きます。

今回のアプリでは、このボタンが押された時に背景色を赤に変えるということをします。

logoTappedメソッド内に1行追加してください。

self.view.backgroundColor = UIColor.red

この行で、ボタンが押された時、背景色(backgroundColor)を、赤色(UIColor.red)にするという処理を行っています。

実行結果をシュミレータで確認してみましょう。

ボタンを押すと背景色が赤になります！

以上です。お付き合いありがとうございました〜。

他にもチュートリアル書いているので、参考にしてみてください。

併せて読みたい記事↓↓

»【保存版・随時更新】Swiftエンジニアが参考にしたい求人サイト20選まとめた【新卒・インターン・第二新卒・中途・フリーランス】

» 【保存版】UdemyでSwiftを学べるおすすめのコース５選！