この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
広告
posted by fanblog
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() {
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
[ 動画で入力したコード例 ] （ViewController.swift）
let screenSizeWidth = UIScreen.mainScreen().bounds.size.width
let screenSizeHeight = UIScreen.mainScreen().bounds.size.height
sampleBackground()
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 デジタルライフコラム
