Edited at

Twitterアプリのプロフィール風UI

作ってみたら意外とサクッといけました。

tw.gif

コード

https://github.com/osanaikoutarou/TwitterLikeUI

※もちろん本家を見てもらえれば分かる通り、実際はもう少し複雑です


少しだけ解説

階層はこんな状態です。

view

  ーHeaderView

  ーUIScrollView(横)

     ーUITableView

     ーUITableView

     ーUITableView

     ーUITableView

HeaderViewがスクロール内に入っていないのが引っ掛けです。これを入れてしまうと途端に難しくなります。

こういったUIは、ViewのConstraintを直接書き換えたほうがコントロールしやすいです。

コントロールするのはUIScrollViewDelegateのscrollViewDidScrollです。

黄色いバーがちょうど上に来る当たりで止めれば、まるでUITableViewのコンポーネントみたいです。

(でも4つのTableViewに影響して動いているので、コンポーネントなわけないんですよね)

黄色いViewの中の、現在のViewを表す水色のViewも、画面左からのConstraintを動かしているだけです。