13. Swift入門 UIViewでグラフィックの描画 - 四角の描画編:面取りあり -












キーワード
Xcodeの使い方 Swiftプログラミング
 UIViewクラス 面取り四角形の描画 




Swiftフ?ロク?ラミンク?講座 | Xcode(Mac)て?アフ?リ開発講座.png














今回の記事では、

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デバイス(iPhone6)上の、

描画と表示位置・配置の関係については、


? 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 デジタルライフコラム






はじめに | サイトマップ | プライバシーポリシー・サイトポリシー・免責事項など | 【レビュー】Parallels Desktop 15 for Mac



広告

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
posted by fanblog

2015年08月05日

14. Swift入門 UIViewでグラフィックの描画 - 円の描画編 -












キーワード
Xcodeの使い方 Swiftプログラミング
 UIViewクラス 円の描画 




Swiftフ?ロク?ラミンク?講座 | Xcode(Mac)て?アフ?リ開発講座.png














今回の記事では、

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デバイス(iPhone6)上の、

描画と表示位置・配置の関係については、


? 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 デジタルライフコラム










MacでWindowsを使えるソフトウェア【Parallels】

Parallels Desktop for Macをレビュー中。
【レビュー】Parallels Desktop 15 for Mac(一覧へ)


Parallels Desktop 15 for Mac以降のレビューなど
子供プログラマーのサイトにリンクします。
【長期レビュー】Parallels Desktop for Macの感想(一覧)

子供プログラマーのサイトにリンクします。
【クーポン情報 - 10% OFF】Parallels Desktop 18 for Mac(2023年7月25日〜2023年8月8日まで) New♪
サイト内検索


おすすめ入門講座・特集コンテンツ
このサイトで作成している入門講座や、特集関連などのおすすめコンテンツです。お気に入りの講座コンテンツや、気になる特集探しなどにお役立てください 
最新記事


サイトポリシー・免責
HajimeteCPCさんの画像
HajimeteCPC
子供プログラマー | プログラミング入門ウェブ教室


子供フ?ロク?ラマー | フ?ロク?ラミンク?入門ウェフ?教室_イメーシ?.png

子供と一緒にプログラミングを楽しむために、大人がプログラミングを学ぶための学習支援サイトです。

こちらの記事ページもご活用ください。
日本人のための人工知能プログラマー入門講座(機械学習)

メニュー | はじめてのコンピュータ・パソコン


・  サイトマップ

・  プライバシーポリシー・サイトポリシー・免責事項など

・  はじめに

・  トップページ

・  CONTENTS(コンテンツ)一覧

・  年賀状をパソコンで自宅で作ろう講座

・  エクセル・ワード・パワーポイントの使い方入門

・  独学プログラマーのためのAI(人工知能・無能)プログラム入門講座

・  Xcode(Mac)で覚えるC言語入門講座

・  Xcode(Mac)で覚えるSwiftプログラミング入門講座

・  Mac関連

・  コンピュータ・プログラミング書籍関連 | まとめ・書評など(一覧)

・  パソコンでイラスト作成入門講座

・  アフィリエイトのやり方・始め方入門講座

・  SEO・レンタルサーバー入門講座

・  確定申告・会計 特集

・  デジタルライフコラム

・  エンジニア求人探し



[ スポンサードリンク ]



タグクラウド




QRコード
<< 2015年08月 >>
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
月別アーカイブ
2023年07月 (2)
2021年12月 (3)
2021年10月 (2)
2020年02月 (2)
2020年01月 (1)
2019年12月 (6)
2019年11月 (9)
2019年10月 (1)
2019年09月 (7)
2019年02月 (5)
2019年01月 (21)
2018年12月 (7)
2018年11月 (6)
2018年10月 (7)
2018年09月 (5)
2018年08月 (5)
2018年04月 (1)
2018年02月 (2)
2018年01月 (4)
2017年12月 (4)
2017年11月 (5)
2017年10月 (7)
2017年08月 (5)
2017年07月 (3)
2017年06月 (23)
2017年05月 (7)
2017年04月 (9)
2017年03月 (2)
2017年02月 (8)
2017年01月 (20)
2016年12月 (18)
2016年11月 (8)
2016年10月 (11)
2016年09月 (8)
2016年08月 (27)
2016年07月 (34)
2016年06月 (27)
2016年05月 (26)
2016年04月 (26)
2016年03月 (20)
2016年02月 (17)
2016年01月 (58)
2015年12月 (49)
2015年11月 (26)
2015年10月 (64)
2015年09月 (43)
2015年08月 (30)
2015年07月 (13)
2015年06月 (35)
2015年05月 (40)
2015年04月 (22)
2015年03月 (18)
2015年02月 (11)
2015年01月 (10)
2014年12月 (13)
2014年11月 (4)
2014年10月 (2)
2014年09月 (9)
2014年08月 (15)



2014年8月からこのブログを始めてみましたが、随分記事がたまってきました。どれかの記事が、何かの参考になることがありましたら幸いです。
You Tubeチャンネルぺージ


RehabC | イメーシ?.png
You Tubeのチャンネルもあります。
エクセル、ワード、パワーポイントなどの
基本的な操作方法の学習や、
プログラミングやイラスト作成をはじめとした、
パソコン学習の補助などにご活用ください。
よろしくお願いいたします。

Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: