SmartNewsやPintrestを見ているとスクロールに応じてツールバー(もしくはタブ)を表示したりしなかったりしている。
これは、UIWebViewの下を見ようとフリックしていく際にはツールバーを消し、逆に上を見ようとフリックした際にはツールバーを表示していて、iPhoneの狭い画面でもなるべく広く使うためのテクニックになっている。
↑このツールバーは常に表示する必要がないので出したり出さなかったり
仕様をまとめる
-
画面の下を見ようとする動作でツールバー消す
-
上に向けてフリック
-
スクロール後のy軸オフセット値がスクロール前より増える
-
=>スクロールビューのdelegateでオフセット値を計算
-
=> scrollViewWillBeginDragging:でスクロールし始めを取得
-
=> scrollViewDidScroll:でスクロール後に増えてたら消す
-
画面の上に戻ろうとする動作でツールバーを表示
-
下に向けてフリック
-
スクロール後のy軸オフセット値がスクロール前より減る
-
=>スクロールビューのdelegateでオフセット値を計算
-
=> scrollViewWillBeginDragging:でスクロールし始めを取得
-
=> scrollViewDidScroll:でスクロール後に増えてたら表示
-
ツールバーはアニメーションで消す
-
すでにアニメーションが行われていれば割り込まない
-
=>フラグもしくは列挙体でステータスを制御
コード
スクロールのステータスを表すenumを用意しておく
typedef enum {
QVToolBarScrollStatusInit = 0,
QVToolBarScrollStatusAnimation ,
}QVToolBarScrollStatus;
スクロールしはじめのオフセット値を保持するプロパティを用意
@property(nonatomic) CGFloat beginScrollOffsetY;
UIScrollViewのdelegateを実装して計算
//スクロールビューをドラッグし始めた際に一度実行される
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;
{
self.beginScrollOffsetY = [scrollView contentOffset].y;
}
//スクロールビューがスクロールされるたびに実行され続ける
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if (QVToolBarScrollStatusAnimation == self.toolBarScrollStatus) {
return;
}
if (self.beginScrollOffsetY < [scrollView contentOffset].y
&& !self.toolBar.hidden) {
//スクロール前のオフセットよりスクロール後が多い=下を見ようとした =>スクロールバーを隠す
[UIView animateWithDuration:0.4 animations:^{
self.toolBarScrollStatus = QVToolBarScrollStatusAnimation;
CGRect rect = self.toolBar.frame;
self.toolBar.frame = CGRectMake(rect.origin.x,
rect.origin.y + rect.size.height,
rect.size.width,
rect.size.height);
} completion:^(BOOL finished) {
self.toolBar.hidden = YES;
self.toolBarScrollStatus = QVToolBarScrollStatusInit;
}];
} else if ([scrollView contentOffset].y < self.beginScrollOffsetY
&& self.toolBar.hidden
&& 0.0 != self.beginScrollOffsetY) {
self.toolBar.hidden = NO;
[UIView animateWithDuration:0.4 animations:^{
self.toolBarScrollStatus = QVToolBarScrollStatusAnimation;
CGRect rect = self.toolBar.frame;
self.toolBar.frame = CGRectMake(rect.origin.x,
rect.origin.y - rect.size.height,
rect.size.width,
rect.size.height);
} completion:^(BOOL finished) {
self.toolBarScrollStatus = QVToolBarScrollStatusInit;
}];
}
}