Auto Layoutで縦と横の画面切り替え #1

StoryboardでAuto Layoutを使って、縦置き(Portrate)と横置き(Landscape)で異なる配置の画面を作ってみます。プログラムのコードによる配置は使わずにInterface Builderの設定だけでやってみます。

img20150314_autolayout_00

iPhone 6 PlusやiPadのサイズを考慮しだすと個別の設定が複雑になるので、今回はiPhone 4SとiPhone 5のサイズのみでかつiOS 8をターゲットにします。

最初に、縦置き用の画面を作ります。編集画面の下に表示されているサイズクラスが Any Width と Any Height になっているのを確認しておきます。

画面の大部分を占める青い色のビューと小脇にある帯状の赤いビューを配置します。それぞれの大きさは、青いビューを600×520で、赤いビューを600×80にしました。

img20150314_autolayout_01 img20150314_autolayout_02

赤いビューの中にボタンを3つ配置します。Aボタンは左端、Bボタンは中央、Cボタンは右端で、ボタンの大きさは全て50×50にしました。

img20150314_autolayout_03 img20150314_autolayout_04 img20150314_autolayout_05

次に、配置の制約を設定します。

青いビューは上端・左端・右端が親のビューに張り付きます。下端は赤のビューに張り付きます。

img20150314_autolayout_06

赤いビューは下端・左端・右端が親のビューに張り付きます。高さはデバイスの画面サイズに関わらず固定です。

img20150314_autolayout_07

ボタンは、3つとも縦と横のサイズを固定にします。縦方向の位置は赤いビューの真ん中に揃えます。横方向の位置は3つとも異なり、Aボタンは赤いビューの左端を基準、Bボタンは赤いビューの中央、Cボタンは赤いビューの右端を基準にします。

img20150314_autolayout_08 img20150314_autolayout_09 img20150314_autolayout_10

縦置き画面についてはここまでです。

クラスサイズ Any での制約は、他のクラスサイズで制約が指定されていないときの保険です。今回のボタンの大きさのように、どのクラスサイズでも変わらないものについてはAnyに設定しておくのがよいと思います。

次回に続きます。

Android 5.0でWi-Fiのローカルネットワークに繋がらない

さて。「iPhoneと同じように、Androidのスマフォで、ネットへのHTTP接続は3G経由で行い、ローカルネットワークへのHTTP接続はWi-Fi経由で行う」ということがやりたい、いや、やりたかったポンコツな通信処理があったりして、そのソースコードにあまり手を入れずにAndroid 4.xに加えてAndroid 5.0をサポートできないだろうかと調査してみました。

“Android 5.0でWi-Fiのローカルネットワークに繋がらない” の続きを読む

ブログのデザイン 2015/03

久しぶりのサイト保守です。

ついでにブログのデザインも変えてみました。今時だとTwitterやInstagramやFacebookなんていう、簡単に更新できるイカしたデザインのサービスがあるので、このサイトの更新も滞りがちではありますが、なにとぞよろしくお願い致します。

SwiftでOS XのCGContextを取得する

Swiftについて、知ってる本で読んだのレベルからさわったことがあるのレベルにそろそろ移行しなければと思い立ち、簡単なアプリを作ってみることにしました。

しかも、iOSではなくOS Xで。

XcodeでMac用アプリの新規プロジェクトを選ぶと作られるテンプレートは、AppDelegateクラス、ViewControllerクラスにStoryboard + Auto Layoutと、ほとんどiOSと一緒のものでした。これならiOSのノウハウが使えるに違いないと思いつつ、さらにカスタムビューを作ってdrawRectで円を描画してみようとしたら、これがまたどうやってSwiftでOS Xのグラフィックスコンテキストを取得するのか全然わからないという。

Stack Overflowやら英語圏の方のブログとかをさまよって色々と試すも、参考にしたコードはビルドエラーやらランタイムエラーやらが出て簡単には解決に至らず、諦めて一旦放置することに。

“SwiftでOS XのCGContextを取得する” の続きを読む

新しいMacを買った

新しいMac miniを買いました。

Mac mini Late 2014

今までの環境は、古いMacのTime Machineで外付けHDDにバックアップして新しいMacを起動した時に移行アシスタントを使ってそれをコピーすると、ほぼそのまま以前の状態を再現できているので大変ありがたいです。コピー中は何もできなくて激しく暇だけど。

FirefoxとYosemite

OS X Yosemiteにアップグレードしたら、Firefoxのツールバー経由のメニューアイテムの行間が詰まってなんだか見苦しくなってしまいました。

ということで、Stylishプラグインにグローバルスタイルを追加しました。

#PersonalToolbar .bookmark-item {
  font-family: "Helvetica Neue" !important;
}
menupopup label {
  font-family: "Helvetica Neue" !important;
}

適用するとOS X Mavericksっぽくなりました。しかし問題の根幹には手をつけていないような。これって。