[ING]-FacebookみたいなUIをライブラリなしで作ってみるプラクティス(レイアウト3種ほど)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
FacebookLikeUI.xcodeproj
FacebookLikeUI
FacebookLikeUITests
FacebookLikeUIUITests
README.md

README.md

FacebookLikeUI

[ING]FacebookみたいなUIをライブラリなしで作ってみるプラクティス(レイアウト3種ほど)

こちらはFacebookやTwitterのアプリの中でUI表現や気になった部分をトレースしてDIYをしたサンプルになります。 特に今回は画像の見せ方や動き・レイアウトの部分を中心にピックアップしてみました。

主な動きの一覧

  • サムネイル画像の一覧表示の際に画像の枚数に応じてタイル表示部分の大きさを変更するレイアウトと画面遷移関連
  • 自分のフォトライブラリーに登録されている画像の一覧を取得してUICollectionViewに表示する
  • 横方向にカード型のUICollectionViewを配置しスクロールすると表示対象のセルが中央に表示される

画面キャプチャその1

今回のサンプルの画面一覧その1

画面キャプチャその2

今回のサンプルの画面一覧その2

画像サムネイルのタイル状レイアウト表示のパターン

タイル状のUI表現をする際には、様々な手法があるかと思いますが、今回は複雑な段違いのサムネイルレイアウトをするためにAutoLayoutの制約を利用して1枚のセルの中で完結するようにしました。 InterfaceBuilderでの設定とコードを組み合わせた実装になっています。(それぞれのUIImageViewの幅と高さはAutoLayoutの制約を計算で出しています)

配置

レイアウトやその他要素の配置に関することに関しては下記のQiita記事にポイント並びに手順をまとめてありますので、ご確認頂ければ幸いです。 また、是非とも実機などがおありの場合はインストールをして挙動や振る舞いをご確認いただければと思います。

(Qiita) http://qiita.com/fumiyasac@github/items/3be1344255b3ebb9f416