【Xcode/Swift5】【チートシート】Swiftでカラーを指定する方法をまとめてみました。satorikublogsatorikublogサトリクのこだわりのモノ紹介ホームXcode/swift【Xcode/Swift5】【チートシート】Swiftでカラーを指定する方法をまとめてみました。6分SHAREツイートシェアはてブLINEPocketサトリクどうも、サトリクです。この記事では、Swift5でのカラー指定方法について、徹底解説していきたいと思います。まとめ先ほども言った通り、カラー指定の方法は、以下のようにたくさんあります。一つ一つ丁寧に解説して行きます。storyboardでカラー指定する方法UIColorのプロパティでカラー指定する方法UIColorでRGB(CGFloat型)でカラー指定する方法UIColorを無理やりRGBでカラー指定する方法UIColorを16進数のカラーコードでカラー指定する方法UIColorをRGBでカラー指定する方法カラーリテラルを使ってカラー指定する方法Assets.xcassetsで色を管理し、カラー指定する方法サトリク今回の説明では、ボタンの背景の色を変えていきます。目次に戻るstoryboardでカラー指定する方法おそらく一番簡単なのがこの方法です。これは誰でもわかる方法なのですが、一応解説します。クリック3Backgroundを選択する。すると、このような、ウィンドウが開き、色を指定することができます。使いたい色がない場合は、一番下のcustomを選択すると、自由に色を指定できます。customを押すと以下のように、色々と自由に決めることができます!変更すると、このように色が変わります。(ボタンやラベル)の色指定は、この方法でいいと思います。これでは処理や場合によって色を変更することはできません。そこで、これ以降は、コードで色の指定する方法をメインで紹介していきます。目次に戻るUIColorのプロパティでカラー指定する方法これは、コード上で指定する方法の中で一番簡単な方法です。ボタンとコードを紐付けます。(など)に、以下のコードを書くだけです。UIColor.red細かくいうと、ボタン(btn)の背景(backgroundColor)に、元からある色(UIColor)の赤(red)を入れてるだけです。ちなみに、最初のUIColorは省略できますので、なるべく省略しましょう。.redこれだけで色を変えることができます。元からある色(プロパティ)は、以下のように、15種類もあります。–15種類ありますが、この方法では、自分の好きな色に指定できません。次は、コード上で自分の好きな色を指定する方法をご紹介します。次は、自分の好きな色を入れる方法をご紹介します。僕のブログのメインカラー#4887BFを指定したいと思います。カラーコードの#4887BFをRGBに変換します。いちいち計算するのはめんどくさいので、#4887BFで検索します。すると、RGBが簡単にわかります。これをCGFloat型という型に変換します。変換の仕方は、RとGとBを255で割ります。1.0)そうすると、指定できます!こんな感じです。サトリクブログとほぼ同じ色に指定することができました!このように、RGBをCGFloat型に変換してUIColorに代入することで、自分の好きな色に指定できます。この方法では、毎回毎回計算しなければいけませんし、四捨五入して入れてるので、ごくわずかですが、指定したい色と違います。(四捨五入せずに入れてもいいけど長くなる。)では、次は、この方法を利用して、もっとUIColorの指定が楽な方法をご紹介します。目次に戻るUIColorを無理やりRGBでカラー指定する方法これは、先ほどと同じ方法ですが、少し代入の仕方を変えます。今回は、この計算ごと突っ込みます。サトリクこんな感じです。1.0)これだと意外と楽ですよね。これじゃぱっと見何色かわからないし、255を毎回書くのがだるいですよね。16進数のカラーコード(#FFFFFF)のみで入れる方法はないのでしょうか。あります!目次に戻るUIColorを16進数のカラーコードでカラー指定する方法さあ、これがコードでの指定の最終形態です。#4887BFこの16進数のカラーコードを入力するだけで、色の指定ができるようにしましょう。クラスファイルを作成しましょう。Fileを選んで、Nextを押してください。UIColorHexという名前をつけて、Createを押してください。以下のコードをコピペしてください。1))}}サトリクこんな感じ!あとは、このように指定するだけです。"4887BF")alphaも指定したい場合は、以下のように記述すればできます。0.5)サトリク素晴らしいですね!僕はこのやり方が一番おしゃれで楽だと思います。目次に戻るUIColorをRGBでカラー指定する方法デザイナーによっては、16進数のカラーコードではなく、RGBで送ってくる場合があるかもしれません。その場合、コードも16進数のカラーコードではなく、RGBで指定しましょう。FileをUIColorRGB.swift(任意)という名前で、クラスを作成し、以下のコードをコピペしましょう。rgba[3])}}あとは、このように指定するだけです。191)alphaも指定したい場合は、以下のように記述すればできます。次は、少し裏技のようなカラー指定方法をご紹介します。Literalというのが候補に出てくるので、enterを押して選択しましょう。すると、なんとコード上に、色のタイルみたいなものが表示されました!これをダブルクリックしてみてください!ダブルクリックすると、以下のような、パレットが出てきます。Otherを押せば、storyboardのカラー指定みたいに、色を自由に変えることができます。サトリク最初これを見たとき、Xcodeってすげーって感心しました笑コード上にこんなタイルみたいなものが出てくるなんてビビりますよね。笑この方法はわかりやすく、簡単ですごいのですが、デメリットもあります。デメリット黒を指定した場合、背景と混在してわかりにくい。同じ色の場合、区別がつきにくい。デメリットもあります。サトリクこれは、人それぞれの好みですね!ただ、開発者が複数人いる時は、あらかじめ書き方を揃えておいたほうがいいですね。目次に戻るAssets.xcassetsで色を管理し、カラー指定する方法これが最後に紹介するカラー指定の方法です。1左側のNavigatorから、Assets.xcassetsというフォルダを選択します。2+ボタンを選択します。Setを選択してください。すると、真ん中らへんにタイルが表示されるので、そのタイルの色を変更しましょう。1タイルに名前をつける。上記の設定が完成したら、指定したいコードに戻って、以下のような、コードを書きます。"MainColor")※MainColorは自分がつけた名前を入れるこれで、先ほど設定した色が表示されます。サトリクこれのいい点は色を管理できるところです。アプリで使っている色は、Assets.xcassetsを見ればすぐにわかりますからね。この方法も意外と好きですね笑まとめここまで、たくさんの色指定の方法をご紹介してきました。自分が一番やりやすい方法を見つけてみてください!一つ注意して欲しい点が、なるべく書き方を統一することです。この色では、この色指定方法を使い、この色ではこの色指定方法みたいな感じで、やり方がバラバラだと、可読性が失われます。【Xcode/Swift5】画面遷移のチートシート。【2020年版】Swift、Xcodeのオススメの参考書まとめてみました。サトリク21歳のエンジニアです。仕事終わってから1人で淡々とブログを書いています。目標は、このブログを自慢できるほどのコンテンツに仕上げることです。自分が買ったモノの紹介はこちらのブログで紹介しています。