![iOSのレイアウトサイクルを知ろう](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f7dcb8dede2248041f0df519ae3f7f37cf3a3a5/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F2ea3ffdba6694975b56b003d96cadb32%2Fslide_0.jpg%3F10087724)
iOSDC 2017 (Sep 16, 2017) https://iosdc.jp/2017/node/1317 Library: https://github.com/inamiy/Cassowary
著者の川邉さん(@jeffsuke)および出版社のリックテレコム様より『よくわかるAuto Layout - iOSレスポンシブデザインをマスター』をご献本いただきました。 タイトルの通りAuto Layoutの解説書で、豊富な図やスクリーンショットを用いて、非常にわかりやすく書かれています。前書きによると、本書の対象読者は 過去一度はXcodeを用いてiOSアプリをつくったことがあるが、Auto Layoutとサイズクラスを用いたAdaptive Layoutと言われると尻込みしてしまう開発者 とのこと。 なんかもうベストセラーになったりしてるらしく、 「よくわかるAuto Layout iOSレスポンシブデザインをマスター」発売しました。@tokorom 監修。今、モバイルプログラミング分野でベストセラーらしいです! https://t.co/wx7ZfuWVdf— Yusuke Ka
Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.
『アプリ道場 Advent Calendar 2015』8日目は「Auto Layoutが好き過ぎて、StackViewをおかずにご飯3杯いける」ゆこびん(@yucovin)がお送りします。 そもそもイラストレーター/デザイナーなので、アプリの開発をしていても見た目を司るAuto Layoutが気になって気になってしょうがないです。(これは恋?!) ということで、本日は今年綺羅星のごとく現れたAuto Layout界の期待のクラス「UIStackView」についてまとめたいと思います!(๑´ㅂ`๑) UIStackViewは一言で言うと、便利なレイアウト用の箱です。 StackViewは2つ以上の縦または横に並ぶサブビューを面倒な制約(Constraints)を作ることなく、いいカンジにレイアウトしてくれます。 StackViewを上手く使えば制約の数をうんと少なくすることができるんです。
Auto Layoutを使って既存アプリをiPhone 6(S)/6(S) Plus対応した際に得た知見をまとめてみました。 以下、上級編となります。 ※iOS 9で導入されたStack ViewについてはiOS 8を切れない事情で使えませんでしたorz... ※下記のサンプルに使用したStoryboardファイルはこちらです。 https://gist.github.com/ypresto/ee3b2f592b40936c11ec ※設計が悪くて画面サイズ変わるとぶっ壊れちゃう箇所をUnit Testで把握するライブラリ書きました https://github.com/ypresto/AutoLayoutLint http://qiita.com/yuya_presto/items/742a9e6dd95667bd62c9 詳解編 Auto Layoutの仕組みやPriority、Int
以前書いたAutoLayoutでアニメーションを設定する方法のSwift版です。 アニメーションで動かしたいものの例 例として、mainViewの上に乗った、movableViewを下に動かすことを考えます。 movableViewの制約は、superViewであるmainViewに対して、以下のような制約を持っているとします。 Top Space, Trailing Space, Leading Spaceの各種の制約の値は0になっています。高さは適当です。 やってみる 基本的な考え方は、既に付いているautoLayoutの制約を外し、別の制約を付ける、ということです。今回の場合、"Top Space to SuperView = 0" の制約を外し、Top Space to mainView = 30 といった制約をつけます。 まず外す対象の制約をoutletでソースに結び付けておきま
現在、家族アルバム みてねというアプリのAutoLayout対応を進めていて、弊チームでは以下の3つのルールを対応必須とすることにしてみました。 全てのStoryboard/Xibでuse AutoLayoutのチェックを有効にする 全てのStoryboard/Xibでuse SizeClassesのチェックを有効にする AutoLayoutのmisplacedは必ず解消した状態でコミットする AutoLayoutはとにかく仕様が複雑で開発するのが大変なので、少しでも楽にしていくために最低限機械的にチェックできるところを自動化しました。 #!/bin/bash ! find . -name '*.xib' -o -name '*.storyboard' | xargs grep misplaced 2>&1 > /dev/null && \ ! find . -name '*.xib' -
Xcode の Storyboard で Scroll View(UIScrollView)を使おうとしたところ、Scroll View に対する AutoLayout の設定が難しくてちょっとはまったので備忘録メモです。Constraints(制約)の警告が消えなかったり、ビルドしたらスクロールしなかったりと、色々試行錯誤してしまいました。 以下のエントリー等のおかげで解決できました。ありがとうございます。 【UIScrollView × Autolayout 問題】Appleエンジニア直伝のファイナルアンサー – Over&Out その後 iOS: How To Make AutoLayout Work On A ScrollView UIScrollView and Autolayout – Xcode 6 – YouTube 3番目 Youtube リンク先が、Xcode での操作
iOS8からのTableViewCellの高さ自動計算は、上スクロールした時にはうまく動かない件で、UITableViewCellの高さ自動計算でハマる場合がある事がわかりました。 これを回避するには、estimatedHeightを使わずに、真面目に高さ計算を行えば良いです。 Autolayoutが無い時代には、これをごりごりと計算していたのですが、UITableViewCellにAutolayoutを使う事で、かなり簡略化できたのでその記録を残します。 おおまかな流れ UITableViewDataSourceから参照できる所に、「表示する事の無い、高さ計算用のダミーセル」を用意します。 tableView:heightForRowAtIndexPath: で、ダミーセルを使って高さ計算を行います。 このときAutolayoutで計算ができるので、比較的楽です。 ソース - (void
Web エンジニアだったはずがひょんなことから iOS アプリを書き始めてはや3ヶ月。ヘルスケア事業部の濱田です。 iOS アプリで画面遷移を実現するためには様々な方法があります。 コードのみを使う方法 xib を使う方法 storyboardを使う方法 etc. 初めはかなり混乱しましたが、最終的には storyboard と xib の合わせ技に落ち着きました。 今回はこの方法についてご紹介します。 storyboard を使うか、xib を使うか、それが問題だ アプリの UI 部品の配置は結構たいへんな作業です。とくに Autolayout の制約の設定などは、コードのみで設定するのは困難でしょう。Interface Builder の支援をなるべく活用したいところです。 そこで、storyboard もしくは xib ファイルを利用して ViewController(以下 VC)
iOS、Android、Unityなどのアプリ開発について、初心者向けの内容を『RainbowApps』講師陣が分かりやすく解説していきます。 第5回に引き続き、「AutoLayoutの使い方」です。 第5回ではAutoLayoutの基本的な使い方を学びましたので、今回はより実践的なレイアウトを組んでいくことで、AutoLayoutへの理解を深めていきましょう。 【1】画面サイズに応じた大きさでViewを表示する 【2】等間隔にViewを表示する 【3】宿題 最終的に下記のような画面を作っていきます。 【1】画面サイズに応じた大きさでViewを表示する ImageViewを用いて写真やコンテンツの画像を「どーんと表示したい」ことはよくあると思います。しかし、画像のアスペクト比(縦横比)が変わってしまっては台無しですね。 そこで、アスペクト比を維持したまま画面サイズに応じて大きさが変わるよう
はじめまして、xyz_iです。 これまでWebアプリケーションばかり作っていた自分が、1月からiOSアプリ開発を行っています。 いろいろと覚えないとならないことが多く四苦八苦してますが、アプリ開発経験のあるチームメンバーに助けられながらなんとかやっています。 そんな感じで1ヶ月ちょっとやってきて、はじめにこれは抑えておいた方が良いなと思ったことをいくつか挙げていきます。 ただし、作るアプリによって必要になってくるスキルや知識は全く異なってくると思います。今回の記事はあくまで自分自身が携わった部分での話になります。 この記事が対象としているのは、以下のような方です。 iOSアプリ開発をこれから始めようとしていて、学習を始めている iOSアプリ開発を始めて間もない AutoLayout まずAutoLayoutの概要についてAppleの公式ドキュメントから引用してきますと、 Auto Layo
例えばデバイスの幅が1000pxだった時、Viewの幅は500px(50%)にしたい、という場合です。 AutoLayoutを始めて「これくらい当然できるでしょふふーん」と思っていじってみたけど、全然出来る気配がなくて、結局泣きながらコードと併用して対応したというお話です。 って、実はStoryboardエディタだけでできるのでしたら教えてください。 ===== 追記 2014/11/30 3:56 できました Multiplierを使います。(いままでお試しでしか使ってなくて忘れていた・・・) 親をSuperviewとかにして、一度EqualWidthをつけたあと、Multiplierに0.5と入れると50%になります。こんな感じです。 まあ、ConstraintをIBOutletで引っ張って云々できる、というのは知っていて損がないので、それはそれ、これはこれで! ===== 結論からい
xcode6になって 対応しなければならない画面サイズ(解像度の比率の種類)が5種類に増えました (iPhone4S,iPhone5(S),iPhone6(S),iPhone6 Plus(S)、iPad) デバイスの画面サイズの種類が増えたことで StoryboardやxibでAutoLayoutを使わないやり方でやると 1つのレイアウトファイルではマルチデバイスのサイズに 対応ができなくなってしまっています 自分は今までAutoLayoutを使って来なかったので苦戦したので 他の困っている人向けに備忘録として残しておきます XCode7以降でも基本的には同じです。 長いです まず、AutoLayoutを使わない方法もあります ViewControllerを選択して ・Use Auto Layout ・Use Size Classes のデフォルトチェックを外します。 すると、従来通りAu
今回はUIScrollViewとAuto Layoutの組み合わせについてです。ここでハマっている人は多いのではないでしょうか。私も見事にハマリました。その経験から、きちんと動作させる方法を解説したいと思います。 ※ 文中のIBはInterface Builderの略です。 以下のリンクのAppleのTechnical NoteにUIScrollViewとAuto Layoutの併用について書かれています。 UIScrollView and Autolayout Mixed Approach(非Auto LayoutとAuto Layoutの組み合わせ)とPure Auto Layout Approach(Auto Layoutのみ)の2種類説明されていますが、後者に絞りたいと思います。スクロールの中身のサイズが可変する時も含めると、Pure Auto Layoutで対処したほうが確実で楽
はじめに Auto Layoutが有効になっているStoryboardでScroll Viewを定義する際、思い通りに定義できずに困ったことはないですか?Auto Layoutの警告が消えなかったり、実行時にContent Sizeが思い通りのサイズにならなかったりした経験がある人は意外と多いかも知れません。 この記事では、Storyboardだけでページング可能なScroll Viewを定義する方法を提案します。また、Auto Layoutを活用して、どのような画面サイズにも対応できることを目指します。Storyboardだけで定義するので、ソースコードでの実装は不要です。 ページング可能なScroll Viewのページ数が一定で、簡易的に定義する場合などに有効です。例えば、アプリを利用開始した直後のスワイプ可能なチュートリアル画面などに利用すると良いかも知れません。 この方法を利用する
LINEとかチャット系アプリは大体踏襲しているアレです。 まとめて解説してるブログが見つからなかったので、必要最低限の部分だけメモっときたいと思います。 今回はメッセージ入力欄のみで、ポイントはこの二つ。 メッセージ入力欄・送信ボタンは下部固定(キーボード出現時は隠れないように移動) 入力テキストの行数によってメッセージ入力欄の高さが変わる 実現方法は色々だと思いますが、今回は StoryBoardでAutoLayout を使ってやります。 【完成イメージ】 StoryBoardでレイアウトを作成 まずは以下の構造で各種UIパーツをレイアウトします。 Constraintを設定 Constraintについてここでは詳しい説明はしませんが、View間の相対位置やサイズ等を定義するルールといったところです。 画面サイズが異なる端末でもそれぞれいい感じにレイアウトが組めるので便利です。 Stor
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く