[チュートリアル] UISliderでSpotify画面を作る

本チュートリアルではUISliderの使い方を紹介していきます。

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

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

本記事でUISliderを使って作成するもの

UISlderを使いながら、Spotify(っぽい)の画面を作ります。

※本記事で学べること

• UISliderの基礎的な使い方
• ボタンや画像、ラベルなどの扱い方

※本記事では扱わないこと

• Autolayout(細かいレイアウトの調整)

本記事では細かいレイアウトの調整は行わないので、後々Xcodeでシュミレータを起動するときは、iPhoneXRを選ぶようにして下さい。

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

環境

• Swift5.0
• Xcode10.2
• シュミレータ:iPhoneXR

アセット

本記事で使うアイコンなどまとめておきました。

ダウンロードしておいて下さい。

最初のアルバムジャケットのサイトは、画像の右下のダウンロードボタンからダウンロードできます。

最初のアルバムジャケット以下のサイトは、

Download PNGという緑のボタンでダウンロードできます

• アルバムジャケット画像->好きな画像をダウンロード！(https://unsplash.com/)
• サウンド有り(https://www.iconfinder.com/icons/925907/full_noise_sound_volume_icon) 以下のアイコンはDownload PNGからダウンロードできます
• ミュート(https://www.iconfinder.com/icons/2255649/audio_mute_sound_volume_icon)
• 再生(https://www.iconfinder.com/icons/919983/end_play_preview_start_icon)
• 進む(https://www.iconfinder.com/icons/926649/arrow_next_player_previous_icon
• 戻る(https://www.iconfinder.com/icons/926647/media_next_player_previous_song_track_icon)

プロジェクトの作成

Xcodeを開いて、新規プロジェクトを作成します。

本チュートリアルは大きく分けて、以下の2つからできています。

• 画面の作成
• プログラムを書いて、UISliderの値を画面に表示する

画面の作成

背景色

まず画面の背景を白から黒に変更します。

①Viewを選択

②BackgroundのWhite Colorと書かれているところをクリック

Black Colorを選択します。

すると画面の背景色が黒に切り替わります。

画像の読み込み

まずダウンロードした画像をすべて、Assets.xcassesにドラッグ&ドロップでうつします。

こんな感じになればOKです。画像をダブルクリックしてそれぞれ名前を適当につけておいて下さい。

3つのボタン(再生・戻る・進む)を画面に置く

• 再生ボタン
• 前に戻るボタン
• 次に進むボタン

の3つを画面に作ります。

①矢印の先をクリック

②buttonと入力

③Buttonをドラッグ&ドロップで画面に置く

ボタンに画像を入れます。ボタンを選択して、imageの入力欄に、play(再生ボタンの画像ファイルの名前)と入力して下さい。

※もし画像が表示されなければ、Assets.xcassetsの画像ファイル名を確認してみて下さい。

ボタンのサイズを変更します。

①矢印の先のSize Inspectorを選択

②Width(幅)を100にセット

③Height(高さ)を100にセット

同じように、

• 戻るボタン
• 進むボタン

を下の写真のように用意します。

両方ともボタンのサイズは、

Width(幅) 50、Height(高さ) 50にして下さい。

UISliderを置く

次に、音量調整用のUISliderを準備します。

①矢印の先の、Libraryを選択

②sliderと打って、Sliderをドラッグ&ドロップで再生ボタンの少し上に置く。

①Horizontal Sliderが選択されているか確認

②Widthを320に変更して、Sliderを画面の左右の真ん中に来るように動かす。(Sliderが真ん中に来ると、縦の青線が出ます)

次にUISliderの範囲と色を決めます。

①Valueに40(UISliderの値をデフォルトで40に設定)

②UISliderが取れる最小値を0に設定

③UISliderが取れる最大値を100に設定

④色を変更するためにクリック

Customをクリック！

上部の左から2つ目のタブをクリックして、

Hex Color #のところを、

1ABC9C

と入力してエンター押します。

2つの音量ボタンを置く

まずミュート(音量なし)ボタンを準備しましょう。。

①UISliderの左側にボタンをおきます。

②サイズの調整を行います。WIdth(幅)25、Height(高さ)25にして下さい。

画像を入れます。

①ボタンをクリックして選択する

②imageの入力欄に画像の名前(mute)を入れて、エンターを押す。画像が表示されればOKです。

同じようにUISliderの右側にもボタンをおきましょう。やり方は全く同じです。

サイズはwidth(幅)25、height(高さ)25で、UISliderの右横において下さい。

こんな感じになればOKです。

音量表示ラベルを準備する

まず下線のLibraryをクリックして、labelと入力します。

ドラッグ&ドロップで画面におきます。

次に細かい調整をします。

まず引っ張ってきたラベルをクリックして、画像右上の赤線のボタンをクリックします。

①Textの入力欄の下に0と入力してエンターを押す

②ColorのDefault(Dark Text Color)をクリックして、White Colorに変える

③Fontの入力欄の右端の上下ボタンの上を押して、サイズを17まで上げる。

④ラベルの文字を中央揃えにする

最後に、上の画像のように、ラベルをドラッグ&ドロップで画面の中央に来るようにします。(だいたいでも構いません。)

歌手名ラベルを用意する

上で行ったように、まずLabel(ラベル)を画面に持ってきます。
そして、以下のように設定します。

①ラベルをUISliderの左端の上あたりに置く(だいたいでOKデス)

②Textの下の入力欄に、MINHO(好きな歌手名でOK)と入力してエンター押す

③ColorをWhiteに変更

④矢印の先のTボタンをクリック。

⑤StyleをLightに変更。

⑥Sizeを14に変更。

曲名表示ラベル

上の歌手名ラベルと同じ要領で作っていきます。

①ラベルを歌手名ラベルの上に置く

②Textの下の入力欄に、I’m Home と入力

③ColorをWhiteに変更

④FontのTボタンを押して、styleをbold、sizeを22に変更

アルバムジャケット画像

画面に置くものはこれで最後です。

ライブラリボタンを押して、imageと打つとImage Viewが出てきます。

ドラッグ&ドロップで画面におきます。

まずサイズの調整です。

X,Yは目安で、51,157あたり(自分のプロジェクトで良さそうな場所に決めて大丈夫です)

サイズは、Width(幅)を312、Height(高さ)を382にして下さい。

最後に画像を入れていきます。

①imageに、背景画像のファイル名(bg)を入力

②Content Modeを、Aspect Fit -> Aspect FIllに変更

これで画面の準備は整いました。

後はUISlderのつまみが動いた時に値をラベルに反映させる処理を書くだけです。下で続きを見ていきましょう。

UIsliderで音量を表示する

画面を分割する

まず画面を、Main.storyboardとViewCotroller.swiftの2つに分割します。

①黄色のボタンをクリックする

②矢印の先のボタンをクリックしてVIewController.swiftを出す

③※もしVIewController.swiftが出てこなければ、×ボタンを押して、何度かやり直す

UISliderをViewControllerに接続する

UISliderを選択して、ドラッグ&ドロップで、viewDidloadメソッドの上に繋げます。

Connectを押します。

音量ラベルをつなぐ

Connectを押します。

アプリ起動時の設定

アプリ起動時に、音量ラベルにUISliderの値を表示するようにします。

画面にUISliderを置いた時、デフォルトの値は40に設定してあるので、40をアプリ起動時に表示するようにします。

アプリ起動時はViewDidLoadが呼ばれるので、ViewDidLoad内に以下の2行を追加します。

①では、UISlider(volumeSlider)の値(小数)をInt(整数)に変換してcurrentValueに入れています。

②で、音量ラベル(volumeLabel)のテキストに、①の40(Int、整数)を文字列(String)に変換して入れています。

①ではvolumeSlider.valueは小数で、今回は整数にしたいので変換しています。

②では、volumeLabel.textは文字列(String)なので、整数から変換しています。

なので、アプリを起動してみると、40がデフォルトで表示されるようになっています。

次に、UISlderが動かされると、音量ラベル(volumeLabel)のテキストが変わるようにします。

UISliderを右クリックでVIewControllerまで引っ張ってきます。

Connectを押します。

そして以下の2行を追加してメソッドを作ります。

①でcurrentValueにsender(UISlider)の値を入れる ->UISlderが動かされる度に値が変わる

②音量ラベル(volumeLabel)のテキストに、①の値を文字列(String)に変換して表示する

以上で完成です！

シュミレータを起動して確認してみて下さい。

UISliderを動かすと、ラベルの値が変わっています！

終わりに

以上で、UISlderを使ったチュートリアルを終わります。

他にも面白いチュートリアル書いているので参考にしてみて下さい〜〜。