2015年08月07日
16. Swift入門 UIView・UIcolorでグラデーション背景の作成
キーワード
：Xcodeの使い方 Swiftプログラミング
UIViewクラス for-inループ グラデーション背景
今回の記事では、
Macのプログラミングのための
統合開発環境
（IED：Integrated Development Environment）
のXcodeを使って、
Xcode
Swift言語での
iPhone・iPad（iOS）アプリ開発の
プログラミングの入門的な内容の記事を
まとめておきます。
動画では、
コード入力で、
「 UIViewクラス 」
「 UIColorクラス 」や、
iOSデバイスの横幅・縦幅を取得して、
「 for-inループ 」で
四角形の描画領域を、
下方にずらすことで、
背景のグラデーションの色を変更しています。
Xcodeで、
iOSアプリ開発するための
設定方法がわからない方がいましたら、
︎ 3. Swift入門 iPhoneでHello World︎ 4. Xcode(Mac)でSwift言語入門 Hello Worldプログラム などの記事もご活用ください。
「 Single View Application」の設定方法などを
解説しています。
また、
長方形領域などを指定する際の
iOSデバイス（iPhone６）上の、
描画と表示位置・配置の関係については、
︎ 6. Swift入門 描画と表示位置・配置の関係 の記事もご活用ください。
Swift入門 UIView・UIcolorでグラデーション背景の作成（動画）
[ 入力前のコード ]（ViewController.swift）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}[ 動画で入力したコード例 ]（ViewController.swift）
let screenSizeWidth = UIScreen.mainScreen().bounds.size.width
let screenSizeHeight = UIScreen.mainScreen().bounds.size.heightsampleBackground()func sampleBackground() {
var sampleBackgroundColor : UIView!
for i in 30...Int(screenSizeHeight) {
sampleBackgroundColor = UIView(frame: CGRectMake(0, CGFloat(i), screenSizeWidth, screenSizeHeight))
sampleBackgroundColor.backgroundColor = UIColor(red: CGFloat(Double(i) / Double(screenSizeHeight)), green: 0.0, blue: 0.0, alpha: 1.0)
view.addSubview(sampleBackgroundColor)
}
}＊「 let screenSizeWidth = UIScreen.mainScreen().bounds.size.width 」
でiOSデバイスの横幅を取得し、
「 let screenSizeHeight = UIScreen.mainScreen().bounds.size.height 」
縦幅（高さ）を取得しています。
＊「 let：後から変更できない変数の作成 」を利用して
「 screenSizeWidth 」、「screenSizeHeight」
という名前の変数を、
「 var 」を利用して、
「 sampleBackgroundColor という名前の変数を、
また、
「 for-inループ 」内の変数として
「 i 」という名前の変数を作成しています。
自分でわかりやすいような変数を作成してみていただければと
思います。
＊ 「 func 」を利用して、
「 sampleBackground() 」という関数を作成しています。
自分でわかりやすいような関数を作成してみていただければと
思います。
＊ 「 Int：整数型 」、「 double：64ビット浮動小数点 」
[ 最終的なサンプルコード ]（ViewController.swift）
import UIKit
class ViewController: UIViewController {
let screenSizeWidth = UIScreen.mainScreen().bounds.size.width
let screenSizeHeight = UIScreen.mainScreen().bounds.size.height
override func viewDidLoad() {
sampleBackground()
super.viewDidLoad()
}
func sampleBackground() {
var sampleBackgroundColor : UIView!
for i in 30...Int(screenSizeHeight) {
sampleBackgroundColor = UIView(frame: CGRectMake(0, CGFloat(i), screenSizeWidth, screenSizeHeight))
sampleBackgroundColor.backgroundColor = UIColor(red: CGFloat(Double(i) / Double(screenSizeHeight)), green: 0.0, blue: 0.0, alpha: 1.0)
view.addSubview(sampleBackgroundColor)
}
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
＊ コード内に全角スペースが含まれていると
エラーになりますので、
その際は、半角スペースに適宜修正してください。
動画を参考にしていただきながら、
グラデーション背景色の変更、
今回の記事のサンプルコードを例にとると
「 sampleBackgroundColor.backgroundColor = UIColor(red: CGFloat(Double(i) / Double(screenSizeHeight)), green: 0.0, blue: 0.0, alpha: 1.0) 」
のgreen、blueの値を
「 0.0 〜 1.0 」の範囲で変更する。
「 sampleBackgroundColor.backgroundColor = UIColor(red: CGFloat(Double(i) / Double(screenSizeHeight)), green: 0.2, blue: 0.2, alpha: 1.0) 」
など。
また、
「 CGFloat(Double(i) / Double(screenSizeHeight) 」を
「 green 」や「 blue 」の値にするなど
「 sampleBackgroundColor.backgroundColor = UIColor(red: 0.0, green: CGFloat(Double(i) / Double(screenSizeHeight)), blue: 0.0, alpha: 1.0) 」
「 sampleBackgroundColor.backgroundColor = UIColor(red: 0.0, green: 0.0, blue: CGFloat(Double(i) / Double(screenSizeHeight)), alpha: 1.0) 」
など
サンプルプログラムを
変更してiOSシミュレータ上に
さまざまな色のグラデーション背景を
表示させてみてください。
[ スポンサードリンク ]
by はじめてのコンピュータ・パソコン
︎ サイトマップ︎ プロフィール | サイトポリシー・免責事項など︎ CONTENTS（コンテンツ）一覧︎ Xcode(Mac)で覚えるSwiftプログラミング入門講座︎ Xcodeでアプリ開発講座︎ Xcode(Mac)Swiftプログラミング・アプリ開発 関連本特集︎ Mac(マック)関連パソコン iMac・MacBookPro・MacBookAir︎ Apple Watch 特集 APPLE WATCH・SPORT・EDITION︎ プログラミング言語関連記事（一覧）︎ パソコン・コンピュータ学習関連サイトやサービスの情報 ︎ 日本人のプログラミング学習の現在と未来 | #24 デジタルライフコラムposted by HajimeteCPC at 16:51
| Xcode(Mac)で覚えるSwiftプログラミング
