今年は30分枠をもらってAuto Layoutのデバッグの話をしたので、そのことについて書きたいと思います。 スライド資料 省略版はこちらです。これを元にトークをしました。 完全版はこちらです。 ※自分のトークと同時に公開したのですが、その時は完全版と言いつつ完全版になっていませんでした。すいません。今は16tips、181枚揃ってます。 事前準備 詳しいことや完全版のスライド資料にも乗らなかった補足説明はこちら↓に書いてます。ものすごい時間帯でのトークになってしまったということ、iOSDCという大きな舞台でのトークであること、「Auto Layouをデバッグする時にこれを見れば大丈夫!」というものを作りたかったということもあり、かなり入念に調べ、連日資料作りをしていました。たぶん今までで一番時間をかけて準備したトークです。 akatsuki174.hatenablog.com おかげさま
Debugging Auto Layout feedback loops How to use UIViewLayoutFeedbackLoopDebuggingThreshold today This article is dedicated to Marian Goldeen and Russell Ladd, who work tirelessly to help all of us build great apps. A while ago, Tyler Fox mentioned Auto Layout’s feedback loop debugger on Twitter, which was a feature announced back in WWDC 2016 but largely seems to have gone unnoticed since. Apple c
##固有サイズ(intrinsic content size) イメージやテキスト用のビューについて、そのコンテンツを圧縮する、切り出すことなく表示するために必要な最小サイズのこと。 例えばボタンなら、タイトルとなる文字列が短くなったり長くなったりするのに合わせて、固有サイズが変わる。 これは、サイズに関するその他の制約が存在しない、または優先度が低い場合に有効となる。 固有サイズは、ビューのプロパティintrinsicContentSizeに設定される。 ##- (CGSize)systemLayoutSizeFittingSize:(CGSize)targetSize すべての制約(サブビューの制約含めて)を考慮して、最適なサイズを返却する。 制約を考慮する際に、サブビューの固有サイズが利用される。 targetSize description
TL;DR, 優先度の異なる複数の制約を同時に定義することで、静的な定義だけで動的な振る舞いを実現できる 動的な要素の少ない構造のビューはより堅牢である はじめに 読みやすくメンテナンスしやすいソフトウェアを作るために重要なことの一つは構造をシンプルに保つことです。 iOSアプリのビューは壊れやすいソフトウェアの代表ですが、できるだけシンプルに作ることで変化に強い、堅牢で壊れにくいソフトウェアにできます。 動的な要素が少ないということは、ビューがシンプルであるということの指標の1つと言えます。 この記事では下記に示すような、スクロールに合わせて伸び縮みするヘッダーを、動的な要素を無くし、Auto Layoutの静的な制約のみで実現する方法を解説します。 動的な要素とは、実行時におけるビューおよび制約の追加・削除、Frameや制約を更新することと、機種やスクリーンサイズ、標準UIコンポーネン
EasyPeasy is a Swift framework that lets you create Auto Layout constraints programmatically without headaches and never ending boilerplate code. Besides the basics, EasyPeasy resolves most of the constraint conflicts for you and also can attach to a constraint conditional closures that are evaluated before applying a constraint, this way you can install an Auto Layout constraint depending on plat
【書評】初学者はもちろん、中級者にもオススメのAuto Layout解説書「よくわかるAuto Layout」の紹介UIXcodeDesigniOSSwift 著者の川邉さん(@jeffsuke)および出版社のリックテレコム様より『よくわかるAuto Layout - iOSレスポンシブデザインをマスター』をご献本いただきました。 タイトルの通りAuto Layoutの解説書で、豊富な図やスクリーンショットを用いて、非常にわかりやすく書かれています。前書きによると、本書の対象読者は 過去一度はXcodeを用いてiOSアプリをつくったことがあるが、Auto Layoutとサイズクラスを用いたAdaptive Layoutと言われると尻込みしてしまう開発者 とのこと。 なんかもうベストセラーになったりしてるらしく、 「よくわかるAuto Layout iOSレスポンシブデザインをマスター」発売
Apple has been politely suggesting that we use adaptive layouts since iOS 6, but until now I feel that people have been avoiding the topic, preferring to think mostly about fixed layouts. With the iPhone 6 it’s about to get a lot harder to avoid using adaptive layouts1. With four screen sizes (five if you’re supporting the iPad), three resolutions and orientations to account for it just seems easi
バリバリとStoryboardで制約をつけて開発...している毎日ですが、動的に制約内容を変えたくなる場面が多々発生します。 ボタンを押したら、このViewのサイズをググッと大きくする とか。 そうしたい時は、制約(NSLayoutConstraint)をViewControllerに紐付けて、ViewControllerで書き換えます。 view.frame で直接サイズを設定して変えることもできますが、元に戻ってしまうことがあるので、使わないほうがいいと思います。 書き換える方法は、NSLayoutConstraintのconstant(値)を変えればOK。 @IBOutlet weak var myConstraint: NSLayoutConstraint! func changeSize() { myConstraint.constant = 20 self.view.layou
海外事業向けのiOSアプリケーション開発を担当している西山(@yuseinishiyama)です。クックパッドは現在、海外複数カ国に向けてサービスを展開しています。 XcodeにはInterface Builderと呼ばれる、リッチなGUIを持ったデザインツールが付属しており、これを用いて画面のレイアウトを構成することが主流となっています。弊社ブログでも、iOS開発でstoryboardとxibをうまく使い分けるプラクティス等の記事で、GUIベースのレイアウトについて触れています。しかし、現在私が担当しているプロジェクトでは、Interface Builderを用いずに、レイアウトの大半をコードで記述しています。 今回は、コードベースのレイアウトを実装していく中で得た知見を、以下の3つの部分に分けて共有したいと思います。 Interface Builderを用いたレイアウトとコードベースの
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Auto Layoutを使って既存アプリをiPhone 6(S)/6(S) Plus対応した際に得た知見をまとめてみました。 以下、上級編となります。 ※iOS 9で導入されたStack ViewについてはiOS 8を切れない事情で使えませんでしたorz... ※下記のサンプルに使用したStoryboardファイルはこちらです。 https://gist.github.com/ypresto/ee3b2f592b40936c11ec ※設計が悪くて画面サイズ変わるとぶっ壊れちゃう箇所をUnit Testで把握するライブラリ書きました h
ROPPONGI.swift 第5回の登壇資料になります。 https://visits.connpass.com/event/96594/ この資料で紹介しているサンプル: https://github.com/fumiyasac/ReduxSampleSwift アプリのアーキテクチャの選択においても、注目を浴びているRedux。 複雑になりがちなアプリの状態管理を扱いやすくできる点やデータの流れの見通しをよくする点などのメリットがあり、私自身もとてもその点を興味深く感じています。 今回はアプリ自体は簡単ではあるものの、サンプルと一緒に基本的な部分や概念とUIに関する処理との組み合わせ方についてお話できればと思います。
iOS7・iOS8の処理分岐なし!UITableViewのCellの高さをAutolayoutで自動計算する方法 こんにちは、 iOSエンジニアの木村です。 2015年最初のエントリーはUITableViewCellの高さをAutolayoutを用いて計算する方法を紹介したいと思います。 一見、チュートリアルなどでよく見かける内容ですが、iOS8対応をするとiOS7ではうまく動かなくなってしまうなど、OSの違いが元でUITableView周りは結構トラブルが起こります。 今回はiOS7とiOS8で分岐を行わず、同じコードで動く方法を紹介したいと思います。 iOS7との互換性を保つためUIAutomaticDimensionは使用しません。 今回作るもの 以下のように タイトル(title) 詳細(body) を持ったDataオブジェクトを一覧で表示したいと思います。 class Data
Auto Layout was introduced in OS X 10.7, and one year later it made its way into iOS 6. Soon apps on iOS 7 will be expected to honor the systemwide font size setting, thus requiring even more flexibility in the user interface layout next to different screen sizes and orientations. Apple is doubling down on Auto Layout, so now is a good time to get your feet wet if you haven't done so yet. Many dev
補足事項まとめ 今回は、前回まで説明してきた内容の補足事項についてまとめたいと思います。 iOS 6 以前のデバイスでの表示互換性 iOS 6 以前のデバイスでの表示を修正する 前回作成したレイアウトを iOS 6 以前のデバイスで表示してみましょう。すると、下図のように上側の UIView とステータスバーの間に間隔がありません。 iOS 7 では、ステータスバーは透明でコンテンツ部に覆い被さるものに変更されました。そのため、このレイアウトで問題なかったのですが、iOS 6 ではこのレイアウトは不自然です。 この問題を修正しましょう。 制約を再設定する まず、上側の UIView に設定されている親ビューの上端との間隔に関する制約を選択して削除します。制約の削除は、制約を選択後、delete キーを押下することでできます。 次に、再度親ビューの上端との間隔に関する制約を追加します。上側の
みなさま、Auto Layout書いてますか。 あれ、コードで書くのめっちゃめんどいですよね。クラス名もメソッド名も長いし。 Visual Format使うと無駄にDictionary作る必要がある上にミスっててもコンパイルで教えてくれへんし。 Storyboardはチーム開発で泣きそうになるし。 そんなあなたに、めっちゃイケてるライブラリのご紹介です。 その名も”Crew“。 使い方はREADMEを見ていただければ一発なんですが、とにかく記述量が少なくなります。 そして覚えることが少なくて直感的に書けるので、前書いたコードを探してコピペすることもなくなりました。 例えば横幅いっぱいのviewを縦に3つ、10ptずつ開けて置こうと思ったら、普通に書くと多分こんな感じになりますよね。 let views = ["topView": topView, "midView": midView, "
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く