Skip to main content
本文に 51 文字追加
ソース リンク

サクッとつくってみました

[![Twitter Like UI][1]][1]
[1]: https://i.sstatic.net/Gz2D4.gif

前提として、Twitterの中がどうなってるのかはわかりません。
世界的なアプリはビックリするような実装してたりするので。

似たようなUIをどう作るかですが、私が考えた流れを書いてみます。

・同じScroll方向の入れ子はあまり現実的ではありません(経験上)、
特に2つでスクロール量をコンバートするのは本当に危険です(非常に難しい)
というわけで縦のスクロールは恐らく1つです
・4つのViewはTableViewだと思います、エンドレスでスクロールできますから
・4つのTableViewは横ScrollViewで管理されていると思います
PageViewControllerも考えられますが、PageViewControllerの場合は、Viewを遷移したときに読み込みが走ります、Twitterは先に読込されています
(スマニューなんかと比べてみてください、あちらはPageViewControllerだと思います)
・ヘッダーは4つのTableViewに影響して動いています。
つまりどのViewにも属していなくて、self.Viewの下に存在しています(ここが罠ですね)
・ヘッダーはTableViewのcontentOffsetに応じて動きます
ヘッダーのTopConstraintを、scrollViewDidScrollから動かしてあげれば割と簡単です
・TableViewの上の方はヘッダーに隠れてしまうため、contentInsetで上を開けてやります

分かってしまうと、意外と基本の積み重ねトリッキーなことしてなさそうですねこれ

ソースコードを置いておきます
https://github.com/osanaikoutarou/TwitterLikeUI

ちなみに、雑に作ってるのでTableViewをスクロールしたあとで横に切り替えるとヘッダーの位置がおかしくなります
本家を触ってみると、結構細かな仕様が隠れてそうです(4つのスクロール位置の取り扱い)

サクッとつくってみました

[![Twitter Like UI][1]][1]
[1]: https://i.sstatic.net/Gz2D4.gif

前提として、Twitterの中がどうなってるのかはわかりません。
世界的なアプリはビックリするような実装してたりするので。

似たようなUIをどう作るかですが、私が考えた流れを書いてみます。

・同じScroll方向の入れ子はあまり現実的ではありません(経験上)、
特に2つでスクロール量をコンバートするのは本当に危険です(非常に難しい)
というわけで縦のスクロールは恐らく1つです
・4つのViewはTableViewだと思います、エンドレスでスクロールできますから
・4つのTableViewは横ScrollViewで管理されていると思います
PageViewControllerも考えられますが、PageViewControllerの場合は、Viewを遷移したときに読み込みが走ります、Twitterは先に読込されています
(スマニューなんかと比べてみてください、あちらはPageViewControllerだと思います)
・ヘッダーは4つのTableViewに影響して動いています。
つまりどのViewにも属していなくて、self.Viewの下に存在しています(ここが罠ですね)
・ヘッダーはTableViewのcontentOffsetに応じて動きます
ヘッダーのTopConstraintを、scrollViewDidScrollから動かしてあげれば割と簡単です
・TableViewの上の方はヘッダーに隠れてしまうため、contentInsetで上を開けてやります

分かってしまうと、意外と基本の積み重ねですねこれ

ソースコードを置いておきます
https://github.com/osanaikoutarou/TwitterLikeUI

ちなみに、雑に作ってるのでTableViewをスクロールしたあとで横に切り替えるとヘッダーの位置がおかしくなります

サクッとつくってみました

[![Twitter Like UI][1]][1]
[1]: https://i.sstatic.net/Gz2D4.gif

前提として、Twitterの中がどうなってるのかはわかりません。
世界的なアプリはビックリするような実装してたりするので。

似たようなUIをどう作るかですが、私が考えた流れを書いてみます。

・同じScroll方向の入れ子はあまり現実的ではありません(経験上)、
特に2つでスクロール量をコンバートするのは本当に危険です(非常に難しい)
というわけで縦のスクロールは恐らく1つです
・4つのViewはTableViewだと思います、エンドレスでスクロールできますから
・4つのTableViewは横ScrollViewで管理されていると思います
PageViewControllerも考えられますが、PageViewControllerの場合は、Viewを遷移したときに読み込みが走ります、Twitterは先に読込されています
(スマニューなんかと比べてみてください、あちらはPageViewControllerだと思います)
・ヘッダーは4つのTableViewに影響して動いています。
つまりどのViewにも属していなくて、self.Viewの下に存在しています(ここが罠ですね)
・ヘッダーはTableViewのcontentOffsetに応じて動きます
ヘッダーのTopConstraintを、scrollViewDidScrollから動かしてあげれば割と簡単です
・TableViewの上の方はヘッダーに隠れてしまうため、contentInsetで上を開けてやります

分かってしまうと、意外とトリッキーなことしてなさそうですねこれ

ソースコードを置いておきます
https://github.com/osanaikoutarou/TwitterLikeUI

ちなみに、雑に作ってるのでTableViewをスクロールしたあとで横に切り替えるとヘッダーの位置がおかしくなります
本家を触ってみると、結構細かな仕様が隠れてそうです(4つのスクロール位置の取り扱い)

編集済みの本文
ソース リンク

サクッとつくってみました

[![Twitter Like UI][1]][1]
[1]: https://i.sstatic.net/Gz2D4.gif

前提として、Twitterの中がどうなってるのかはわかりません。
世界的なアプリはビックリするような実装してたりするので。

似たようなUIをどう作るかですが、私が考えた流れを書いてみます。

・同じScroll方向の入れ子はあまり現実的ではありません(経験上)、
特に2つでスクロール量をコンバートするのは本当に危険です(非常に難しい)
というわけで縦のスクロールは恐らく1つです
・4つのViewはTableViewだと思います、エンドレスでスクロールできますから
・4つのTableViewは横ScrollViewで管理されていると思います
PageViewControllerも考えられますが、PageViewControllerの場合は、Viewを遷移したときに読み込みが走ります、Twitterは先に読込されています
(スマニューなんかと比べてみてください、あちらはPageViewControllerだと思います)
・ヘッダーは4つのTableViewに影響して動いているいます
つまりどのViewの中にも入っ属していなく、self.Viewの下に存在しています(ここが罠ですね)
・ヘッダーはTableViewのcontentOffsetに応じて動きます
ヘッダーのTopConstraintを、scrollViewDidScrollから動かしてあげれば割と簡単です
・TableViewの上の方はヘッダーに隠れてしまうため、contentInsetで上を開けてやります

分かってしまうと、意外と基本の積み重ねですねこれ

ソースコードを置いておきます
https://github.com/osanaikoutarou/TwitterLikeUI

ちなみに、雑に作ってるのでTableViewをスクロールしたあとで横に切り替えるとヘッダーの位置がおかしくなります

サクッとつくってみました

[![Twitter Like UI][1]][1]
[1]: https://i.sstatic.net/Gz2D4.gif

前提として、Twitterの中がどうなってるのかはわかりません。
世界的なアプリはビックリするような実装してたりするので。

似たようなUIをどう作るかですが、私が考えた流れを書いてみます。

・同じScroll方向の入れ子はあまり現実的ではありません(経験上)、
特に2つでスクロール量をコンバートするのは本当に危険です(非常に難しい)
というわけで縦のスクロールは恐らく1つです
・4つのViewはTableViewだと思います、エンドレスでスクロールできますから
・4つのTableViewは横ScrollViewで管理されていると思います
PageViewControllerも考えられますが、PageViewControllerの場合は、Viewを遷移したときに読み込みが走ります、Twitterは先に読込されています
(スマニューなんかと比べてみてください、あちらはPageViewControllerだと思います)
・ヘッダーは4つのTableViewに影響して動いている
つまりどのViewの中にも入っていなく、self.Viewの下に存在しています(ここが罠ですね)
・ヘッダーはTableViewのcontentOffsetに応じて動きます
ヘッダーのTopConstraintを、scrollViewDidScrollから動かしてあげれば割と簡単です
・TableViewの上の方はヘッダーに隠れてしまうため、contentInsetで上を開けてやります

分かってしまうと、意外と基本の積み重ねですねこれ

ソースコードを置いておきます
https://github.com/osanaikoutarou/TwitterLikeUI

ちなみに、雑に作ってるのでTableViewをスクロールしたあとで横に切り替えるとヘッダーの位置がおかしくなります

サクッとつくってみました

[![Twitter Like UI][1]][1]
[1]: https://i.sstatic.net/Gz2D4.gif

前提として、Twitterの中がどうなってるのかはわかりません。
世界的なアプリはビックリするような実装してたりするので。

似たようなUIをどう作るかですが、私が考えた流れを書いてみます。

・同じScroll方向の入れ子はあまり現実的ではありません(経験上)、
特に2つでスクロール量をコンバートするのは本当に危険です(非常に難しい)
というわけで縦のスクロールは恐らく1つです
・4つのViewはTableViewだと思います、エンドレスでスクロールできますから
・4つのTableViewは横ScrollViewで管理されていると思います
PageViewControllerも考えられますが、PageViewControllerの場合は、Viewを遷移したときに読み込みが走ります、Twitterは先に読込されています
(スマニューなんかと比べてみてください、あちらはPageViewControllerだと思います)
・ヘッダーは4つのTableViewに影響して動いています
つまりどのViewにも属していなく、self.Viewの下に存在しています(ここが罠ですね)
・ヘッダーはTableViewのcontentOffsetに応じて動きます
ヘッダーのTopConstraintを、scrollViewDidScrollから動かしてあげれば割と簡単です
・TableViewの上の方はヘッダーに隠れてしまうため、contentInsetで上を開けてやります

分かってしまうと、意外と基本の積み重ねですねこれ

ソースコードを置いておきます
https://github.com/osanaikoutarou/TwitterLikeUI

ちなみに、雑に作ってるのでTableViewをスクロールしたあとで横に切り替えるとヘッダーの位置がおかしくなります

ソース リンク

サクッとつくってみました

[![Twitter Like UI][1]][1]
[1]: https://i.sstatic.net/Gz2D4.gif

前提として、Twitterの中がどうなってるのかはわかりません。
世界的なアプリはビックリするような実装してたりするので。

似たようなUIをどう作るかですが、私が考えた流れを書いてみます。

・同じScroll方向の入れ子はあまり現実的ではありません(経験上)、
特に2つでスクロール量をコンバートするのは本当に危険です(非常に難しい)
というわけで縦のスクロールは恐らく1つです
・4つのViewはTableViewだと思います、エンドレスでスクロールできますから
・4つのTableViewは横ScrollViewで管理されていると思います
PageViewControllerも考えられますが、PageViewControllerの場合は、Viewを遷移したときに読み込みが走ります、Twitterは先に読込されています
(スマニューなんかと比べてみてください、あちらはPageViewControllerだと思います)
・ヘッダーは4つのTableViewに影響して動いている。
つまりどのViewの中にも入っていなく、self.Viewの下に存在しています(ここが罠ですね)
・ヘッダーはTableViewのcontentOffsetに応じて動きます
ヘッダーのTopConstraintを、scrollViewDidScrollから動かしてあげれば割と簡単です
・TableViewの上の方はヘッダーに隠れてしまうため、contentInsetで上を開けてやります

分かってしまうと、意外と基本の積み重ねですねこれ

ソースコードを置いておきます
https://github.com/osanaikoutarou/TwitterLikeUI

ちなみに、雑に作ってるのでTableViewをスクロールしたあとで横に切り替えるとヘッダーの位置がおかしくなります