新規記事の投稿を行うことで、非表示にすることが可能です。
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() {
super.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 デジタルライフコラムposted by HajimeteCPC at 14:53
| Xcode(Mac)で覚えるSwiftプログラミング
2015年08月05日
14. Swift入門 UIViewでグラフィックの描画 - 円の描画編 -
キーワード
：Xcodeの使い方 Swiftプログラミング
UIViewクラス 円の描画
今回の記事では、
Macのプログラミングのための
統合開発環境
（IED：Integrated Development Environment）
のXcodeを使って、
Xcode
Swift言語の入門的な内容の記事を
まとめておきます。
動画では、
コード入力で、
「 UIViewクラス 」
を利用して、
「 UIView 」の
背景の色、
「 backgroundColor 」を
「 UIColorクラス」で色の指定をして
四角形（正方形）の
グラフィック領域を設定しています。
その後、
「 UIViewクラス 」の
「 layerプロパティ 」を
利用して、
四角形（今回は正方形）のグラフィック領域の、
幅を取得し、
コーナー半径を
四角形（今回は正方形）のグラフィック領域の
幅の半分に指定することで、
円（丸）の描画を実施しています。
Xcodeで、
iOSアプリ開発するための
設定方法がわからない方がいましたら、
︎ 3. Swift入門 iPhoneでHello World︎ 4. Xcode(Mac)でSwift言語入門 Hello Worldプログラム などの記事もご活用ください。
「 Single View Application」の設定方法などを
解説しています。
また、
「 CGRectMake(x, y, width, height) 」
で、長方形領域を指定する際の
iOSデバイス（iPhone６）上の、
描画と表示位置・配置の関係については、
︎ 6. Swift入門 描画と表示位置・配置の関係 の記事もご活用ください。
Swift入門 UIViewでグラフィックの描画 円の描画編（動画）
[ 入力前のコード ]（ViewController.swift）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}[ 動画で入力したコード例 ]（ViewController.swift）
let sampleDrawing = UIView(frame: CGRectMake(20, 20, 50, 50))
sampleDrawing.backgroundColor = UIColor.blackColor()
sampleDrawing.layer.cornerRadius = CGRectGetWidth(sampleDrawing.bounds) / 2.0
view.addSubview(sampleDrawing)＊ 今回は、「 let：後から変更できない変数の作成 」を利用して
「 sampleDrawing 」という
名前の変数を作成しています。
自分でわかりやすいような変数を作成してみていただければと
思います。
[ 最終的なサンプルコード ]（ViewController.swift）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let sampleDrawing = UIView(frame: CGRectMake(20, 20, 50, 50))
sampleDrawing.backgroundColor = UIColor.blackColor()
sampleDrawing.layer.cornerRadius = CGRectGetWidth(sampleDrawing.bounds) / 2.0
view.addSubview(sampleDrawing)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
＊ コード内に全角スペースが含まれていると
エラーになりますので、
その際は、半角スペースに適宜修正してください。
円を描画する位置の変更、
＊「 CGRectMake(x, y, width, height) 」の
xやyの値を変更
円の大きさの変更、
＊「 CGRectMake(x, y, width, height) 」の
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() 」
などいろいろと
サンプルプログラムを
変更してiOSシミュレータ上に
表示させてみてください。
[ スポンサードリンク ]
by はじめてのコンピュータ・パソコン
︎ サイトマップ︎ プロフィール | サイトポリシー・免責事項など︎ CONTENTS（コンテンツ）一覧︎ Xcode(Mac)で覚えるSwiftプログラミング入門講座︎ Xcodeでアプリ開発講座︎ Xcode(Mac)Swiftプログラミング・アプリ開発 関連本特集︎ Apple Watch 特集 APPLE WATCH・SPORT・EDITION︎ プログラミング言語関連記事（一覧）︎ パソコン・コンピュータ学習関連サイトやサービスの情報 ︎ 日本人のプログラミング学習の現在と未来 | #24 デジタルライフコラムposted by HajimeteCPC at 15:34
| Xcode(Mac)で覚えるSwiftプログラミング
13. Swift入門 UIViewでグラフィックの描画 - 四角の描画編：面取りあり -
キーワード
：Xcodeの使い方 Swiftプログラミング
UIViewクラス 面取り四角形の描画
今回の記事では、
Macのプログラミングのための
統合開発環境
（IED：Integrated Development Environment）
のXcodeを使って、
Xcode
Swift言語の入門的な内容の記事を
まとめておきます。
動画では、
コード入力で、
「 UIViewクラス 」
を利用して、
「 UIView 」の
背景の色、
「 backgroundColor 」を
「 UIColorクラス」で色の指定をして
四角形（正方形・長方形）の
グラフィックを表示させています。
また、
「 UIViewクラス 」の
「 layerプロパティ 」を
利用して、
角のコーナーの半径を設定し、
面取りを実施しています。
Xcodeで、
iOSアプリ開発するための
設定方法がわからない方がいましたら、
︎ 3. Swift入門 iPhoneでHello World︎ 4. Xcode(Mac)でSwift言語入門 Hello Worldプログラム などの記事もご活用ください。
「 Single View Application」の設定方法などを
解説しています。
また、
「 CGRectMake(x, y, width, height) 」
で、長方形領域を指定する際の
iOSデバイス（iPhone６）上の、
描画と表示位置・配置の関係については、
︎ 6. Swift入門 描画と表示位置・配置の関係 の記事もご活用ください。
Swift入門 UIViewでグラフィックの描画 - 四角の描画編：面取りあり -（動画）
[ 訂正事項 ]
class ViewController: UIViewController, UITextFieldDelegate
→ class ViewController: UIViewController
[ 入力前のコード ]（ViewController.swift）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}[ 動画で入力したコード例 ]（ViewController.swift）
let sampleDrawing = UIView(frame: CGRectMake(20, 20, 100, 100))
sampleDrawing.backgroundColor = UIColor.blackColor()
sampleDrawing.layer.cornerRadius = 10.0
view.addSubview(sampleDrawing)＊ 今回は、「 let：後から変更できない変数の作成 」を利用して
「 sampleDrawing 」という
名前の変数を作成しています。
自分でわかりやすいような変数を作成してみていただければと
思います。
[ 最終的なサンプルコード ]（ViewController.swift）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let sampleDrawing = UIView(frame: CGRectMake(20, 20, 100, 100))
sampleDrawing.backgroundColor = UIColor.blackColor()
sampleDrawing.layer.cornerRadius = 10.0
view.addSubview(sampleDrawing)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
＊ コード内に全角スペースが含まれていると
エラーになりますので、
その際は、半角スペースに適宜修正してください。
四角形を描画する位置の変更、
＊「 CGRectMake(x, y, width, height) 」の
xやyの値を変更
四角形の形の変更（長方形、正方形など）、
＊「 CGRectMake(x, y, width, height) 」の
widthやheightの値を変更
四角形の角のコーナー半径を変更、
＊ 今回の記事のサンプルコードを例にとると
「 sampleDrawing.layer.cornerRadius = 15.0 」など
塗りつぶす色の変更、
＊ 色の例．
黒色 ：UIColor.blackColor()
明るい灰色：UIColor.lightGrayColor()
暗い灰色 ：UIColor.darkGrayColor()
灰色 ：UIColor.grayColor()
白色 ：UIColor.whiteColor()
赤色 ：UIColor.redColor()
緑色 ：UIColor.greenColor()
黄色 ：UIColor.yellowColor()
オレンジ色：UIColor.orangeColor()
今回の記事のサンプルコードを例にとると
「 sampleDrawing.backgroundColor = UIColor.redColor() 」
などいろいろと
サンプルプログラムを
変更してiOSシミュレータ上に
表示させてみてください。
[ スポンサードリンク ]
by はじめてのコンピュータ・パソコン
︎ サイトマップ︎ プロフィール | サイトポリシー・免責事項など︎ CONTENTS（コンテンツ）一覧︎ Xcode(Mac)で覚えるSwiftプログラミング入門講座︎ Xcodeでアプリ開発講座︎ Xcode(Mac)Swiftプログラミング・アプリ開発 関連本特集︎ Apple Watch 特集 APPLE WATCH・SPORT・EDITION︎ プログラミング言語関連記事（一覧）︎ パソコン・コンピュータ学習関連サイトやサービスの情報 ︎ 日本人のプログラミング学習の現在と未来 | #24 デジタルライフコラムposted by HajimeteCPC at 15:34
| Xcode(Mac)で覚えるSwiftプログラミング
2015年08月04日
12. Swift入門 UIViewでグラフィックの描画 - 四角の描画編：枠線あり -
キーワード
：Xcodeの使い方 Swiftプログラミング
UIViewクラス 四角形の描画
今回の記事では、
Macのプログラミングのための
統合開発環境
（IED：Integrated Development Environment）
のXcodeを使って、
Xcode
Swift言語の入門的な内容の記事を
まとめておきます。
動画では、
コード入力で、
「 UIViewクラス 」
を利用して、
「 UIView 」の
背景の色、
「 backgroundColor 」を
「 UIColorクラス」で色の指定をして
四角形（正方形・長方形）の
グラフィックを表示させています。
また、
「 borderWidthプロパティ 」や、
「 borderColorプロパティ 」を利用して、
境界線の幅や、色を指定し、
四角形の外側の枠を描画する方法を
解説しています。
Xcodeで、
iOSアプリ開発するための
設定方法がわからない方がいましたら、
︎ 3. Swift入門 iPhoneでHello World︎ 4. Xcode(Mac)でSwift言語入門 Hello Worldプログラム などの記事もご活用ください。
「 Single View Application」の設定方法などを
解説しています。
また、
「 CGRectMake(x, y, width, height) 」
で、長方形領域を指定する際の
iOSデバイス（iPhone６）上の、
描画と表示位置・配置の関係については、
︎ 6. Swift入門 描画と表示位置・配置の関係 の記事もご活用ください。
Swift入門 UIViewでグラフィックの描画 - 四角の描画編：枠線あり -（動画）
[ 訂正事項 ]
class ViewController: UIViewController, UITextFieldDelegate
→ class ViewController: UIViewController
[ 入力前のコード ]（ViewController.swift）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}[ 動画で入力したコード例 ]（ViewController.swift）
let sampleDrawing = UIView(frame: CGRectMake(20, 20, 100, 100))
sampleDrawing.layer.borderWidth = 5
sampleDrawing.layer.borderColor = UIColor.redColor().CGColor
sampleDrawing.backgroundColor = UIColor.blackColor()
view.addSubview(sampleDrawing)＊ 今回は、「 let：後から変更できない変数の作成 」を利用して
「 sampleDrawing 」という
名前の変数を作成しています。
自分でわかりやすいような変数を作成してみていただければと
思います。
[ 最終的なサンプルコード ]（ViewController.swift）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let sampleDrawing = UIView(frame: CGRectMake(20, 20, 100, 100))
sampleDrawing.layer.borderWidth = 5
sampleDrawing.layer.borderColor = UIColor.redColor().CGColor
sampleDrawing.backgroundColor = UIColor.blackColor()
view.addSubview(sampleDrawing)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
＊ コード内に全角スペースが含まれていると
エラーになりますので、
その際は、半角スペースに適宜修正してください。
四角形を描画する位置の変更、
＊「 CGRectMake(x, y, width, height) 」の
xやyの値を変更
四角形の形の変更（長方形、正方形など）、
＊「 CGRectMake(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() 」
境界線の枠の幅や、
＊ 今回の記事のサンプルコードを例にとると
「 sampleDrawing.layer.borderWidth = 10 」 など
境界線の枠の色、
＊ 今回の記事のサンプルコードを例にとると
「 sampleDrawing.layer.borderColor = UIColor.blueColor().CGColor 」
などいろいろと
サンプルプログラムを
変更してiOSシミュレータ上に
様々な位置や形の
四角形と外側の枠線を表示させてみてください。
[ スポンサードリンク ]
by はじめてのコンピュータ・パソコン
︎ サイトマップ︎ プロフィール | サイトポリシー・免責事項など︎ CONTENTS（コンテンツ）一覧︎ Xcode(Mac)で覚えるSwiftプログラミング入門講座︎ Xcodeでアプリ開発講座︎ Xcode(Mac)Swiftプログラミング・アプリ開発 関連本特集︎ Apple Watch 特集 APPLE WATCH・SPORT・EDITION︎ プログラミング言語関連記事（一覧）︎ パソコン・コンピュータ学習関連サイトやサービスの情報 ︎ 日本人のプログラミング学習の現在と未来 | #24 デジタルライフコラムposted by HajimeteCPC at 15:14
| Xcode(Mac)で覚えるSwiftプログラミング
11. Swift入門 UIViewでグラフィックの描画 - 四角の描画編：枠線なし -
キーワード
：Xcodeの使い方 Swiftプログラミング
UIViewクラス 四角形の描画
今回の記事では、
Macのプログラミングのための
統合開発環境
（IED：Integrated Development Environment）
のXcodeを使って、
Xcode
Swift言語の入門的な内容の記事を
まとめておきます。
動画では、
コード入力で、
「 UIViewクラス 」
を利用して、
「 UIView 」の
背景の色、
「 backgroundColor 」を
「 UIColorクラス」で色の指定をして
四角形（正方形・長方形）の
グラフィックを表示させる方法
を解説しています。
Xcodeで、
iOSアプリ開発するための
設定方法がわからない方がいましたら、
︎ 3. Swift入門 iPhoneでHello World︎ 4. Xcode(Mac)でSwift言語入門 Hello Worldプログラム などの記事もご活用ください。
「 Single View Application」の設定方法などを
解説しています。
また、
「 CGRectMake(x, y, width, height) 」
で、長方形領域を指定する際の
iOSデバイス（iPhone６）上の、
描画と表示位置・配置の関係については、
︎ 6. Swift入門 描画と表示位置・配置の関係 の記事もご活用ください。
Swift入門 UIViewでグラフィックの描画 - 四角の描画編：枠線なし -（動画）
[ 訂正事項 ]
class ViewController: UIViewController, UITextFieldDelegate
→ class ViewController: UIViewController
[ 入力前のコード ]（ViewController.swift）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}[ 動画で入力したコード例 ]（ViewController.swift）
let sampleDrawing = UIView(frame: CGRectMake(20, 20, 100, 100))
sampleDrawing.backgroundColor = UIColor.blackColor()
view.addSubview(sampleDrawing)＊ 今回は、「 let：後から変更できない変数の作成 」を利用して
「 sampleDrawing 」という
名前の変数を作成しています。
自分でわかりやすいような変数を作成してみていただければと
思います。
[ 最終的なサンプルコード ]（ViewController.swift）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let sampleDrawing = UIView(frame: CGRectMake(20, 20, 100, 100))
sampleDrawing.backgroundColor = UIColor.blackColor()
view.addSubview(sampleDrawing)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}＊ コード内に全角スペースが含まれていると
エラーになりますので、
その際は、半角スペースに適宜修正してください。
四角形を描画する位置の変更、
＊「 CGRectMake(x, y, width, height) 」の
xやyの値を変更
四角形の形の変更（長方形、正方形など）、
＊「 CGRectMake(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() 」
などいろいろと
サンプルプログラムを
変更してiOSシミュレータ上に
様々な位置や形の
四角形を表示させてみてください。
[ スポンサードリンク ]
by はじめてのコンピュータ・パソコン
︎ サイトマップ︎ プロフィール | サイトポリシー・免責事項など︎ CONTENTS（コンテンツ）一覧︎ Xcode(Mac)で覚えるSwiftプログラミング入門講座︎ Xcodeでアプリ開発講座︎ Xcode(Mac)Swiftプログラミング・アプリ開発 関連本特集︎ Apple Watch 特集 APPLE WATCH・SPORT・EDITION︎ プログラミング言語関連記事（一覧）︎ パソコン・コンピュータ学習関連サイトやサービスの情報 ︎ 日本人のプログラミング学習の現在と未来 | #24 デジタルライフコラムposted by HajimeteCPC at 10:53
| Xcode(Mac)で覚えるSwiftプログラミング
2015年08月03日
10. Swift入門 UIViewでグラフィックの描画 - 横線の描画編 -
キーワード
：Xcodeの使い方 Swiftプログラミング
UIViewクラス 横線の描画
今回の記事では、
Macのプログラミングのための
統合開発環境
（IED：Integrated Development Environment）
のXcodeを使って、
Xcode
Swift言語の入門的な内容の記事を
まとめておきます。
動画では、
コード入力で、
「 UIViewクラス 」
を利用して、
「 UIView 」の
背景の色、
「 backgroundColor 」を
「 UIColorクラス」で色の指定をして
横線のグラフィックを表示させる方法
を解説しています。
Xcodeで、
iOSアプリ開発するための
設定方法がわからない方がいましたら、
︎ 3. Swift入門 iPhoneでHello World︎ 4. Xcode(Mac)でSwift言語入門 Hello Worldプログラム などの記事もご活用ください。
「 Single View Application」の設定方法などを
解説しています。
また、
「 CGRectMake(x, y, width, height) 」
で、長方形領域を指定する際の
iOSデバイス（iPhone６）上の、
描画と表示位置・配置の関係については、
︎ 6. Swift入門 描画と表示位置・配置の関係 の記事もご活用ください。
Swift入門 UIViewでグラフィックの描画 横線の描画編（動画）
[ 訂正事項 ]
class ViewController: UIViewController, UITextFieldDelegate
→ class ViewController: UIViewController
[ 入力前のコード ]（ViewController.swift）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}[ 動画で入力したコード例 ]（ViewController.swift）
let sampleDrawing = UIView(frame: CGRectMake(30, 30, 100, 1))
sampleDrawing.backgroundColor = UIColor.blackColor()
view.addSubview(sampleDrawing)＊ 今回は、「 let：後から変更できない変数の作成 」を利用して
「 sampleDrawing 」という
名前の変数を作成しています。
自分でわかりやすいような変数を作成してみていただければと
思います。
[ 最終的なサンプルコード ]（ViewController.swift）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let sampleDrawing = UIView(frame: CGRectMake(30, 30, 100, 1))
sampleDrawing.backgroundColor = UIColor.blackColor()
view.addSubview(sampleDrawing)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
＊ コード内に全角スペースが含まれていると
エラーになりますので、
その際は、半角スペースに適宜修正してください。
線を描画する位置の変更、
＊「 CGRectMake(x, y, width, height) 」の
xやyの値を変更
線の太さの変更、
＊「 CGRectMake(x, y, width, height) 」の
heightの値を変更
色の変更、
＊ 色の例．
黒色 ：UIColor.blackColor()
明るい灰色：UIColor.lightGrayColor()
暗い灰色 ：UIColor.darkGrayColor()
灰色 ：UIColor.grayColor()
白色 ：UIColor.whiteColor()
赤色 ：UIColor.redColor()
緑色 ：UIColor.greenColor()
黄色 ：UIColor.yellowColor()
オレンジ色：UIColor.orangeColor()
今回の記事のサンプルコードを例にとると
「 sampleDrawing.backgroundColor = UIColor.redColor() 」
などいろいろと
サンプルプログラムを
変更してiOSシミュレータ上に
表示させてみてください。
[ スポンサードリンク ]
by はじめてのコンピュータ・パソコン
︎ サイトマップ︎ プロフィール | サイトポリシー・免責事項など︎ CONTENTS（コンテンツ）一覧︎ Xcode(Mac)で覚えるSwiftプログラミング入門講座︎ Xcodeでアプリ開発講座︎ Xcode(Mac)Swiftプログラミング・アプリ開発 関連本特集︎ Apple Watch 特集 APPLE WATCH・SPORT・EDITION︎ プログラミング言語関連記事（一覧）︎ パソコン・コンピュータ学習関連サイトやサービスの情報 ︎ 日本人のプログラミング学習の現在と未来 | #24 デジタルライフコラムposted by HajimeteCPC at 14:27
| Xcode(Mac)で覚えるSwiftプログラミング
9. Swift入門 UIViewでグラフィックの描画 - 縦線の描画編 -
キーワード
：Xcodeの使い方 Swiftプログラミング
UIViewクラス 縦線の描画
今回の記事では、
Macのプログラミングのための
統合開発環境
（IED：Integrated Development Environment）
のXcodeを使って、
Xcode
Swift言語の入門的な内容の記事を
まとめておきます。
動画では、
コード入力で、
「 UIViewクラス 」
を利用して、
「 UIView 」の
背景の色、
「 backgroundColor 」を
「 UIColorクラス」で色の指定をして
縦線のグラフィックを表示させる方法
を解説しています。
Xcodeで、
iOSアプリ開発するための
設定方法がわからない方がいましたら、
︎ 3. Swift入門 iPhoneでHello World︎ 4. Xcode(Mac)でSwift言語入門 Hello Worldプログラム などの記事もご活用ください。
「 Single View Application」の設定方法などを
解説しています。
また、
「 CGRectMake(x, y, width, height) 」
で、長方形領域を指定する際の
iOSデバイス（iPhone６）上の、
描画と表示位置・配置の関係については、
︎ 6. Swift入門 描画と表示位置・配置の関係 の記事もご活用ください。
Swift入門 UIViewでグラフィックの描画 縦線の描画編（動画）
[ 訂正事項 ]
class ViewController: UIViewController, UITextFieldDelegate
→ class ViewController: UIViewController
[ 入力前のコード ]（ViewController.swift）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}[ 動画で入力したコード例 ]（ViewController.swift）
let sampleDrawing = UIView(frame: CGRectMake(30, 30, 1, 100))
sampleDrawing.backgroundColor = UIColor.blackColor()
view.addSubview(sampleDrawing)＊ 今回は、「 let：後から変更できない変数の作成 」を利用して
「 sampleDrawing 」という
名前の変数を作成しています。
自分でわかりやすいような変数を作成してみていただければと
思います。
[ 最終的なサンプルコード ]（ViewController.swift）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let sampleDrawing = UIView(frame: CGRectMake(30, 30, 1, 100))
sampleDrawing.backgroundColor = UIColor.blackColor()
view.addSubview(sampleDrawing)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
＊ コード内に全角スペースが含まれていると
エラーになりますので、
その際は、半角スペースに適宜修正してください。
線を描画する位置の変更、
＊「 CGRectMake(x, y, width, height) 」の
xやyの値を変更
線の太さの変更、
＊「 CGRectMake(x, y, width, height) 」の
widthの値を変更
色の変更、
＊ 色の例．
黒色 ：UIColor.blackColor()
明るい灰色：UIColor.lightGrayColor()
暗い灰色 ：UIColor.darkGrayColor()
灰色 ：UIColor.grayColor()
白色 ：UIColor.whiteColor()
赤色 ：UIColor.redColor()
緑色 ：UIColor.greenColor()
黄色 ：UIColor.yellowColor()
オレンジ色：UIColor.orangeColor()
今回の記事のサンプルコードを例にとると
「 sampleDrawing.backgroundColor = UIColor.redColor() 」
などいろいろと
サンプルプログラムを
変更してiOSシミュレータ上に
表示させてみてください。
[ スポンサードリンク ]
by はじめてのコンピュータ・パソコン
︎ サイトマップ︎ プロフィール | サイトポリシー・免責事項など︎ CONTENTS（コンテンツ）一覧︎ Xcode(Mac)で覚えるSwiftプログラミング入門講座︎ Xcodeでアプリ開発講座︎ Xcode(Mac)Swiftプログラミング・アプリ開発 関連本特集︎ Apple Watch 特集 APPLE WATCH・SPORT・EDITION︎ プログラミング言語関連記事（一覧）︎ パソコン・コンピュータ学習関連サイトやサービスの情報 ︎ 日本人のプログラミング学習の現在と未来 | #24 デジタルライフコラムposted by HajimeteCPC at 10:58
| Xcode(Mac)で覚えるSwiftプログラミング
2015年07月30日
8. Swift入門 UILabelで文字列の表示 iOSデバイスの画面サイズの取得
キーワード
：Xcodeの使い方 Swift
UILabel 文字列表示 iOSデバイスの画面サイズの取得
今回の記事では、
Macのプログラミングのための
統合開発環境
（IED：Integrated Development Environment）
のXcodeを使って、
Xcode
Swift言語の入門的な内容の記事を
まとめておきます。
動画では、
コード入力で、
「 UILabelクラス 」
を利用しながら、
IOSシミュレータ上に
文字列を表示させる方法
を解説しています。
︎ 7. Swift入門 UILabelで文字列の表示入門の内容の記事との違いは、
「 CGRectMake(x, y, width, height) 」
で、長方形領域を指定する際に、
iOSデバイスの画面サイズを取得しているところです。
Xcodeで、
iOSアプリ開発するための
設定方法がわからない方がいましたら、
︎ 3. Swift入門 iPhoneでHello World︎ 4. Xcode(Mac)でSwift言語入門 Hello Worldプログラム などの記事もご活用ください。
「 Single View Application」の設定方法などを
解説しています。
また、
「 CGRectMake(x, y, width, height) 」
で、長方形領域を指定する際の
iOSデバイス（iPhone６）上の、
描画と表示位置・配置の関係については、
︎ 6. Swift入門 描画と表示位置・配置の関係 の記事もご活用ください。
Swift入門 UILabelで文字列の表示入門 iOSデバイスの画面サイズの取得（動画）
[ 入力前のコード ]（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 sampleText = UILabel(frame: CGRectMake(5, 100, screenSizeWidth, 10))
sampleText.textColor = UIColor.blackColor()
sampleText.textAlignment = .Center
sampleText.text = "iOSデバイスの横幅の画面サイズの取得"
view.addSubview(sampleText)＊ 今回は、「 let：後から変更できない変数の作成 」を利用して
「screenSizeWidth」と「 sampleText 」という
名前の変数を作成しています。
自分でわかりやすいような変数を作成してみていただければと
思います。
＊「 let screenSizeWidth = UIScreen.mainScreen().bounds.size.width 」
でiOSデバイスの横幅を取得しています。
縦の幅を取得したい場合は、
「 let screenSizeHeight = UIScreen.mainScreen().bounds.size.height 」
などで取得できると思います。
[ 最終的なサンプルコード ]（ViewController.swift）
import UIKit
class ViewController: UIViewController {
let screenSizeWidth = UIScreen.mainScreen().bounds.size.width
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let sampleText = UILabel(frame: CGRectMake(5, 100, screenSizeWidth, 10))
sampleText.textColor = UIColor.blackColor()
sampleText.textAlignment = .Center
sampleText.text = "iOSデバイスの横幅の画面サイズの取得"
view.addSubview(sampleText)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
＊ コード内に全角スペースが含まれていると
エラーになりますので、
その際は、半角スペースに適宜修正してください。
動画の解説の最後に、
「sampleText.backgroundColor = UIColor.redColor()」
と入力して、
参考までに
「 CGRectMake(x, y, width, height) 」
の長方形領域を視覚化させています。
︎ 7. Swift入門 UILabelで文字列の表示入門の記事も参考にしながら、
値などを変えながらいろいろと試してみてください。
[ スポンサードリンク ]
by はじめてのコンピュータ・パソコン
︎ サイトマップ︎ プロフィール | サイトポリシー・免責事項など︎ CONTENTS（コンテンツ）一覧︎ Xcode(Mac)で覚えるSwiftプログラミング入門講座︎ Xcodeでアプリ開発講座︎ Xcode(Mac)Swiftプログラミング・アプリ開発 関連本特集︎ Apple Watch 特集 APPLE WATCH・SPORT・EDITION︎ プログラミング言語関連記事（一覧）︎ パソコン・コンピュータ学習関連サイトやサービスの情報 ︎ 日本人のプログラミング学習の現在と未来 | #24 デジタルライフコラムposted by HajimeteCPC at 10:35
| Xcode(Mac)で覚えるSwiftプログラミング
2015年07月29日
7. Swift入門 UILabelで文字列の表示入門
キーワード
：Xcodeの使い方 Swift
UILabel 文字列表示
今回の記事では、
Macのプログラミング
統合開発環境
（IED：Integrated Development Environment）
のXcodeを使って、
Xcode
Swift言語の入門的な内容の記事を
まとめておきます。
動画では、
コード入力で、
「 UILabelクラス 」
を利用しながら、
IOSシミュレータ上に
文字列を表示させる方法
を解説しています。
Xcodeで、
iOSアプリ開発するための
設定方法がわからない方がいましたら、
︎ 3. Swift入門 iPhoneでHello World︎ 4. Xcode(Mac)でSwift言語入門 Hello Worldプログラム などの記事もご活用ください。
「 Single View Application」の設定方法などを
解説しています。
また、
「 CGRectMake(x, y, width, height) 」
で、長方形領域を指定する際の
iOSデバイス（iPhone６）上の、
描画と表示位置・配置の関係については、
︎ 6. Swift入門 描画と表示位置・配置の関係 の記事もご活用ください。
Swift入門 UILabelで文字列の表示入門（動画）
[ 入力前のコード ]（ViewController.swift）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}[ 動画で入力したコード例 ]（ViewController.swift）
let sampleText = UILabel(frame: CGRectMake(20, 50, 300, 20))
sampleText.textColor = UIColor.blackColor()
sampleText.textAlignment = .Center
sampleText.text = "文字入力の練習"
view.addSubview(sampleText)＊ 今回は、「 let：後から変更できない変数の作成 」を利用して
「 sampleText 」という名前の変数を作成しています。
自分でわかりやすいような変数を作成してみていただければと
思います。
[ 最終的なサンプルコード ]（ViewController.swift）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let sampleText = UILabel(frame: CGRectMake(20, 50, 300, 20))
sampleText.textColor = UIColor.blackColor()
sampleText.textAlignment = .Center
sampleText.text = "文字入力の練習"
view.addSubview(sampleText)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
＊ コード内に全角スペースが含まれていると
エラーになりますので、
その際は、半角スペースに適宜修正してください。
UILabelクラスでは、
・フォントの指定
・テキストの色を指定
指定したい色はUIColorクラスで指定します。
黒色 ：UIColor.blackColor()
明るい灰色：UIColor.lightGrayColor()
暗い灰色 ：UIColor.darkGrayColor()
灰色 ：UIColor.grayColor()
白色 ：UIColor.whiteColor()
赤色 ：UIColor.redColor()
緑色 ：UIColor.greenColor()
黄色 ：UIColor.yellowColor()
オレンジ色：UIColor.orangeColor()
など
今回の記事のサンプルコードを例にとると
sampleText.textColor = UIColor.redColor()
で実装できると思います。
・テキストの影の色を指定
今回の記事のサンプルコードを例にとると
sampleText.shadowtColor = UIColor.redColor()
などで実装できると思います。
・影のオフセットをCGSize構造体として、ポイント数で指定
今回の記事のサンプルコードを例にとると
sampleText.shadowOffset = CGSize(width: 3, height: 5)
などで実装できると思います。
・横の配置の指定（左寄せ・中央・右寄せ）
中央 ：.Center
左側に寄せる：.Left
右側に寄せる：.Right
今回の記事のサンプルコードを例にとると
sampleText.textAlignment = .Right
などで実装できると思います。
・改行の指定
・表示可能な最大行数の設定
・文字列が指定した長方形領域を越した際の設定
（縮小設定 or 非表示）
・タッチの検知・非検知
など、
さまざまな指定ができるようですので
いろいろと試してみてください。
[ スポンサードリンク ]
by はじめてのコンピュータ・パソコン
︎ サイトマップ︎ プロフィール | サイトポリシー・免責事項など︎ CONTENTS（コンテンツ）一覧︎ Xcode(Mac)で覚えるSwiftプログラミング入門講座︎ Xcodeでアプリ開発講座︎ Xcode(Mac)Swiftプログラミング・アプリ開発 関連本特集︎ Apple Watch 特集 APPLE WATCH・SPORT・EDITION︎ プログラミング言語関連記事（一覧）︎ パソコン・コンピュータ学習関連サイトやサービスの情報 ︎ 日本人のプログラミング学習の現在と未来 | #24 デジタルライフコラムposted by HajimeteCPC at 16:22
| Xcode(Mac)で覚えるSwiftプログラミング
2015年07月27日
6. Swift入門 描画と表示位置・配置の関係
キーワード
：Xcodeの使い方 Swift
描画 表示位置
今回の記事では、
統合開発環境
（IED：Integrated Development Environment）
のXcodeを使って、
Xcode
Swift言語の入門的な内容の記事を
まとめておきます。
動画では、
CGRectMake関数を例に、
「 CGRectMake(x, y, width, height) 」
で、長方形領域を指定する際の
iOSデバイス（iPhone６）上の、
描画と表示位置・配置の関係を解説しています。
Swift入門 描画と表示位置・配置の関係（動画）
Xcodeでは、
ストーリーボード（Main.storyboard）を利用して
各種部品の配置などもできますが、
コードでのプログラミングでも、
iOSデバイス上の、
描画と表示位置・配置の関係性がつかめることで、
・グラフィック描画
・文字列表示
・ボタンなど各種部品の配置
を実装する際に、
役に立つのではないかと思います。
[ スポンサードリンク ]
by はじめてのコンピュータ・パソコン
︎ サイトマップ︎ プロフィール | サイトポリシー・免責事項など︎ CONTENTS（コンテンツ）一覧︎ Xcode(Mac)で覚えるSwiftプログラミング入門講座︎ Xcodeでアプリ開発講座︎ Xcode(Mac)Swiftプログラミング・アプリ開発 関連本特集︎ Apple Watch 特集 APPLE WATCH・SPORT・EDITION︎ プログラミング言語関連記事（一覧）︎ パソコン・コンピュータ学習関連サイトやサービスの情報 posted by HajimeteCPC at 11:45
| Xcode(Mac)で覚えるSwiftプログラミング
