関連サイト
本書の関連ページが用意されています。
内容紹介
Xcodeの「AutoLayout」、使いこなせてますか?
iPhoneは機種によって、画面サイズが異なります。アプリ画面をデザインする際に、それぞれのサイズのiPhoneでちゃんと表示できるようにしなければならないのですが、少し面倒です。それを解決するために用意されたのが「AutoLayout」で、いろいろな画面サイズに対して自動的にレイアウトを調整してくれる機能です。
この「AutoLayout」、とても便利な機能なのですが、少々使い方がわかりにくく、最初はなかなか思うように設定が行えない方も多いようです。そこで本書では、AutoLayoutの使い方をやさしく解説し、すぐに役立つ具体的な12パターンで実践的に使えるように解説していきます。
【すぐに役立つ具体的な12パターン】
・画面の中央にButtonを配置したいとき
・画面の中央から少しずれた位置(例:100ピクセル上)にラベルを配置したいとき
・画面の中央に指定したサイズ(例:100x100ピクセル)のボタンを配置したいとき
・画面一杯にイメージビューを表示したいとき
・画面の左下を基準にした位置(例:20,20)に固定サイズ(例:100x100ピクセル)のボタンを配置したいとき
・画面の下から左右一杯の複数のボタンを、高さ固定(例:50ピクセル)で積み上げたいとき
・画面の下から左右一杯の複数のボタンを、縦横の比率を固定で積み上げたいとき
・画面中央に、画面サイズを基準にした幅(例:画面の60%の幅)のイメージビューを表示したいとき
・画面の上から何%(例:40%)一杯にイメージビューを表示したいとき
・画面を上下に分割して、分割した領域の中央にイメージ(例:150x100)を表示したいとき
・複数のボタン(例:3つのボタン)を「同じ幅」で並べて表示したいとき
・複数のボタン(例:3つのボタン)を「等間隔」で並べて表示したいとき
【注意】
●2015年4月時点で最新のXcode 6.3.1、Swift 1.2で解説しています。
●本書はXcodeのAutoLayout機能の使い方を解説したもので、プログラミング言語SwiftやXcodeの基本や全般の解説は行っていません。SwiftやXcodeについて詳しく知りたい方は『SwiftではじめるiPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】』などをご参照ください。
書誌情報
- 著者: 森 巧尚
- 発行日: 2015-05-13
- 最終更新日: 2015-05-13
- バージョン: 1.0.0
- ページ数: 497ページ(EPUB版換算)
- 対応フォーマット: EPUB
- 出版社: マイナビ出版
対象読者
AutoLayoutを使いたい初心者の方
著者について
森 巧尚
Webゲームクリエイター。FlashやiPhoneアプリなどのオリジナルゲームのコンテンツ制作、執筆活動、関西学院大学非常勤講師など。
著書:『これからはじめるApple Watchアプリ開発入門』(電子書籍、マイナビ)、『SwiftではじめるiPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】』(マイナビ)、『現場で通用する力を身につけるiPhoneアプリ開発の教科書[iOS 7 & Xcode 5対応]』(マイナビ)、『よくわかるiPhoneアプリ開発の教科書[iOS 6 & Xcode4.6対応版]』(マイナビ)、『よくわかるiPhoneアプリ開発の教科書[iOS 5 & Xcode4.2対応版]』(マイナビ)、『よくわかるiPhoneアプリ開発の教科書[Xcode4対応版]』(マイナビ)、『よくわかるiPhoneアプリ開発の教科書』(マイナビ)、『やさしくはじめるiPhoneアプリ開発の学校[iOS 7.1対応版]』(マイナビ)、『基本からしっかりわかる ActionScript 3.0』(マイナビ)、『おしえて!! FLASH 8 ActionScript』(マイナビ)、『iPhoneのゲームアプリをつくろう! 知識ゼロからのプログラミング教室 Xcode6/Swift/SpriteKit対応』(秀和システム)、『ActionScript + CGIプログラミング』(ソフトバンククリエイティブ)、『プロとして恥ずかしくないFlashの大原則』(共著、エムディエヌコーポレーション)など
目次
第1章 AutoLayoutってなに?
- AutoLayoutの基本は制約(Constraint)
- プレビューで確認
第2章 制約の指定方法
- 「Pin」位置とサイズを固定
- 「Align」位置揃え
- 「Resolve Auto Layout Issue」オートレイアウトの問題を解決
- ドラッグで指定する方法
- Interface Builderの画面が正方形
- wAny hAnyを切り換えると「あるデバイス画面専用のレイアウト」が作れる