I am trying to custom a extension for Parallax Header. However, it's not working perfectly. The table header view always floats and overlaps cells.
Extension code:
extension UITableView {
func addImageHeaderView(headerView headerView: UIView, height: CGFloat) {
self.contentInset = UIEdgeInsetsMake(height, 0, 0, 0)
self.contentOffset = CGPoint(x: 0, y: -height)
self.tableHeaderView = headerView
self.tableHeaderView?.frame = CGRect(x: 0, y: 0, width: self.bounds.width, height: height)
}
func updateHeaderView(height kTableHeaderHeight: CGFloat) {
var headerRect = CGRect(x: 0, y: -kTableHeaderHeight , width: self.bounds.width, height: kTableHeaderHeight)
if self.contentOffset.y < -kTableHeaderHeight {
headerRect.origin.y = self.contentOffset.y
headerRect.size.height = -self.contentOffset.y
}
self.tableHeaderView?.frame = headerRect
}
}
Implementing Code :
tableView.addImageHeaderView(headerView: viewHeader, height: 100)
func scrollViewDidScroll(scrollView: UIScrollView) {
tableView.updateHeaderView(height: 200)
}
Am I wrong at something? Please show me if you know.
Can you please try to set the following in viewDidLoad
self.edgesForExtendedLayout = UIEdgeInsetsZero;
in swift
self.edgesForExtendedLayout = .None
Also what you can try to do is to check the result of the following
tableView.addImageHeaderView(headerView: viewHeader, height: 0)
func scrollViewDidScroll(scrollView: UIScrollView) {
tableView.updateHeaderView(height: 200)
}
please notice that i changed the height from 100 to 0
i did it because the height value will change the contentInset of your table view and this is exactly the distance from the top corner
Related
I have an UIImageView object in UIScrollView(to zoom). In addition, UIImageView also contains subviews. I am using following function to zoom in UIImageView.
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return self.imageView
}
It works perfectly fine for UIImageView.
The problem is when zooming these subviews, it also zooms these subviews the same way. Is there a way to disable zooming for these subviews?
There are many ways to achieve this. I would say the easiest one is to simply back-scale your views. This is what I used as a demo:
class ViewController: UIViewController {
#IBOutlet private var scrollView: UIScrollView?
private var imageView: UIImageView?
private var annotations: [UIView] = [UIView]()
override func viewDidLoad() {
super.viewDidLoad()
let imageView = UIImageView(image: UIImage(named: "background"))
scrollView?.addSubview(imageView)
scrollView?.contentSize = imageView.bounds.size
scrollView?.maximumZoomScale = 5.0
self.imageView = imageView
scrollView?.delegate = self
applyAnnotationView({
let view = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 10.0, height: 10.0))
view.backgroundColor = UIColor.red
view.layer.cornerRadius = view.bounds.width*0.5
return view
}(), at: CGPoint(x: 100.0, y: 100.0))
applyAnnotationView({
let view = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 10.0, height: 10.0))
view.backgroundColor = UIColor.green
view.layer.cornerRadius = view.bounds.width*0.5
return view
}(), at: CGPoint(x: 200.0, y: 200.0))
}
func applyAnnotationView(_ view: UIView, at position: CGPoint) {
view.center = position
annotations.append(view)
imageView?.addSubview(view)
}
}
// MARK: - UIScrollViewDelegate
extension ViewController: UIScrollViewDelegate {
func scrollViewDidZoom(_ scrollView: UIScrollView) {
annotations.forEach { item in
item.transform = CGAffineTransform(scaleX: 1.0/scrollView.zoomScale, y: 1.0/scrollView.zoomScale)
}
}
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return imageView
}
}
Simply applying CGAffineTransform(scaleX: 1.0/scrollView.zoomScale, y: 1.0/scrollView.zoomScale) does all the work. It should be OK even when using constraints.
The UIView, which is inside the UIImageView, will always be the same size, but will be anchored to a specific point in the image (10% at the top and 10% at the left):
var item: UIView?
override func viewDidLoad() {
...
item = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
setPosition()
item?.backgroundColor = UIColor.red
imageView.addSubview(item!)
...
}
func setPosition() {
let x = imageView.frame.size.width/10
let y = imageView.frame.size.height/10
item?.frame = CGRect(x: x, y: y, width: 200, height: 200)
}
func scrollViewDidZoom(_ scrollView: UIScrollView) {
...
setPosition()
...
}
Instead of 10%, you can use the exact figure, using the formula:
x = startPosition/startWidthImage*currentWidthImage
I am new in ios development, i want to show edge of next view using scrollview initial i got help from this Link, here is my view hierarchy
1) I added scrollview from story board to view controllers's top view
2) I added a view as container view and collection view programmatically as subviews of scrollview.
I displayed the edge of next view but when i go to next page things are not smoothly, i do not know how to handle this massy thing and also i do not know which approach is best for achieving this particular task. here is my code. I'm really stuck and I really don't know what to do.
func addCollectionViewsInsideScrollView(){
scrollView?.delegate = self;
scrollView?.isPagingEnabled=true
scrollView.indicatorStyle = UIScrollViewIndicatorStyle.white
for i in 0...2 {
if i == 0 {
frame = CGRect(x: scrollWidth * CGFloat (i), y: 0, width: scrollWidth - 45,height: scrollHeight)
subView1 = UIView(frame: frame)
subView1.backgroundColor = .white
scrollView?.backgroundColor = .white
scrollView?.addSubview(subView1)
subView1.addSubview(collectionView0)
collectionView0.frame = CGRect(x: subView1.bounds.origin.x, y: 0, width: subView1.bounds.width,height: subView1.bounds.height)
}
if i == 1 {
frame = CGRect(x: scrollWidth * CGFloat (i) - 20, y: 0, width: scrollWidth - 45,height: scrollHeight)
subView2 = UIView(frame: frame)
scrollView?.addSubview(subView2)
subView2.addSubview(collectionView1)
collectionView1.frame = CGRect(x: subView2.bounds.origin.x, y: 0, width: subView2.bounds.width,height: subView2.bounds.height)
}
if i == 2 {
frame = CGRect(x: scrollWidth * CGFloat (i) - 40, y: 0, width: scrollWidth - 45,height: scrollHeight)
subView3 = UIView(frame: frame)
scrollView?.addSubview(subView3)
subView3.addSubview(collectionView2)
collectionView2.frame = CGRect(x: subView3.bounds.origin.x, y: 0, width: subView3.bounds.width,height: subView3.bounds.height)
}
}
scrollView?.contentSize = CGSize(width: (scrollWidth * 3), height: scrollHeight)
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
setIndiactorForCurrentPage()
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if myPageNo == 1 {
frame = CGRect(x: scrollWidth - 20, y: 0, width: scrollWidth - 40,height: scrollHeight)
let subView = UIView(frame: frame)
self.scrollView?.addSubview(subView)
subView.addSubview(collectionView1)
collectionView1.frame = CGRect(x: subView.bounds.origin.x, y: 0, width: subView.bounds.width,height: subView.bounds.height)
myPageNo -= 0
}
if myPageNo == 2{
frame = CGRect(x: scrollWidth * 2 - 20, y: 0, width: scrollWidth,height: scrollHeight)
let subView = UIView(frame: frame)
self.scrollView.addSubview(subView)
subView.addSubview(collectionView2)
collectionView2.frame = CGRect(x: subView.bounds.origin.x, y: 0, width: subView.bounds.width,height: subView.bounds.height)
myPageNo -= 1
}
}
func setIndiactorForCurrentPage() {
let page = (scrollView?.contentOffset.x)!/scrollWidth
print(scrollView?.contentOffset.x ?? 0)
pageControl?.currentPage = Int(page.rounded())
myPageNo = Int(page.rounded())
if myPageNo == 1 {
setFrame(pageNo: 1)
}
if myPageNo == 2{
setFrame(pageNo: 2)
}
}
func setFrame(pageNo: Int){
if(pageNo == 1){
frame = CGRect(x: scrollWidth + 2, y: 0, width: scrollWidth - 40,height: scrollHeight)
let subView = UIView(frame: frame)
scrollView?.addSubview(subView)
subView.addSubview(collectionView1)
collectionView1.frame = CGRect(x: subView.bounds.origin.x, y: 0, width: subView.bounds.width,height: subView.bounds.height)
}
else if(pageNo == 2){
frame = CGRect(x: scrollWidth * 2, y: 0, width: scrollWidth,height: scrollHeight)
let subView = UIView(frame: frame)
scrollView?.addSubview(subView)
subView.addSubview(collectionView2)
collectionView2.frame = CGRect(x: subView.bounds.origin.x, y: 0, width: subView.bounds.width,height: subView.bounds.height)
}
}
when I back from last page to previous one, all is good but when I go first page to next view i am unable to handle showing edge of next view.
So far I achieved this thing but this is not what i want. I want to control uiscroll using tap gesture and alse want to show last page with left align
`this is my code func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
var visibleRect = CGRect()
visibleRect.origin = collectionView.contentOffset
visibleRect.size = collectionView.bounds.size
let visiblePoint = CGPoint(x: visibleRect.midX, y: visibleRect.midY)
let visibleIndexPath: IndexPath = collectionView.indexPathForItem(at: visiblePoint)
collectionView.scrollToItem(at: visibleIndexPath, at: .left, animated: true)
indexPathArray.removeAll()
}
`
I have been working on several projects where you would have like a peek at the next item you could view. The best solution is probably a UICollectionView as you would not load every UIViewController into view immediately but only when it's almost up. The cell re-use of UICollectionView takes care of that.
Make sure the cell size (which you can calculate depending on the size of your screen) will be something like width - 40px so you just see the edge of the next cell. It's totally possible to have a UIViewController in every cell, in fact you could even do it via Interface Builder nowadays.
UICollectionView already implements UIScrollView so no need to mess with UIScrollView manually. The only thing you need to do is that at the moment somebody stops scrolling you decide which cell you want to scroll to (the next one or stay on the current one) and scroll to that cell animated. For this you need to add a gesture recognizer:
Intercepting pan gestures over a UIScrollView breaks scrolling
Then scroll to the cell most visible when the user stops scrolling:
https://developer.apple.com/documentation/uikit/uicollectionview/1618046-scrolltoitematindexpath
For this you need to know which cell is most visible at that moment. This calculation can be a bit difficult but the gist is that you need to know which cells are in indexPathsForVisibleItems and then see according to their content- or scrollOffset which one is more into view than the other(s). The indexPath of that one should be the indexPath of the one you want to scroll into view.
This solution scales up to millions of items since you're only loading the cells you actually (are about to) see.
If you have many pages I wouldn't do with scroll view but here is my sample code to show next page in scrollview.
class ExampleViewController: UIViewController {
var scrollView = UIScrollView()
var container1 = UIView()
var container2 = UIView()
var container3 = UIView()
override func viewDidLoad() {
super.viewDidLoad()
scrollView.isPagingEnabled = true
scrollView.clipsToBounds = false
view.addSubview(scrollView)
container1.backgroundColor = .red
container2.backgroundColor = .blue
container3.backgroundColor = .yellow
scrollView.addSubview(container1)
scrollView.addSubview(container2)
scrollView.addSubview(container3)
}
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
scrollView.frame = CGRect(x: 0, y: 0, width: view.bounds.width - peekAmount, height: view.bounds.height)
scrollView.contentSize = CGSize(width: 3 * scrollView.frame.width, height: scrollView.frame.size.height)
container1.frame.size = containerSize
container2.frame.size = containerSize
container3.frame.size = containerSize
var xPosition: CGFloat = 0
container1.frame.origin = CGPoint(x: xPosition, y: 0)
xPosition = container1.frame.maxX
container2.frame.origin = CGPoint(x: xPosition, y: 0)
xPosition = container2.frame.maxX
container3.frame.origin = CGPoint(x: xPosition, y: 0)
}
var containerSize: CGSize {
return CGSize(width: scrollView.frame.size.width, height: scrollView.frame.size.height)
}
var peekAmount: CGFloat {
return 80
}
}
There are many different ways to achieve your needs but this is simple enough to give you an idea. I didn't add the page control since you already have the logic.
I think, you use UICollectionView to show edge of the next view.
Problem
http://im2.ezgif.com/tmp/ezgif-2269702568.gif
I've set the contentSize to the height that I want. However, my scrollview still has vertical scrolling. In fact there's lots of empty white space, which I'm not sure why.
And I'm not sure if it's because I do: contentOffset = CGPoint(x:0, y: self.frame.minY). But the reason I did that was because when I placed my buttons in the scroll view, I would have to scroll down to see them. contentOffset allows the buttons to be on the scrollview when it is loaded.
If someone could disable the vertical scrolling while still having the buttons show up that would be great!
Code
In my view controller I set up the custom scrollview:
class ScheduleViewController: UIViewController {
private var scheduleBar: ScheduleBar!
private let barHeight: CGFloat = 55
override func viewDidLoad() {
super.viewDidLoad()
scheduleBar = ScheduleBar(frame: CGRect(x: 0, y: (self.navigationController?.navigationBar.frame.maxY)!, width: self.view.bounds.width, height: barHeight))
scheduleBar.setUp(buttonsData: times, selected: 2)
self.view.addSubview(scheduleBar)
}
}
In the custom scrollview I set up my scrollview further:
class ScheduleBar: UIScrollView {
private var buttons: [UIButton]!
private var bar: UIView!
private var buttonWidth: CGFloat!
private var buttonPadding: CGFloat = 20
func setUp(buttonsData: [String], selected: Int){
self.backgroundColor = UIColor.white
buttons = []
for time in buttonsData{
let button = UIButton(frame: CGRect(x: 0, y: 0, width: 50, height: self.bounds.height))
button.setTitle(time, for: UIControlState.normal)
button.setTitleColor(Color.black, for: UIControlState.normal)
button.titleLabel?.font = UIFont(name: "HelveticaNeue-Medium", size: 13.0)
button.sizeToFit()
buttonWidth = button.bounds.width + buttonPadding
buttons.append(button)
}
for i in 0...(buttons.count-1){
if i == 0 {
buttons[i].frame = buttons[i].frame.offsetBy(dx:buttonPadding/2, dy: 0)
}else if i == buttons.count-1{
buttons[i].frame = buttons[i].frame.offsetBy(dx: CGFloat(i) * buttonWidth + buttonPadding/2, dy: 0)
}
else{
buttons[i].frame = buttons[i].frame.offsetBy(dx: CGFloat(i) * buttonWidth + buttonPadding, dy: 0)
}
buttons[i].center.y = (self.bounds.height/2)
addSubview(buttons[i])
}
bar = UIView(frame: CGRect(x: 0, y: self.bounds.height - 3.0, width: buttons[0].bounds.width + buttonPadding, height: 3.0))
bar.backgroundColor = Color.red
select(index: selected, animation: false)
addSubview(bar)
self.contentSize = CGSize(width: CGFloat(buttons.count) * buttonWidth + buttonPadding, height: self.bounds.height)
//reset origin of scrollview
self.contentOffset = CGPoint(x:0, y: self.frame.minY)
}
func select(index: Int, animation: Bool){
func select() -> Void{
if index == 0{
bar.frame.origin.x = CGFloat(0)
}else{
bar.frame.origin.x = buttons[index].frame.minX - buttonPadding/2
}
}
if animation {
UIView.animate(withDuration: 0.7, animations: {select()})
}else{
select()
}
scrollRectToVisible(CGRect(x: buttons[index].frame.minX, y: self.frame.minY, width: buttons[index].bounds.width, height: buttons[index].bounds.height), animated: true)
}
Try setting the contentSize's height to the scrollView's height. Then the vertical scroll should be disabled because there would be nothing to scroll vertically.
scrollView.contentSize = CGSizeMake(scrollView.contentSize.width,scrollView.frame.size.height);
Set scheduleBar.contentSize = (to your desired height so it wont have enough space to scroll up and down)
like:
scheduleBar.frame = CGRectMake(width: 100, height: 200);
scheduleBar.contentSize = CGSizeMake(scheduleBar.contentSize.width,scheduleBar.frame.size.height);
//should disable scroll for both vertical and horizontal
I'm having trouble displaying an UIImageView as UITableView header.
When it's initially loaded it's not centered which it should be and its size is 600px? Then when I scroll it jumps to the correct position and adjusts itself to the correct size.
Can anyone tell me what is causing this and possibly how to fix it?
The problem:
How it should display initially:
NOTE:
When I print out the image height it's 600px wide but should initially be the same as the screenwidth. The UIImageView is set to Aspect Fill.
My setup:
#IBOutlet var tableView: UITableView!
#IBOutlet weak var tableImage:UIImageView!
var headerView: UIView!
var headerMaskLayer: CAShapeLayer!
private let kTableHeaderHeight: CGFloat = 260.0
private let kTableHeaderCutAway: CGFloat = 25.0
override func viewDidLoad() {
super.viewDidLoad()
headerView = tableView.tableHeaderView
tableView.tableHeaderView = nil
tableView.addSubview(headerView)
tableView.contentInset = UIEdgeInsets(top: kTableHeaderHeight, left: 0, bottom: 0, right: 0)
tableView.contentOffset = CGPoint(x: 0, y: -kTableHeaderHeight)
headerMaskLayer = CAShapeLayer()
headerMaskLayer.fillColor = UIColor.blackColor().CGColor
headerView.layer.mask = headerMaskLayer
updateHeaderView()
displayPoster(listBackdrop!)
//.... rest of code
}
func displayPoster (urlString: String)
{
if (urlString != ""){
let newUrl = urlString.stringByReplacingOccurrencesOfString("w500", withString: "w780")
self.tableImage.alpha = 0
let url = NSURL(string: newUrl)
// loading image with haneke lib
self.tableImage.hnk_setImageFromURL(url!)
UIView.animateWithDuration(1){
self.tableImage.alpha = 1.0
}
}
}
func scrollViewDidScroll(scrollView: UIScrollView) { updateHeaderView() }
func updateHeaderView(){
var headerRect = CGRect(x: (tableView.bounds.width-tableImage.bounds.width)/2, y: -kTableHeaderHeight, width: tableView.bounds.width, height: kTableHeaderHeight)
if tableView.contentOffset.y < -kTableHeaderHeight{
headerRect.origin.y = tableView.contentOffset.y
headerRect.size.height = -tableView.contentOffset.y
}
headerView.frame = headerRect
// the image cutaway
let path = UIBezierPath()
path.moveToPoint(CGPoint(x: 0, y: 0))
path.addLineToPoint(CGPoint(x: headerRect.width, y: 0))
path.addLineToPoint(CGPoint(x: headerRect.width, y: headerRect.height))
path.addLineToPoint(CGPoint(x: headerRect.width/2, y: headerRect.height-kTableHeaderCutAway))
path.addLineToPoint(CGPoint(x: 0, y: headerRect.height))
headerMaskLayer?.path = path.CGPath
}
The UIImageView constraints are setup as followed:
You are calling updateHeaderView() in your viewDidLoad(), which is before the view has had a chance to complete the layout. Try adding that to viewWillAppear() method.
I was facing the same issue while implementing stretchy headers. However calling updateHeaderView() in viewWillAppear() did not work for me.
It should be called from viewDidAppear() instead.
Tweetbot and Kickstarter for iOS uses a cool feature on user profiles that have a banner image. If you pull down on the tableView the image zooms.
I have it partially working using the following, it changes the height of the image, but strangely, not the width:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
UIImageView *imageView = (UIImageView *)self.tableView.tableHeaderView;
CGFloat y = -scrollView.contentOffset.y;
imageView.frame = CGRectMake(0, scrollView.contentOffset.y, self.cachedImageViewSize.size.width+y, self.cachedImageViewSize.size.height+y);
NSLog(#"%#", NSStringFromCGRect(imageView.frame));
}
Does anyone know how to recreate this effect?
Ok, I figured it out. Here is what I did:
- (void)viewDidLoad {
[super viewDidLoad];
self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"church-welcome.png"]];
self.imageView.contentMode = UIViewContentModeScaleAspectFill;
self.cachedImageViewSize = self.imageView.frame;
[self.tableView addSubview:self.imageView];
[self.tableView sendSubviewToBack:self.imageView];
self.tableView.tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 170)];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat y = -scrollView.contentOffset.y;
if (y > 0) {
self.imageView.frame = CGRectMake(0, scrollView.contentOffset.y, self.cachedImageViewSize.size.width+y, self.cachedImageViewSize.size.height+y);
self.imageView.center = CGPointMake(self.view.center.x, self.imageView.center.y);
}
}
The above answer for Swift:
Variable Decelerations:
var imageView: UIImageView!
var cachedImageViewSize: CGRect!
viewDidLoad:
var imageView: UIImageView!
var cachedImageViewSize: CGRect!
override func viewDidLoad() {
super.viewDidLoad()
self.imageView = UIImageView(image: UIImage(named: "image-plane"))
imageView.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 170)
self.imageView.contentMode = .ScaleAspectFill
self.cachedImageViewSize = self.imageView.frame
self.tableView.addSubview(self.imageView)
self.imageView.center = CGPointMake(self.view.center.x, self.imageView.center.y)
self.tableView.sendSubviewToBack(self.imageView)
self.tableView.tableHeaderView = UIView(frame: CGRectMake(0, 0, self.view.frame.size.width, 170))
}
scrollViewDidScroll:
override func scrollViewDidScroll(scrollView: UIScrollView) {
let y: CGFloat = -scrollView.contentOffset.y
if y > 0 {
self.imageView.frame = CGRectMake(0, scrollView.contentOffset.y, self.cachedImageViewSize.size.width + y, self.cachedImageViewSize.size.height + y)
self.imageView.center = CGPointMake(self.view.center.x, self.imageView.center.y)
}
}
Swift 3.0 version of Nic Hubbard's answer:
override func viewDidLoad() {
self.imageView = UIImageView(image: UIImage(named: "header-image"))
imageView.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 170)
self.imageView.contentMode = .scaleAspectFill
self.cachedImageViewSize = self.imageView.frame
self.tableView.addSubview(self.imageView)
self.imageView.center = CGPoint(x: self.view.center.x, y:self.imageView.center.y)
self.tableView.sendSubview(toBack: self.imageView)
self.tableView.tableHeaderView = UIView(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 170))
}
override func scrollViewDidScroll(_ scrollView: UIScrollView) {
let y: CGFloat = -scrollView.contentOffset.y
if y > 0 {
self.imageView.frame = CGRect(x: 0, y: scrollView.contentOffset.y, width: self.cachedImageViewSize.size.width + y, height: self.cachedImageViewSize.size.height + y)
self.imageView.center = CGPoint(x: self.view.center.x, y: self.imageView.center.y)
}
}
I think it's simply resize the image view to fit the vertial space, while keeping the same aspect ratio.
Swift 2 version of Nic Hubbard's answer:
var imageView: UIImageView!
var cachedImageViewSize: CGRect!
override func viewDidLoad(){
super.viewDidLoad()
self.imageView = UIImageView(image: UIImage(named: "church-welcome.png"))
self.imageView.contentMode = .ScaleAspectFill
self.cachedImageViewSize = self.imageView.frame
self.tableView.addSubview(self.imageView)
self.tableView.sendSubviewToBack(self.imageView)
self.tableView.tableHeaderView = UIView(frame: CGRectMake(0, 0, self.view.frame.size.width, 170))
}
func scrollViewDidScroll(scrollView: UIScrollView) {
var y: CGFloat = -scrollView.contentOffset.y
if y > 0 {
self.imageView.frame = CGRectMake(0, scrollView.contentOffset.y, self.cachedImageViewSize.size.width + y, self.cachedImageViewSize.size.height + y)
self.imageView.center = CGPointMake(self.view.center.x, self.imageView.center.y)
}
}
The above mentioned solutions will actually not really provide the exact implementation of how it is in Tweetbot or Tinder [target's profile picture zooming].
I also had to solve this problem and the most perfect implementation I found is to use 2 main elements:
1) Tableview which has content inset
2) Imageview on top of that table view which has an outlet for top constraint and height constraint and which is on top of that empty space provided by the tableview content inset.
So first make sure to set the insets for the tableView and initial height constraint for the imageView. You can do this in viewDidLoad for example.
imageViewHeightConstraint.constant = view.frame.height * 0.3
tableView.contentInset = UIEdgeInsets(top: view.frame.height * 0.3, left: 0, bottom: 0, right: 0)
Then just listen to thew scrollViewDidScroll delegate method and modify the constraints accordingly.
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let contentOffset = scrollView.contentOffset.y
if -contentOffset >= view.frame.height * 0.3 {
//reset the top constraint
topConstraint.constant = 0
//make the imageview bigger by the additional content offset value
imageViewHeightConstraint.constant = -contentOffset
} else {
topConstraint.constant = -(view.frame.height * 0.3 + contentOffset)
}
}
You may need to inverse the signs according to how you've set your own constraints. And probably there's a way to optimize and not modify the constraints that often, but you get the idea.
Please also note that you need to:
imageView.contentMode = .scaleAspectFill
layer.masksToBounds = true
Otherwise the image will be drawn on top of your first tableView cells [dependent on the image size it may come to cover to whole table view] because it is drawn outside its "bounds".