[Autolayout] サンプルケース - 親ビューの下半分に子ビューを配置 (2) アニメーション

2015年6月12日金曜日 | Published in | 0 コメント

このエントリーをはてなブックマークに追加

前回のやつにアニメーションを加えてみる。子ビューが下からシュッと出てくるやつ。

これは制約を使えば簡単。子ビューの上のラインを画面下端から、最終位置(この場合親ビューのCenterY)まで引き上げてやれば良い。
まず子ビューの初期位置を最終下端で作る。
let v1c = NSLayoutConstraint(item: tableView, attribute: .Top, relatedBy: .Equal,
     toItem: parentView, attribute: .CenterY, multiplier: 1.0, constant: parentView.frame.size.height)

一旦 parentView.layoutIfNeeded()で初期描画させた後、アニメーションのコードを走らせる。
v1c.constant = 0.0
        UIView.animateWithDuration(0.5) {
            parentView.layoutIfNeeded()
        }

こうすると子ビューの上の制約の値(constraint)が下端(parentView.frame.size.height)から 0.0へアニメーションしながら変化する。

なおこのままだと制約のワーニングが出る。
2015-06-11 08:10:18.938 LKMenu_Example[89282:6908924] Unable to simultaneously satisfy constraints.
 Probably at least one of the constraints in the following list is one you don't want.
 Try this: (1) look at each constraint and try to figure out which you don't expect; 
(2) find the code that added the unwanted constraint or constraints and fix it.
 (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer
 to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "",
    "",
    ""
)
  :

これは子ビューの上の制約(v1c)と下の制約(v2c)の値が初期状態では等しくなる(逆転する?)ため。こんな時は優先順位(priority)をつけてやればいい。
let v2c = NSLayoutConstraint(item: tableView, attribute: .Bottom, relatedBy: .Equal,
      toItem: parentView, attribute: .Bottom, multiplier: 1.0, constant: 0.0)
        v2c.priority = 750   // 追加
        parentView.addConstraint(v2c)
親ビューに制約を追加する前につけるのを忘れずに。これでワーニングが消える。priorityは大きい方が優先順位が高い。IBでプロパティ欄を見ると 1000(Required), 750(High), 250(Low)となっている。
デフォルト値は 1000(最大値も 1000)。


最終的なコード。
parentView.addSubview(tableView)

        tableView.setTranslatesAutoresizingMaskIntoConstraints(false)
        
        let h1c = NSLayoutConstraint(item: tableView, attribute: .Left, relatedBy: .Equal,
            toItem: parentView, attribute: .Left, multiplier: 1.0, constant: 0.0)
        parentView.addConstraint(h1c)
        let h2c = NSLayoutConstraint(item: tableView, attribute: .Right, relatedBy: .Equal,
            toItem: parentView, attribute: .Right, multiplier: 1.0, constant: 0.0)
        parentView.addConstraint(h2c)
        
        let v1c = NSLayoutConstraint(item: tableView, attribute: .Top, relatedBy: .Equal,
            toItem: parentView, attribute: .CenterY, multiplier: 1.0, constant: parentView.frame.size.height)
        parentView.addConstraint(v1c)
        let v2c = NSLayoutConstraint(item: tableView, attribute: .Bottom, relatedBy: .Equal,
            toItem: parentView, attribute: .Bottom, multiplier: 1.0, constant: 0.0)
        v2c.priority = 750
        parentView.addConstraint(v2c)
        parentView.layoutIfNeeded()
        
        v1c.constant = 0.0
        UIView.animateWithDuration(0.5) {
            parentView.layoutIfNeeded()
        }

Autolayoutはコツがわかってくると楽しい。


(おまけ)animateWithDuration:usingSpringWithDamping: を使えばアニメーションにバネ効果(バウンス効果っぽい)をつけられる。
UIView.animateWithDuration(0.5, delay: 0.0, usingSpringWithDamping: 0.7,
            initialSpringVelocity: 0.0, options: UIViewAnimationOptions.CurveEaseInOut,
            animations: { () -> Void in
            parentView.layoutIfNeeded()
        }) { (Bool) -> Void in
        }

[Autolayout] サンプルケース - 親ビューの下半分に子ビューを配置

2015年6月11日木曜日 | Published in | 0 コメント

このエントリーをはてなブックマークに追加

メニュー作成中。Autolayoutでこんな感じのビュー配置をしたい。
ランドスケープで。

親ビューが parentView、子ビューが tableViewとするとこんな感じ。
        parentView.addSubview(tableView)

        tableView.setTranslatesAutoresizingMaskIntoConstraints(false)
        
        let h1c = NSLayoutConstraint(item: tableView, attribute: .Left, relatedBy: .Equal, toItem: parentView, attribute: .Left, multiplier: 1.0, constant: 0.0)
        parentView.addConstraint(h1c)
        let h2c = NSLayoutConstraint(item: tableView, attribute: .Right, relatedBy: .Equal, toItem: parentView, attribute: .Right, multiplier: 1.0, constant: 0.0)
        parentView.addConstraint(h2c)
        
        let v1c = NSLayoutConstraint(item: tableView, attribute: .Top, relatedBy: .Equal, toItem: parentView, attribute: .CenterY, multiplier: 1.0, constant: 0.0)
        parentView.addConstraint(v1c)
        let v2c = NSLayoutConstraint(item: tableView, attribute: .Bottom, relatedBy: .Equal, toItem: parentView, attribute: .Bottom, multiplier: 1.0, constant: 0.0)
        parentView.addConstraint(v2c)

        parentView.layoutIfNeeded()

ポイントは v1c のところで、親のCenterYに 子ビューのTOPを紐付けているところ。ここの constantを変更すれば高さを調整することもできる。


[CocoaPods] use_frameworks! で作ったライブラリのバンドル

2015年6月1日月曜日 | Published in | 0 コメント

このエントリーをはてなブックマークに追加

CocoaPodsで自作ライブラリを作っているケースで、swift対応のためにフレームワーク化(use_framework!)するとバンドルはその中に入ってしまう。

Example.app
 ├── LKPostingQueueManager.framework
 │   ├── Info.plist
 │   ├── LKPostingQueueManager
 │   └── Resources.bundle ←ここにくる(以前はもっと上の階層)


プログラムでこれを参照するにはメインバンドル配下では見つからない。
let path = NSBundle.mainBundle().pathForResource("Resource", ofType: "bundle")! → ここで nilでクラッシュ
let bundle = NSBundle(path: path)

最初にフレームワークのバンドル(クラスが含まれるバンドル)を取って、そこから引き出すのがポイント。
let frameworkBundle = NSBundle(forClass: LKPostingQueueManager.self)
let path = frameworkBundle.pathForResource("Resources", ofType: "bundle")!
let bundle = NSBundle(path: path)


関連

Resource Bundle の作り方と CocoaPodsでの配布
※上記はフレームワーク化する前の話。フレークワーク化するとこんな面倒は入らず設定だけで済む。
s.resource_bundles = { 
    'Resources' => ['Pod/Assets/*']
  }
みたいな。

【アプリ】StackOne 1.6.3 アイコンが変わりました

2015年5月15日金曜日 | Published in | 2 コメント

このエントリーをはてなブックマークに追加

StackOneの最新バージョン 1.6.3をリリースしました。このバージョンからアイコンが変わっています。


象がいなくなり重なりの模様だけのシンプルなものに変えました。

これは某マネー系アプリからクレームがあったためです(英語)。確かにそれとは似ていて先方からは、自分たちが先に出したしメジャーだからそっちを変えてほしい、みたいな文面が来た。あと法的な対処も匂わせたりもしていました。これが1番目の理由です。

2番目の理由は、その件とは無関係に最近の私のエバーノート系アプリはどれも象が入っていないものになっているので、それに合わせたというのもあります。以前から漠然と変えようと思ってたところにクレームが来たのがきっかけになったとも言えます。

アイコンは別のデザインも色々と考えたのですが、しっくりくるものがなかなかできず。最終的には以前の重なりの部分だけを残すシンプルなものに落ち着きました。
象が好きだったという方もいらっしゃったようでその方には誠に申し訳ないです。改良は続けていく予定なのでユーザの方々には今後ともどうぞよろしくお願いいたします。

では。


【アプリ】PicsEver 1.0 をリリースしました

2015年5月6日水曜日 | Published in | 0 コメント

このエントリーをはてなブックマークに追加


新アプリ PicsEver をリリースしました。カメラロールの写真を選択してエバーノートに投稿するアプリです。最大100枚までの写真をまとめて投稿できるのが一番の特徴です。




選択した写真は1つのノートにまとめられて投稿されます。
写真1枚ごとに日付と場所情報のヘッダがつきます(位置情報のある写真のみ)。



ノートタイトルは標準で日付が入りますが設定でカスタマイズ可能。送信時に変更することもできます。


簡易ビューア


設定画面

iPadでも使えます




写真をまとめて投稿する手段がなくて困っていた方、是非ご利用下さい。


【アプリ】PicsPicker 1.0 をリリースしました

2015年4月11日土曜日 | Published in | 0 コメント

このエントリーをはてなブックマークに追加


新アプリ PicsPicker をリリースしました。カメラロールの写真や動画を選択して他のアプリに渡すという単純なアプリです。


1日ごとにグルーピングしてまとめて選択することができます。


ビューアもついてます(動画の再生も可)


指定サイズに縮小できる。



初の Swiftを使ったアプリで四苦八苦しました。でも実際 Swiftで書いたのは100行ぐらいで写真選択の部分は昨年 Objective-Cでガリガリ書いた自作ライブラリがメイン。Swiftの使い始めとしてはちょうどよかったかも。

このライブラリは githubで公開している。


このライブラリを使うとこのアプリの写真選択機能と同じものが簡単にできる。

Swiftは面白い。が、Objective-Cのゆるゆるさに比べるとチェックが厳しいので慣れるまでが大変。




【アプリ】EverGear 3.0 メジャーアップデートしました

2015年1月28日水曜日 | Published in | 0 コメント

このエントリーをはてなブックマークに追加



本日 EverGear 3.0 がリリースされました。数年ぶりのメジャーバージョンアップになります。基本機能はあまり変わっていませんがデザインとアイコンをすべて一新しました。さらに iPhone6 / iPhone6Plusに対応、そして iPadでも利用できるようになりました。


新しくなった EverGearを紹介します。

(参考)ランディングページ

特徴

EverGearは エバーノートへの投稿に特化したアプリです。このアプリの一番の特徴は投稿前の下書き機能が充実しているところです。

下書きの一覧


下書きは通常のテキストはもちろん、

写真を添付することができて
ちょっとしたメモも書けます。

カメラ撮影はもちろんのこと、
アルバムから複数の写真を取り込むことができます。


クリップボードからは画像やテキストが取り込めます。

写真とクリップボードは画面全体が上へスライド
した後にその下から現れます。この下から現れるエリアを
「ドロワー」と呼んでいます(アイコンが引き出し
なのはその為です)。


写真は専用タブを用意していてスライドで眺めることができます。


EverGearのもう一つの大きな特徴が「ひな形」。
あらかじめテキストやノートブック、タグを定義しておくと
下書を新規作成する時のひな形(テンプレート)として利用できます。


登録したひな形は、下書きを作る時に
さっと呼び出すことができます。


下書の仕組み

EverGearでもっともわかりづらい(?)下書の仕組みについて図解してみました。


テキストは1行目がタイトルになります。長い文章などはここに書きます。「メモ」は文字と写真を1まとめにしたカードのようなもので、このメモは1つの下書きに複数付けることができます。メモには必ずしも写真をつける必要はなく、文字だけのメモも作ることができます。またメモごとに作成日時と位置情報が自動で記録されるようになっているので、ちょっとしたライフログにも最適です。写真の入ったメモは写真のタブで地図と一緒にスライドで観ることができるようなっています。

下書きをエバーノートへ送るとテキスト、メモ、メモ、... の順でレイアウトされたノートができあがります。
投稿したノートの例

このエバーノート上のレイアウトは4種類から選ぶことができます。

  • サムネイル+通常画像
  • サムネイルのみ
  • 通常画像のみ
  • プレーン(CSSなし)
いろいろ試してみてお好みのレイアウトを探してみてください。



送信の流れ

もう一つ EverGearでわかりづらい送信の流れについて、こちらも解説しておきます。

まず下書を送信するとノートは「送信」タブに
移り、すぐに送信処理が始まります。

オフライン(ネットワークに接続していない)の場合は
ここで待機状態になります。その後オンラインになり
次第送信が始まります。通信エラーなどで一時的に
待機状態になっている場合は、該当するノートを
右フリックしてメニューから「再送信」を選びます。



送信が終わると履歴に移ります。

履歴タブを開くと過去に送信完了したノートの
内容を確認することができます。



エバーノートへ送信したノートであっても
下書に戻して再編集することが可能です。
(フリックメニューから下書きへ戻します)

注意点としては、この時に別の端末で同じノートを
変更してもそれはEverGearには反映されないというところです。
編集後に再送信すると、エバーノート上のノートは上書きされ
るのでご注意ください。



なお、もし送信前に手直ししたい場合は下書に
戻すことができます。※送信中は元に戻せません。



メニュー

最後によく使う「メニュー」について補足しておきます。

一覧形式で表示される画面ではセル(行)ごとに
メニューが用意されています。

メニューはセル(行)の上で指を左または
右へすべらせる(フリック)と現れます。
左メニューだけでなく、右メニューが使える
セルもあるのでいろいろな画面で試してみてください。


サポート

Facebook / Twitter / メールにて受け付けています。質問や感想がありましたらお気軽にどうぞ。

EverGearサポートページ(Facebook)




リリースやバグ情報、開発状況などを発信しています。

@evergear(Twitter)



Lakesoftのサポートページ(Facebook)



メールアドレス






新しくなった EverGear を是非お試しください。




人気の投稿(過去 30日間)