この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
広告
posted by fanblog
2015年08月06日
15. Swift入門 UIview・for-inループでグラデーション描画の作成
： Xcodeの使い方 Swiftプログラミング
UIViewクラス UIColor グラデーション背景
今回の記事では、
Macのプログラミングのための
統合開発環境
（IED：Integrated Development Environment）
のXcodeを使って、
Xcode
Swift言語の入門的な内容の記事を
まとめておきます。
動画では、
コード入力で、
「 UIViewクラス 」
を利用して、
「 UIView 」の
背景の色、
「 backgroundColor 」を
「 UIColorクラス 」で色の指定をして
四角形の
グラフィック領域を設定しています。
また、
「 for-inループ 」で、
ループ内の変数（今回のサンプルでは「 i 」）
を定義し、
ループ内の変数値（「 i 」）に応じて、
透明度（alpha：α値）などが
変更されるように設定することで
グラデーションの描画を実装しています。
Xcodeで、
iOSアプリ開発するための
設定方法がわからない方がいましたら、
? 3. Swift入門 iPhoneて?Hello World
? 4. Xcode(Mac)て?Swift言語入門 Hello Worldフ?ロク?ラム
などの記事もご活用ください。
「 Single View Application 」の設定方法などを
解説しています。
また、
長方形領域などを指定する際の
iOSデバイス（iPhone６）上の、
描画と表示位置・配置の関係については、
? 6. Swift入門 描画と表示位置・配置の関係
の記事もご活用ください。
Swift入門 UIview・for-inループでグラデーション描画の作成（動画）
[ 入力前のコード ] （ViewController.swift）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
[ 動画で入力したコード例 ] （ViewController.swift）
var sampleDrawing : UIView
for i in 0...100 {
sampleDrawing = UIView(frame: CGRect(x: 10 + i, y: 20 + i, width: 220 - i * 2, height: 200 - i * 2))
sampleDrawing.backgroundColor = UIColor.blackColor()
sampleDrawing.alpha = CGFloat(i) / 1000.0
view.addSubview(sampleDrawing)
＊ 今回は、「 var 」を利用して
「 sampleDrawing 」という
名前の変数を作成と、
「 for-inループ 」内の変数として
「 i 」という名前の変数を作成しています。
自分でわかりやすいような変数を作成してみていただければと
思います。
＊「 for i in 0...100 」の意味は、
「 i 」という変数に、
「 0〜100 」までの整数（データ）を
列挙させるように指示をだしています。
[ 最終的なサンプルコード ] （ViewController.swift）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
var sampleDrawing : UIView
for i in 0...100 {
sampleDrawing = UIView(frame: CGRect(x: 10 + i, y: 20 + i, width: 220 - i * 2, height: 200 - i * 2))
sampleDrawing.backgroundColor = UIColor.blackColor()
sampleDrawing.alpha = CGFloat(i) / 1000.0
view.addSubview(sampleDrawing)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
＊ コード内に全角スペースが含まれていると
エラーになりますので、
その際は、半角スペースに適宜修正してください。
グラデーション描画をする位置の変更、
＊「 CGRect(x, y, width, height) 」の
x や y の値を変更
グラーデーション描画の大きさの変更、
＊「 CGRect(x, y, width, height) 」の
width や height の値を変更
グラデーションの色の変更、
＊ 色の例．
黒色 ：UIColor.blackColor()
明るい灰色：UIColor.lightGrayColor()
暗い灰色 ：UIColor.darkGrayColor()
灰色 ：UIColor.grayColor()
白色 ：UIColor.whiteColor()
赤色 ：UIColor.redColor()
緑色 ：UIColor.greenColor()
黄色 ：UIColor.yellowColor()
オレンジ色：UIColor.orangeColor()
今回の記事のサンプルコードを例にとると
「 sampleDrawing.backgroundColor = UIColor.redColor() 」
「 for-inループ 」の列挙データ数の変更、
＊ 今回の記事のサンプルコードを例にとると
「 for i in 0...150 」など
透明度の変更、
＊ 今回の記事のサンプルコードを例にとると
「 sampleDrawing.alpha = CGFloat(i) / 1200.0 」など
などいろいろと
サンプルプログラムを
変更してiOSシミュレータ上に
表示させてみてください。
[ スポンサードリンク ]
by はじめてのコンピュータ・パソコン
? サイトマップ
? プロフィール | サイトポリシー・免責事項など
? CONTENTS（コンテンツ）一覧
? Xcode(Mac)で覚えるSwiftプログラミング入門講座
? Xcodeでアプリ開発講座
? Xcode(Mac)Swiftプログラミング・アプリ開発 関連本特集
? Apple Watch 特集 APPLE WATCH・SPORT・EDITION
? プログラミング言語関連記事（一覧）
? パソコン・コンピュータ学習関連サイトやサービスの情報
? 日本人のプログラミング学習の現在と未来 | #24 デジタルライフコラム
