iOS: Best way to make a UIScrollView with dynamic height? - ios

I'm currently setting up a UIScrollView with the following structure
UIScrollView
--ContentView (UIView)
--ContainerView1 (UIView)
--UILabel1
--UILabel2
--ContainerView2 (UIView)
--UILabel3
--UILabel4
--ContainerView3 (UIView)
--UILabel5
--UILabel6
I've pinned all the four edges for all the elements above and also have defined their height constraints (Storyboard complaints of zero height if I didn't do so).
Now whenever my UILabel receives its text from the server, I call sizeToFit for all the labels. Then I use the lastObject of the containerViews to calculate the supposing new height. Then I call setNeedsLayout. However, nothing changes in my app!
This is the code that I use to calculate the new height and adjust. Perhaps have I programmed it wrong? Sorry my concept on constraints is not strong, may have set the constraints the wrong way too?
- (void) relayoutAllSubViews: (NSArray *) arrayOfContainerViews
{
//Relayout subviews
for (int i = 0; i < [arrayOfContainerViews count]; i++)
{
UIView * indView = [arrayOfContainerViews objectAtIndex:i];
if (indView.hidden == YES)
{
indView.frame = CGRectMake(indView.frame.origin.x, indView.frame.origin.y, indView.frame.size.width, 0);
}
else
{
UIView * lastSubviewInView = [indView.subviews lastObject];
CGFloat subviewEndPos = lastSubviewInView.frame.origin.y + lastSubviewInView.frame.size.height;
if ((subviewEndPos - (indView.frame.origin.y + indView.frame.size.height)) > 0)
{
indView.frame = CGRectMake(indView.frame.origin.x, indView.frame.origin.y, indView.frame.size.width, (subviewEndPos - indView.frame.origin.y));
}
}
}
//Adjust scrollview
UIView * lastView = [self.scrollView.subviews lastObject];
CGFloat newEndPos = lastView.frame.origin.y + lastView.frame.size.height;
self.contentView.bounds = CGRectMake(self.contentView.bounds.origin.x, self.contentView.bounds.origin.y, self.contentView.bounds.size.width, (newEndPos - self.contentView.bounds.origin.y));
self.scrollView.contentSize = self.contentView.bounds.size;
[self.view setNeedsLayout];
}
Need Help!!

//use the below code to set the content size of a scroll view.
float newHeight=0.0f;
for(UIView *subViews in [scrollViewObj subviews])
{
if([subViews isKindOfClass:[UIView class]])
{
newHeight=newHeight+(subViews.frame.origin.x+subViews.frame.size.height);
}
}
NSLog(#"%f",newHeight);
[scrollView setContentSize:CGSizeMake(300, newHeight)];//change the width as you need

//i have added code for dynamically adding the subview heights
float newHeight=0.0f;
for(UIView *subViews in [scrollViewObj subviews])
{
if([subViews isKindOfClass:[UIView class]])
{
if([[subViews subviews] count]>0)
{
float heightOfSubviews=0.0f;
for(UIView *insideSubViews in [subViews subviews])
{
heightOfSubviews=heightOfSubviews+(insideSubViews.frame.origin.y+insideSubViews.frame.size.height);
}
NSLog(#"%f",heightOfSubviews);
[subViews setFrame:CGRectMake(subViews.frame.origin.x, subViews.frame.origin.y, subViews.frame.size.width, heightOfSubviews)];
}
}
}
UIView *viewLastObj=scrollViewObj.subviews.lastObject;
newHeight=viewLastObj.frame.origin.y+viewLastObj.frame.size.height;
NSLog(#"%f",newHeight);
[scrollViewObj setContentSize:CGSizeMake(300, newHeight)];

Related

UIScrollView paging with animation

I have achieved the following using UIScrollView and enabled paging.
I want the centre element of the scrollview to show little bigger than other elements. Need to increase/decrease the font of the text label as the scroll view is scrolling depending on its location.
I tried using transform but hard luck.
Code for adding the label's:
array = [[NSMutableArray alloc] init];
for(int i=0;i<10;i++){
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(x, 0, 150, 50)];
label.text = [NSString stringWithFormat:#"ID - %d",i];
label.textAlignment = UITextAlignmentCenter;
x +=150;
[self.scrollView addSubview:label];
[array addObject:label];
}
[self.scrollView setContentSize:CGSizeMake(x, 50)];
Animation which I performed in ScollViewDidScroll
float position = label.center.x - scrollView.contentOffset.x;
float offset = 2.0 - (fabs(scrollView.center.x - position) * 1.0) / scrollView.center.x;
label.transform = CGAffineTransformIdentity;
label.transform = CGAffineTransformScale(label.transform,offset, offset);
CODE: What I have achieved till now:
https://www.dropbox.com/s/h2q4qvg3n4fi34f/ScrollViewPagingPeeking.zip?dl=0
Don't use scrollview, used UICollectionView and Make collectionView cell bigger as screen size.
And Enable it's paging property than used it's delegate methods.
It's more preferable and efficient way of paging.
It will work using a collection view. Return layout attributes where the transform scale is calculated according to the position. Subclass the UICollectionViewLayout you are using (probably UICollectionViewFlowLayout). To get the resizing based on position to work you should override a few of its methods thusly:
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}
- (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
NSArray *array = [super layoutAttributesForElementsInRect:rect];
for (UICollectionViewLayoutAttributes *attributes in array)
{
[self updateLayoutAttributesForItemAtIndexPath:layoutAttributes];
}
return array;
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewLayoutAttributes *layoutAttributes = [super layoutAttributesForItemAtIndexPath:indexPath];
[self updateLayoutAttributesForItemAtIndexPath:layoutAttributes];
}
- (UICollectionViewLayoutAttributes *)updateLayoutAttributesScaleForPosition:(UICollectionViewLayoutAttributes *)layoutAttributes
{
// NOTE: Your code assigning an updated transform scale based on the cell position here
return layoutAttributes;
}
Probably the main thing you were missing was the override to the shouldInvalidateLayoutForBoundsChange: method

how to get a subview of UIScrollView using a CGPoint

I have a UIScrollView with a number of rectangular subviews lined up, of equal sizes. Then I need to be able to pass a CGPoint to that UIScrollView and I want it to give me the rectangular subview that contains the CGPoint. That's basically hitTest:event, except hitTest:event: doesn't work with UIScrollView once CGPoint goes beyond the UIScrollView bounds and doesn't look into its actual content.
What's everyone been doing about this? How to "hit test" on a UIScrollView content view?
Here's some code to illustrate the problem:
NSArray *rectangles = [self getBeautifulRectangles];
CGFloat rectangleLength;
rectangleLength = 100;
// add some rectangle subviews
for (int i = 0; i < rectangles.count; i++) {
UIView *rectangle = [rectangles objectAtIndex:i];
[rectangle setFrame:CGRectMake(i * rectangleLength, 0, rectangleLength, rectangleLength)];
[_scrollView addSubview:rectangle];
}
[_scrollView setContentSize:CGSizeMake(rectangleLength * rectangles.count, rectangleLength)];
// add scroll view to parent view
UIView *containerView = [[UIView alloc] initWithFrame:CGRectMake(0,0,320, rectangleLength)];
[containerView addSubview:_scrollView];
// compute CGPoint to center of first rectangle
CGPoint number1RectanglePoint = CGPointMake(0 * rectangleLength + 50, 50);
// compute CGPoint to center of fifth rectangle
CGPoint number5RectanglePoint = CGPointMake(4 * rectangleLength + 50, 50);
UIView *firstSubview = [containerView hitTest:number1RectanglePoint withEvent:nil];
UIView *fifthSubview = [containerView hitTest:number5RectanglePoint withEvent:nil];
if (firstSubview) NSLog(#"first rectangle OK");
if (fifthSubview) NSLog(#"fifth rectangle OK");
output: first rectangle OK
You should be able to loop through the scrollview subviews
+(UIView *)touchedViewIn:(UIScrollView *)scrollView atPoint:(CGPoint)touchPoint {
CGPoint actualPoint = CGPointMake(touchPoint.x + scrollView.contentOffset.x, scrollView.contentOffset.y + touchPoint.y);
for (UIView * subView in scrollView.subviews) {
if(CGRectContainsPoint(subView.frame, actualPoint)) {
NSLog(#"THIS IS THE ONE");
return subView;
}
}
//Nothing touched
return nil;
}
I guess you pass the wrong CGPoint coordinate to the hitTest:withEvent: method causing wrong behavior if the scroll view is scrolled.
The coordinate you pass to this method must be in the target views coordinate system. I guess your coordinate is in the UIScrollView's superview's coordinate system.
You can convert the coordinate prior to using it for the hit test using CGPoint hitPoint = [scrollView convertPoint:yourPoint fromView:scrollView.superview].
In your example you let the container view perform the hit testing, but the container can only see & hit the visible portion of the scroll view and thus your hit fails.
In order to hit subviews of the scroll view which are outside of the visible area you have to perform the hit test on the scroll view directly:
UIView *firstSubview = [_scrollView hitTest:number1RectanglePoint withEvent:nil];
UIView *fifthSubview = [_scrollView hitTest:number5RectanglePoint withEvent:nil];

how to show 4 different videos inside UIScrollView

I want to show 4 different animations inside UIScrollView in one time, all of them has 200+ frames, so I think that the best solution to solve this is to show videos. It costs less memory then animations. My videos are ~ 500x300 dimensions, and I want to show them as 250x150. How can I do this ?
this must be the solution of your problem
- (void)layoutScrollImages
{
UIView *view = nil;
NSArray *subviews = [self.scrollView subviews];
// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 0;
for (view in subviews)
{
if ([view isKindOfClass:[UIView class]] && view.tag > 0)
{
CGRect frame = view.frame;
frame.origin = CGPointMake(curXLoc, 0);
view.frame = frame;
curXLoc += (kScrollObjWidth);
}
}
// set the content size so it can be scrollable
//[self.scrollView setContentSize:CGSizeMake((numImages * kScrollObjWidth), [self.scrollView bounds].size.height)];
[self.scrollView setContentSize:CGSizeMake((numImages * kScrollObjWidth), kScrollObjHeight)];
}

UICollectionViewFlowLayout subclass causes cell to disappear

I am trying to offset the center on y axis, of all cells below selected cell. I added a property to CollectionViewFlowLayout subclass, called extendedCell, which marks the cell below which I should offset everything else.
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
NSArray *attributes = [super layoutAttributesForElementsInRect:rect];
if(!self.extendedCell)
{
return attributes;
}
else
{
return [self offsetCells:attributes];
}
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewLayoutAttributes *attribute = [super layoutAttributesForItemAtIndexPath:indexPath];
if(!self.extendedCell)
{
return attribute;
}
else
{
if(![attribute.indexPath isEqual:self.extendedCell] &&
attribute.center.y >= [super layoutAttributesForItemAtIndexPath:self.extendedCell].center.y)
{
CGPoint newCenter = CGPointMake(attribute.center.x,
attribute.center.y + 180.f);
attribute.center = newCenter;
}
return attribute;
}
}
-(NSArray *)offsetCells:(NSArray *)layoutAttributes
{
for(UICollectionViewLayoutAttributes *attribute in layoutAttributes)
{
if(![attribute.indexPath isEqual:self.extendedCell] &&
attribute.center.y >= [super layoutAttributesForItemAtIndexPath:self.extendedCell].center.y)
{
CGPoint newCenter = CGPointMake(attribute.center.x,
attribute.center.y + 180.0f);
attribute.center = newCenter;
}
}
return layoutAttributes;
}
Turns out that something bad happens on the way, as cells at the bottom disappear. I have a feeling that this has something to do with cells being outside UICollectionView content size, but setting the size while generating layout does not help. Any ideas how to fix that disappearance?
OK turns out I found the bug. Seems that overriding -(CGSize)collectionViewContentSize helps. If any cells lie outside the content size of the collection view they simply disappear. As the content size is set for good before any layout attributes calls, and cells are not allowed to be placed outside of it, collection view just gets rid of them. I thought the content size is based upon cells attributes after they've been set, this is not the case.
-(CGSize)collectionViewContentSize
{
if(self.extendedCell)
{
CGSize size = [super collectionViewContentSize];
return CGSizeMake(size.width, size.height + 180);
}
else
{
return [super collectionViewContentSize];
}
}
Solved it by breaking big cells into minor cells an connected them with a view. Very hacky, but iOS7 will hopefully help.
Check if any returned size of cell have one of border size equals 0.
In my case disappear cause was sizeForItem returned {320,0}
Why UICollectionView with UICollectionViewFlowLayout not show cells, but ask for size?
And for correct size view from nib (with used autolayouts) i use:
+ (CGSize)sizeForViewFromNib:(NSString *)nibName width:(CGFloat)width userData:(id)userData {
UIView *view = viewFromNib(nibName, nil);
[view configForUserData:userData];
CGSize size = [view systemLayoutSizeFittingSize:CGSizeMake(width, SOME_MIN_SIZE) withHorizontalFittingPriority:UILayoutPriorityRequired verticalFittingPriority:UILayoutPriorityFittingSizeLevel];
return CGSizeMake(width, size.height);
}

Reordering rotated uitableviewcell

I've got a uitableview that I've rotated 180 degrees but whose cells I've rotated back -180 degrees. The effect is that I am loading my data from the bottom of the table view. This works great. The problem comes when I try to reorder the cells. If I try to drag a cell its movement is inverted and jumps immediately to the top/bottom of the table view, depending on which direction I was dragging.
The easiest way to see this is by starting a new project using the master detail template with core data. In the OIMasterViewConroller.m file place
CGAffineTransform transform = CGAffineTransformMakeRotation(-3.14159);
self.tableView.transform = transform;
in the viewDidLoad method, and place
CGAffineTransform transform = CGAffineTransformMakeRotation(-3.14159);
cell.transform = transform;
in the configureCell method. Finally, change the canMoveRowAtIndexPath to return YES and implement a blank
-(void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)fromIndexPath toIndexPath:(NSIndexPath *)toIndexPath {
}
Run the project and add a few items to the tableview with the + button. Then Click on the edit button and try to reorder.
I believe the problem lies with the cell since removing the rotation on the cell will stop this strange behavior, even though the table is upside down.
I thought about just rotating the text inside the cell, but then the delete buttons are upside down, as well as on the wrong side.
So, I ended up subclassing both the tableview and the cell used in the table view. Here is some of what I've done:
In the tableview subclass I overload the layoutsubviews:
- (void)layoutSubviews
{
[super layoutSubviews];
for (UIView *subview in self.subviews) {
if ([NSStringFromClass([subview class]) isEqualToString:#"UIShadowView"]) {
subview.hidden = YES;
}
}
}
This removes the drop shadow. If you don't the shadow shows at the top of the tableviewcells when they are being reordered.
For the tableviewcell subclass I changed its layoutSubviews like this:
- (void)layoutSubviews
{
[super layoutSubviews];
for (UIView *subview in self.subviews) {
if ([NSStringFromClass([subview class]) isEqualToString:#"UITableViewCellDeleteConfirmationControl"]) {
CGRect newFrame = subview.frame;
newFrame.origin.x = 0;
subview.frame = newFrame;
subview.transform = CGAffineTransformMakeRotation(-M_PI);
}
else if ([NSStringFromClass([subview class]) isEqualToString:#"UITableViewCellEditControl"]) {
CGRect newFrame = subview.frame;
newFrame.origin.x = 320-newFrame.size.width;
subview.frame = newFrame;
subview.transform = CGAffineTransformMakeRotation(-M_PI);
}
else if ([NSStringFromClass([subview class]) isEqualToString:#"UITableViewCellReorderControl"]) {
CGRect newFrame = subview.frame;
newFrame.origin.x = 0;
subview.frame = newFrame;
}else if([NSStringFromClass([subview class]) isEqualToString:#"UIButton"]) {
CGRect newFrame = subview.frame;
newFrame.origin.x = 0;
subview.frame = newFrame;
subview.transform = CGAffineTransformMakeRotation(-M_PI);
}else{
subview.transform = CGAffineTransformMakeRotation(-M_PI);
}
}
}
This rotates and moves all the delete buttons/indicators ect. The important thing to note is that we DO NOT rotate the UITableViewCellReorderControll. Rotating this subview is what makes the reordering messed up.

Resources