scrollViewの中のimageViewの大きさをスクロールに合わせて変更する

ざっくり

スクロールさせているとき、Bounceの設定の仕方と、スクロールに合わせて画像の大きさを変える動作の実装

BounceとBounce Verticallyの違い

• scrollViewのcontentSizeが親viewよりも大きいときにスクロールし、境界を超えてもスクロールする。
• contentSizeが親viewよりも小さいときもbounceさせるには、alwaysBounceVerticalをYESにする(defaultはNO)
• alwaysBounceVerticalは、storyboardでは、Bounce Verticallyと書かれている。

BounceしているときのcontentSizeとcontentInsetとcontentOffset

• 上にbounceさせるとbounceさせただけ、contentOffsetのyに負の値が入る。
• contentSizeとcontentInsetは変わらない
• boundsのyも動きに合わせて負の値が入る

scrollに合わせてimageViewの大きさを変える

• bounceさせた時にimageViewの大きさを変更するとき、imageViewの大きさの変更でscrollのsizeが変わるとcontentOffsetが0になるのでそのまま配置しただけではだめ。
• imageViewの上にviewをセットして動きに合わせてImageViewのtopVerticalHeightを変更する。親のviewからimageViewははみ出すようにすることで、bounceの動作とimageViewの大きさの変更を連動させる
• viewのclipSubviewはoffに

ScrollView
- View
-- ImageView
-- Constraint
--- Height - (182) View
--- VerticalSpace - View - ImageView = imageVerticalHeight

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (scrollView.contentOffset.y < 0) {
        self.imageVerticalHeight.constant = scrollView.contentOffset.y;

    }
}

imageViewの大きさを変更するときにimageの比率を保つ

• imageViewのModeをAspect Fillに設定する
• scale to fitを使いながら、imageViewの大きさを調整したいときは、水平方向の位置を中心に固定し、imageViewのwidthに対してconstraintを設定する。動きに合わせてconstraintを変更する。

imageViewDefaultHeight = 320;
imageViewDefaultWidth = 182;
if (scrollView.contentOffset.y < 0) {
    self.imageVerticalHeight.constant = scrollView.contentOffset.y;
    self.imageViewWidth.constant = imageViewDefaultHeight*(imageViewDefaultWidth-scrollView.contentOffset.y)/imageViewDefaultWidth;
}

その他

scrollViewDidScrollの中でcontentInsetを変更する

• viewWillApearで、contentInsetを変更すると、contentOffsetもは、-contentInset.topの値が入る。
• contentInsetの値を変更するとscrollViewDidScroll:(UIScrollView *)scrollViewが実行される

scrollViewDidScrollの中でbouncesの値を変更する

• scrollViewのbouncesの値を変更するとscrollViewDidScrollが実行される

参考