Check if a collectionViewCell is showing more than 50% on collectionView - swift

i got a UICollectionView with (3*3 Grid), so when i scroll up and down, is there a way i can detect if the collection view cell is displaying more than 50% of its height on the screen?
let visibleRect = CGRect(origin: collectionView.contentOffset, size: collectionView.bounds.size)
let visiblePoint = CGPoint(x: visibleRect.minX, y: visibleRect.midY)
let visibleIndexPath = collectionView.indexPathForItem(at: visiblePoint)
I have tried this but it doesn't seems to work. Does anyone has solution for this?

You can ask for
#property(nonatomic) CGPoint contentOffset;
of UIScrollView because UICollectionView's inherits from them.
and don't forget your Cell's have a CALayer that knows the visible Rectangle as well.
CGRect visiblerect = cell.layer.visibleRect;
if (visiblerect.size.height > (cell.frame.size.height * 0.5)) {
// do stuff when cell is more visible then half its size
}

Related

ImageView frame is not changing while scrolling in Xcode 11.0 (11A420a)

I have a UIView on top of another UIView. In that top view I have a UIImageView and on top of that there is a scrollVIew. When scrolling it used to stretch the imageView frame calculating the scroll offset. Now updating to Xcode 11.0 (11A420a) this feature is not working even though nothing has changed. Any suggestion why ? Here is my imageView constraints:
and my scrollViewDidScroll function:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let y = 135 - (self.scrollView.contentOffset.y + 135)
let h = max(120, 160 + y)
let rect = CGRect(x: 0, y: 0, width: view.bounds.width, height: h)
NHBannerImageView.frame = rect
}
As you can see there is a rect variable which value changes depending on scroll but after that image frame is not changing.
I have downloaded the Xcode 10.3 and its working straight away, with the same configuration.
Update your view layout might be solve this problem. Add -
self.view.layoutIfNeeded()
in scrollViewDidScroll

Animating a mask alongside an expanding CollectionViewCell

I am working on a transition during which a collectionView cell expands to reveal new elements.
In order to prevent the new elements from animating with the cell, I removed them from the animated view.
Here is an image of the view hierarchy
After I remove the elements from the animated view, they are also not being clipped by the cell anymore, revealing them before the cell has expanded.
Right now I can decide between the elements animating with the cell or the elements appearing before they should.
Here is a video of the current state of the animation
You can see the new elements appearing on the cell to the left of the selected one.
Below is the code for my animated transitioning:
let destination = transitionContext.viewController(forKey: .to)
let containerView = transitionContext.containerView
containerView.addSubview(destination.view)
// Initial state
let widthConstraint = destination.header.widthAnchor.constraint(equalToConstant: 500)
let heightConstraint = destination.header.heightAnchor.constraint(equalToConstant: 601)
NSLayoutConstraint.activate([widthConstraint, heightConstraint])
let transform = CATransform3DMakeTranslation(cellFrame.origin.x, cellFrame.origin.y, 0.0)
destination.topView.layer.transform = transform
destination.view.layer.zPosition = 999
containerView.layoutIfNeeded()
let animator = UIViewPropertyAnimator(duration: 4, dampingRatio: 10) {
// Final state
NSLayoutConstraint.deactivate([widthConstraint, heightConstraint])
destination.topView.layer.transform = CATransform3DIdentity
destination.view.layoutIfNeeded()
}
I was thinking about masking the new elements based on the frame of the expanding cell but am not sure how I could make that work.
An alternative solution you could do is to transition the labelingView to show only when it should be present. For example, only show your labelingView once you finish your animation transition.
Some psuedo code..
labelingView.alpha = 0
UIView.animate(withDuration: 1, animations: {
// perform transitions
}) { _ in
labelingView.alpha = 1
}
I solved it an it turned out to be easier than expected.
I simply created a mask based on the initial collectionViewCell and animated it to fullscreen alongside the expanding cell.
let mask = UIView()
mask.frame.origin = CGPoint(x: cellFrame.origin.x, y: cellFrame.origin.y)
mask.frame.size = CGSize(width: 500, height: 601)
mask.backgroundColor = .white
mask.alpha = 1
destination.labelingView.mask = mask
// Final mask state
mask.frame.origin = CGPoint(x: 0.0, y: 0.0)
mask.frame.size = CGSize(width: 1366, height: 1024)

Zoom/Scroll through parts of image in a scrollview

I have an image which I divide into pages, such that each page shows a zoomed rectangle of the image. I think I should be able to do that with a UIImageView in a ScrollView, such that next page zooms the view to a given point. However I can't seem to get it to work.
This is the code for loading the image and setting the zoom on the first part (i.e. the first page) into scrollview:
scrollView.isPagingEnabled = true
scrollView.contentSize = CGSize(width: 1280, height: 1920)
scrollView.showsHorizontalScrollIndicator = false
scrollView.delegate = self as UIScrollViewDelegate
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame.origin.x = 0
scrollView.addSubview(imageView)
scrollView.zoom(toPoint: CGPoint(x:800,y:800), scale: 1, animated: false)
The image is obviously much larger than the size of the scrollview, which is 375/309.
I'm probably missing a lot here, or maybe there's a completely different way of achieving this.
the zoom function is borrowed from https://gist.github.com/TimOliver/71be0a8048af4bd86ede.
Thanks,
Z.
It seems like you'll want to set the content offset rather than zooming to a point. Try:
scrollView.contentOffset = CGPoint(x:800,y:800)

UIScrollView in tvOS

I have a view hierarchy similar to the one in the image below (blue is the visible part of the scene):
So I have a UIScrollView with a lot of elements, out of which I am only showing the two button since they are relevant to the question. The first button is visible when the app is run, whereas the other one is positioned outside of the initially visible area. The first button is also the preferredFocusedView.
Now I am changing focus between the two buttons using a UIFocusGuide, and this works (checked it in didUpdateFocusInContext:). However, my scroll view does not scroll down when Button2 gets focused.
The scroll view is pinned to superview and I give it an appropriate content size in viewDidLoad of my view controller.
Any ideas how to get the scroll view to scroll?
Take a look at UIScrollView.panGestureRecognizer.allowedTouchTypes. It is an array of NSNumber with values based on UITouchType or UITouch.TouchType (depending on language version). By default allowedTouchTypes contains 2 values - direct and stylus. It means that your UIScrollView instance will not response to signals from remote control. Add the following line to fix it:
Swift 4
self.scrollView.panGestureRecognizer.allowedTouchTypes = [NSNumber(value: UITouchType.indirect.rawValue)]
Swift 4.2 & 5
self.scrollView.panGestureRecognizer.allowedTouchTypes = [NSNumber(value: UITouch.TouchType.indirect.rawValue)]
Also, don't forget to set a correct contentSize for UIScrollView:
self.scrollView.contentSize = CGSize(width: 1920.0, height: 2000.0)
Finally I solved this by setting scrollView.contentSize to the appropriate size in viewDidLoad.
You need to add pan gesture recognizer. I learned from here: http://www.theappguruz.com/blog/gesture-recognizer-using-swift. I added more code to make it not scrolling strangely, e.g. in horizontal direction.
var currentY : CGFloat = 0 //this saves current Y position
func initializeGestureRecognizer()
{
//For PanGesture Recoginzation
let panGesture: UIPanGestureRecognizer = UIPanGestureRecognizer(target: self, action: Selector("recognizePanGesture:"))
self.scrollView.addGestureRecognizer(panGesture)
}
func recognizePanGesture(sender: UIPanGestureRecognizer)
{
let translate = sender.translationInView(self.view)
var newY = sender.view!.center.y + translate.y
if(newY >= self.view.frame.height - 20) {
newY = sender.view!.center.y //make it not scrolling downwards at the very beginning
}
else if( newY <= 0){
newY = currentY //make it scrolling not too much upwards
}
sender.view!.center = CGPoint(x:sender.view!.center.x,
y:newY)
currentY = newY
sender.setTranslation(CGPointZero, inView: self.view)
}

How to center a subview of UIView

I have a UIView inside a UIViewm and I want the inner UIView to be always centered inside the outer one, without it having to resize the width and height.
I've set the struts and springs so that it's on top/left/right/bottom without setting the resize. But it still doesn't center. Any idea?
You can do this and it will always work:
child.center = [parent convertPoint:parent.center fromView:parent.superview];
And for Swift:
child.center = parent.convert(parent.center, from:parent.superview)
Objective-C
yourSubView.center = CGPointMake(yourView.frame.size.width / 2,
yourView.frame.size.height / 2);
Swift
yourSubView.center = CGPoint(x: yourView.frame.size.width / 2,
y: yourView.frame.size.height / 2)
Before we'll begin, let's just remind that origin point is the Upper Left corner CGPoint of a view.
An important thing to understand about views and parents.
Lets take a look at this simple code, a view controller that adds to it's view a black square:
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
createDummyView()
super.view.backgroundColor = UIColor.cyanColor();
}
func createDummyView(){
var subView = UIView(frame: CGRect(x: 15, y: 50, width: 50 , height: 50));
super.view.addSubview(subView);
view.backgroundColor = UIColor.blackColor()
}
}
This will create this view:
the black rectangle origin and center does fit the same coordinates as it's parent
Now let's try to add subView another SubSubView, and giving subSubview same origin as subView, but make subSubView a child view of subView
We'll add this code:
var subSubView = UIView();
subSubView.frame.origin = subView.frame.origin;
subSubView.frame.size = CGSizeMake(20, 20);
subSubView.backgroundColor = UIColor.purpleColor()
subView.addSubview(subSubView)
And this is the result:
Because of this line:
subSubView.frame.origin = subView.frame.origin;
You expect for the purple rectangle's origin to be same as it's parent (the black rectangle) but it goes under it, and why is that?
Because when you add a view to another view, the subView frame "world" is now it's parent BOUND RECTANGLE, if you have a view that it's origin on the main screen is at coords (15,15) for all it's sub views, the upper left corner will be (0,0)
This is why you need to always refer to a parent by it's bound rectangle, which is the "world" of it's subViews, lets fix this line to:
subSubView.frame.origin = subView.bounds.origin;
And see the magic, the subSubview is now located exactly in it's parent origin:
So, you like "ok I only wanted to center my view by my parents view, what's the big deal?"
well, it isn't big deal, you just need to "translate" the parent Center point which is taken from it's frame to parent's bounds center
by doing this:
subSubView.center = subView.convertPoint(subView.center, fromView: subSubView);
You're actually telling him "take parents view center, and convert it into subSubView world".
And you'll get this result:
I would use:
self.childView.center = CGPointMake(CGRectGetMidX(self.parentView.bounds),
CGRectGetMidY(self.parentView.bounds));
I like to use the CGRect options...
SWIFT 3:
self.childView.center = CGPoint(x: self.parentView.bounds.midX,
y: self.parentView.bounds.midY);
1. If you have autolayout enabled:
Hint: For centering a view on another view with autolayout you can use same code for any two views sharing at least one parent view.
First of all disable child views autoresizing
UIView *view1, *view2;
[childview setTranslatesAutoresizingMaskIntoConstraints:NO];
If you are UIView+Autolayout or Purelayout:
[view1 autoAlignAxis:ALAxisHorizontal toSameAxisOfView:view2];
[view1 autoAlignAxis:ALAxisVertical toSameAxisOfView:view2];
If you are using only UIKit level autolayout methods:
[view1 addConstraints:({
#[ [NSLayoutConstraint
constraintWithItem:view1
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:view2
attribute:NSLayoutAttributeCenterX
multiplier:1.f constant:0.f],
[NSLayoutConstraint
constraintWithItem:view1
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:view2
attribute:NSLayoutAttributeCenterY
multiplier:1.f constant:0.f] ];
})];
2. Without autolayout:
I prefer:
UIView *parentView, *childView;
[childView setFrame:({
CGRect frame = childView.frame;
frame.origin.x = (parentView.frame.size.width - frame.size.width) / 2.0;
frame.origin.y = (parentView.frame.size.height - frame.size.height) / 2.0;
CGRectIntegral(frame);
})];
The easiest way:
child.center = parent.center
You can use
yourView.center = CGPointMake(CGRectGetMidX(superview.bounds), CGRectGetMidY(superview.bounds))
And In Swift 3.0
yourView.center = CGPoint(x: superview.bounds.midX, y: superview.bounds.midY)
Set this autoresizing mask to your inner view.
With IOS9 you can use the layout anchor API.
The code would look like this:
childview.centerXAnchor.constraintEqualToAnchor(parentView.centerXAnchor).active = true
childview.centerYAnchor.constraintEqualToAnchor(parentView.centerYAnchor).active = true
The advantage of this over CGPointMake or CGRect is that with those methods you are setting the center of the view to a constant but with this technique you are setting a relationship between the two views that will hold forever, no matter how the parentview changes.
Just be sure before you do this to do:
self.view.addSubview(parentView)
self.view.addSubView(chidview)
and to set the translatesAutoresizingMaskIntoConstraints for each view to false.
This will prevent crashing and AutoLayout from interfering.
Using the same center in the view and subview is the simplest way of doing it. You can do something like this,
UIView *innerView = ....;
innerView.view.center = self.view.center;
[self.view addSubView:innerView];
Another solution with PureLayout using autoCenterInSuperview.
// ...
UIView *innerView = [UIView newAutoLayoutView];
innerView.backgroundColor = [UIColor greenColor];
[innerView autoSetDimensionsToSize:CGSizeMake(100, 30)];
[outerview addSubview:innerView];
[innerView autoCenterInSuperview];
This is it how it looks like:
In c# or Xamarin.ios, we can use like this
imageView.Center = new CGPoint(tempView.Frame.Size.Width / 2,
tempView.Frame.Size.Height / 2);
This worked for me
childView.centerXAnchor.constraint(equalTo: parentView.centerXAnchor).isActive = true
childView.centerYAnchor.constraint(equalTo: parentView.centerYAnchor).isActive = true
I would use:
child.center = CGPointMake(parent.bounds.height / 2, parent.bounds.width / 2)
This is simple, short, and sweet. If you use #Hejazi's answer above and parent.center is set to anything other than (0,0) your subview will not be centered!
func callAlertView() {
UIView.animate(withDuration: 0, animations: {
let H = self.view.frame.height * 0.4
let W = self.view.frame.width * 0.9
let X = self.view.bounds.midX - (W/2)
let Y = self.view.bounds.midY - (H/2)
self.alertView.frame = CGRect(x:X, y: Y, width: W, height: H)
self.alertView.layer.borderWidth = 1
self.alertView.layer.borderColor = UIColor.red.cgColor
self.alertView.layer.cornerRadius = 16
self.alertView.layer.masksToBounds = true
self.view.addSubview(self.alertView)
})
}// calculation works adjust H and W according to your requirement