はじめてのSwift

for文を使って色のグラデーションを作ってみよう

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
UIColorクラスのメソッドを使うことで、綺麗な色のグラデーションでラベルを作る方法を解説します。
講師:
06:09

字幕

このレッスンでは、for文を使って、 様々な色のグラデーションを 作ることに、チャレンジしていきたいと 思います。 まずこちらのコードをご覧ください。 これまで私たちは、RGBという 光の三原色の組み合わせによって、 様々な色を作ることができるということを 見てきました。 ここではこれに、for文を 組み合わせてみたと思います。 ではfor文を書いていきましょう。 まずfor i in 0から10まで、 このように書いて書いてやることで、 0から10の繰り返しを 行うことができます。 そしてこの0から10の数値を基にして、 このようにwhite変数というものの中に、 0.1にiを掛けたものを計算していきます。 この0から始まった時に、0X0.1は0、 そして10X0.1は1になりますので、 これで0.0から1.0までの 計算を行うことができます。 ただしここで、ちょっとエラーがこうやって 表示されているんですけども、 これ何かといいますと、 左側の方が少数なのに対して、 右側の方は整数だと、で、このように 変数を使った場合の計算というのは、 自動的に変換してくれませんので、 このiの変数の方を、 float(i)の中に入れてやる、 ということをしないと、 上手いこと計算してくれません。 はい、ではこれでエラーが消えましたので、 このwhiteがですね、どのようになっているのか ということを、 タイムラインに追加して、 見ておきたいと思います。 そうするとタイムラインの上で、 0.0から始まって1.0まで、 このようになだらかに数値が変化している、 というのが確認できます。 ではこのwhiteというのを使って、 色を作ってみましょう。 すぐ上にもありますけど、 UIColor(white alpha、 この二つの引数があるメソッドを使うことで、 whiteにwhite、 そしてalphaに1.0を指定して、 色を作ります。 ただしここでも、このwhiteという引数に 渡すこの変数は、 CGFloatにしてくださいねという、 ちょっとね、規約がありますので、 ここだけ少し面倒くさいですけど、 このように変換してやると、 このUIColorがこのwhiteという 変数を基にして作成できます。 ではこちらも、タイムラインに追加して、 結果を見てみましょう。 これが結構きれいに表示されるんですけど、 そうするとこのようにですね、 UIColorが黒から始まって、 白までの鮮やかなグラデーションで、 表示されていることが分かります。 それではさらに同じことを、 今度はフルカラーのRGBを、 この光の三原色を使って、 やってみたいと思います。 この下の所に新しいfor文を追加します。 今度も0から10までの繰り返しを行って、 10回の繰り返しの中で色を作成していきます。 先ほどはこの白一色を作成しましたけど、 今度はRGBという光の三原色を、 いじりますので、まず赤を作ります。 赤は白と一緒で、0.1にこのiを 掛け算しましょう。 このように0.1*Float(i)と書くことで、 まずこのような0.1から1.0までの グラフが出来上がります。 次にgreenの計算をします。 今回はgreenに関しては、 1.0を固定にしておきたいと思います。 そして次にblue、blueを作りましょう。 blueはこのredを基にして、 作成したいと思います。 で、redは0.0から1.0になっていましたけど、 ここでblueをですね、 1.0からredを引いた値に することによって、 グラフを反対にすることができます。 実際にタイムラインに追加してみます。 そうすると、上の赤に対して、 下のこのblueがですね、このように、 0.0から始まって、逆方向に、 だんだん減っていってる、 というのが分かると思います。 このようにして追加したこの RとGとB、 greenはまったくフラットに、 全部こう1.0になってますので、 このRとGとBの値を使って、 UIColorを作成します。 それではUIColorを作りましょう。 今回はred、green、blue、 alpha、という4つの引数をもった、 このイニシャライザを使って、 redにred、 greenにgreen、 そしてbueにblue、 そしてalphaに1.0を 指定します。 ただしここでも、上のwhiteと同様に、 RもGもBも全部、 CGFloatという値に変更して、 変換しておく必要がありますので、 CGFloat()をそれぞれにつけてやります。 ちょっと長くなりますけど、 それだけでプログラムが動いてくれます。 はいそれでは、このようにして CGFlaotに変換することで、 UIColorが作成できました。 ではタイムラインに追加して見てみましょう。 このレッドとブルー、そしてグリーンを 基にした色が、 このように作成で来ました。 このように、徐々に変化する少数を、 for文を使って用意することによって、 様々な色がですね、こうやってきれいに、 徐々に変わっていくような 色を作成することができます。 このレッスンでは、for文を使って、 色のグラデーションを作る方法について、 説明しました。

はじめてのSwift

このコースではまだSwiftを学んだことがない方を対象に、Swiftのプログラミング知識を基礎から一歩一歩解説していきます。変数や数値計算、条件分岐や配列、乱数など基礎的な内容を学んだのち、XcodeでiPhone用のアプリを作成します。Swiftの特徴であるPlaygroundの使い方も説明します。

2時間08分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年05月14日
再生時間:2時間08分 (25 ビデオ)

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。