I have a scroll view with a couple of views in it. I want the views to be displayed such that the size of the view in the middle of the scrollview is the largest and the size of the other views keep decreasing from the middle to the ends. Also, when the view is scrolled, the views should be resized to follow this behavior. How do I start about with this?
You could try having your view controller adapt the UIScrollViewDelegate protocol and then use the scrollViewDidScrollFunction.
Inside the function you can check the content offset of your scrollview and resize your images accordingly. Something like:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGPoint offset = scrollView.contentOffset;
// In here goes your resizing code
}
Cheers
Related
I have a UITableView within a UIScrollView. It took me quite a lot of work to make it work.
The tableView is 640x350, I use the scroll view to scroll from one end of the cell to the next.
The scroll view is 320x350.
The scroll view's content size is 640x350
I'm running into this problem:
if I set scrollView's minimum zoom scale to 0.5, the tableview's width now fills the screen, but it's height is only half the screen. I would like the tableview to show more rows when I zoom out to 0.5.
First of all I would like to understand if this is the correct behavior, or the result of my tableView's content size and frame manipulations. The tableview has all springs and struts set in interface builder and should fill the frame available. This is my first attempt at zooming in months, and I don't remember how it works with zooming.
Can someone help me understand where and what do I need to adjust?
As far as I understand, I need to put the code into scrollViewDidZoom: that will manipulate the tableView's frame and content size.
PS. I"m returning the tableview from the viewForZooming: method of UIScrollView
What you are trying to achieve is pretty hard.
Solution 1 This solution uses the exact setup you have (UITableView inside UIScrollView).
You say that when you set the zoomScale to 0.5, you want your table view to fill the scrollView vertically. At 0.5, your table view must be 640x700 in order to fill the UIScrollView as you wish. For this to happen, on scrollViewDidZoom: you must resize the frame of the table view to 640x700
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
// No matter what the zoomScale is, the tableView will be zoomed accordingly
// Only zoom the height of the table
tableView.frame = CGRectMake(0, 0, 640, 350 / zoomScale);
// Also, update the contentSize
scrollView.contentSize = CGSizeMake(640, 350 / zoomScale);
}
If you run the code above for zoomScale = 0.5 you will get a frame size of 640x700.
This only changes the frame of the table and doesn't change the heights of the cells. This means that as you zoom out, you will also see more cells in the tableview.
Solution 2 Use only UITableView
UITableView is a subclass of UIScrollView. This means it has the ability to zoom and scroll around.
Start with a UITableView with the size that you want on the screen. Then, after the content is loaded modify the contentSize and make it wider than your frame width. This should enable horizontal scrolling.
However, UITableViewCells have their frame set automatically to the width of the tableview frame. You can bypass this by using a custom UITableViewCell, with clipsToBounds=false. Inside it you will insert a UIView with the frame set to the width&height you desire and with no autoresizingMask. When the tableview will resize UITableViewCell frame, this will not affect your inner UIView.
I have been searching for how to make a scroll menu with a UIScrollview wraping (looping).
I checked this question and the example works and maybe it's a good approach.
But instead of showing just one page (image) I need to display 3 pages and being able to scroll one page at time.
So how can I set the UIScrollView page size 1/3 smaller than the frame (I think this way it will work)??
Is it achievable?? If not, please direct me to another direction
Thanks
I believe what you are talking about is having a portion of the previous page and a portion of the next page visible. The way to do this is to set the scroll view's frame to be what you want (less than the screen, for example) and then turn off clipping of subviews for your scroll view. This will achieve the effect you are after.
[theScrollView setFrame:<a frame>]; will set the frame of the scroll view
[theScrollView setContentSize:<a Size>]; to set the content size of your scroll view
The size in 1. should be 1/3 of the size set in 2.
After some time, I end up needing to solve this issue again.
I found a Solution that worked for me.
Check this answer:
Change your scrollView size to the page size you want
Set your scroll.clipsToBounds = NO
Create a UIView subclass (e.g HackClipView) and override the hitTest:withEvent: method
-(UIView *) hitTest:(CGPoint) point withEvent:(UIEvent *)event
{
UIView* child = [super hitTest:point withEvent:event];
if (child == self && self.subviews.count > 0)
{
return self.subviews[0];
}
return child;
}
Set the HackClipView.clipsToBounds = YES
Put your scrollView in this HackClipView (with the total scrolling size you want)
See this answer for more details
Update:
As stated in lucius answer you can now implement the UIScollViewDelegate protocol and use the - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset method. As the targetContentOffset is a pointer. Using this method will not guarantee you the same result with scroll view pages as the user can scroll through many pages at once. But setting the descelerationRate to fast will almost give you the same result
I have a UIScrollView in which vertical only scrolling is enabled. I'm displaying a grid of buttons (similar to the photo viewer image grid). The grid has to be drawn differently based on screen orientation, so that all of the screen real estate is used. Given the size of my buttons, I can fit 3 per row in portrait, and 4 per row in landscape.
I reposition all of the buttons in: willRotateToInterfaceOrientation:duration and then call: setContentSize: on my UIScrollView. Everything seems to work just fine, with the exception of the auto-scrolling that occurs after the call to SetContentSize:. In other words, let's say I was in portrait, and scrolled 3/4 of the way down the list, when I rotate to landscape, it auto-scrolls all the back up to the top.
The interesting thing is, in the same scenario, if I were to do a small flick scroll up or down, and then immediately rotate the device, the scroll view redraws correctly, and retains the current scroll position!
So, to be clear, the culprit here seems to be SetContentSize:, but obviously I have to call that for the scroll view to scroll correctly.
Any ideas on how I can retain the current scroll position?
Thanks!
You might try implementing the UIScrollViewDelegate method scrollViewShouldScrollToTop:, which tells the caller whether to scroll to the top or not. You may have to have some flag in your delegate that indicates if a rotation is underway or not, because under normal conditions you may actually want the ability to tap the status bar and have the scroll view scroll to the top.
If, on the other hand, you don't ever want the scroll view to scroll to the top automaticlly, simply implement that delegate method and have it return NO.
I had this problem, just did this and it works well for me
- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
//calculate percentage down scrollview currently at
float c = self.scrollView.contentOffset.y / self.scrollView.contentSize.height;
//reposition subviews in the scrollview
[self positionThumbnails:toInterfaceOrientation];
//set the new scrollview offset to the same percentage,
// using the new scrollview height to calculate
self.scrollView.contentOffset =
CGPointMake(0, c * self.scrollView.contentSize.height);
}
In my case, I have a scrollview with a fixed width to device size, and variable height
In IB I have my UIView. Then I have a sub-UIView with a UIScrollView as a sub view. Then the UIScrollView has a sub-UIImageView. The UIScrollView and UIImageView are the same size. They're much bigger than the UIView of which they are subviews. I assumed this would make scrolling work. It doesn't. Is some sort of code required for scroll views to work?
You need to set UIScrollView.contentSize to match the total scrollable size, which is your subview frame size in this case.
As mentioned in the accepted answer, you must set the UIScrollView's contentSize property.
This can be done in Interface Builder.
Select the scroll view
Select the 'identity inspect' in Utilities pane on the right
Under 'User Defined Runtime Attributes' click the '+' button
Set the 'Key Path' value to 'contentSize'
Set the 'Type' value to 'Size'
Set the 'Value' value to '{width, height}' (eg: '{320, 600}')
Build and run and your scroll view will scroll.
The content inset does not affect scrolling. See What's the UIScrollView contentInset property for?
To scroll, you have to make the scrollview's frame smaller than its content, the contained image or view.
This might be obvious to most, but I spent ages wondering why my UIScrollView wouldn't scroll so I'm posting what was stopping me in case it helps anyone else:
The UIScrollView has to be of the dimensions of the visible area in which you wish it to be presented and not the size of it's contents.
Ridiculous on my behalf I know, but just in case it helps someone.
I placed all the content of my scrollview in IB. (buttons, labels, text fields, etc). The full size is 500 tall.
I then resized it to 436 tall in IB.
Then in code, I put this is viewDidLoad:
optionsScrollView.contentSize = CGSizeMake(320,500);
So that leaves 64 pixels that I can scroll. It works perfectly.
I also placed "UIScrollViewDelegate" in the <> braces of #interface for my .h file and tied the delegate outlet of the scrollview to File's owner in IB.
I could solve the scrolling problem with the following answer:
https://stackoverflow.com/a/39945124/5056173
By me the trick was:
You now need to set the height of the content UIView. You can then either specify the height of the content view (blech) or use the
height of the controls contained within by making sure the bottom
control is constrained to the bottom of the content view.
I have set the height and width of the view inside the scrollView with center vertical and horizontal alignment and that was the reason, why it did not work!
After deleting this constraints, I need to add equal width (scrollView and the view inside the scrollView) AND I set the height of the view inside the scrollView directly with the content. Which means: The last element in the view must have a bottom constraint to the view!!
The other important thing that I don't see mentioned here is that UIScrollView does not play nicely with AutoLayout. If it seems like you've done everything correctly, check if your ViewController has autolayout turned on and, if so, turn it off.
(Every time you scroll, the views are re-laid-out. Gak!)
So:
Make sure scrollview's contentSize is bigger than its frame.size
Make sure AutoLayout for the ViewController is turned off.
more, did you enable scrolling?
look at the property
#property(nonatomic, getter=isScrollEnabled) BOOL scrollEnabled
Make sure 3 things,
checking scrollView frame & contentView frame, u may find the answer
scrollView.isScrollEnabled = true
contentView of scrollView height didn't constraint with scroll view height
UIScrollView won't scroll!
reason: contentSize is same as (sub) view
should: contentSize is large than (sub) view
-> UIScrollView can scroll
how set UIScrollView contentSize?
two method:
in code
- (void)viewDidLoad {
[super viewDidLoad];
。。。
//[(UIScrollView *)self.view setContentSize:CGSizeMake(375, 1000)];
CGSize curScreenSize = UIScreen.mainScreen.bounds.size;
CGFloat scrollWidth = curScreenSize.width;
CGFloat scrollHeight = curScreenSize.height * 2;
[(UIScrollView *)self.view setContentSize:CGSizeMake(scrollWidth, scrollHeight)];
in UI (Storyboard)
Storyboard-》Identity Inspector-》User Defined Runtime Attributes-》 add new attribute:
contentSize
Type：Size
Value：{375, 1000}
Scroll view works with this:
Frame
then
contentSize
views or objects etc...
If your frame is set to your content size then it won't scroll.
So set your frame ( in IB right panel -> second last tab 'Size Inspector") to the length of your app ( in my case it is 367 as i have a navbar and a tab bar) then programatically set the contentSize to - yup you guessed it ... more than your frame so it can scroll.
Happy days!!
I'm trying to make a timeline view that shows events as UIButtons that can be pressed for more info.
Ideally I want to lay out the buttons on a UIScrollView, and allow them to stretch/shrink horizontally, but not vertically.
What I'm trying to accomplish would basically be equivalent to using pinch gestures to resize the content view, and using a scroll view to move side to side - could you point me in the right direction, or suggest how you might accomplish something like this?
My first thought is a UIScrollView to scale a UIView subview, and have the UIView subview contain another subview that does not resize vertically, but only does horizontally when bounds change, and disable vertical scrolling. Maybe I could skip one of these UIView subviews and have only one do everything. It just feels like I'm trying to hack this together like an HTML page or something with all these containers.
Not sure if I've explained any of this well enough to hope for an answer, any help is appreciated though.
I've implemented horizontal-only scaling by creating a subclass of UIView that simply overrides setTransform and sets the Y scale to 1 whenever the UIScrollView changes the scale:
#interface DiagramStripView : UIView { }
#end
#implementation DiagramStripView
- (void)setTransform:(CGAffineTransform)newValue;
{
newValue.d = 1.0;
[super setTransform:newValue];
}
#end
As the class name suggests, my view holds a series of diagrams that are each one screen wide. When the user lets go, the view controller resets the view's scale to 1 and redraws everything to the new scale:
- (void) scrollViewDidEndZooming:(UIScrollView *)scrollView
withView:(UIView *)view atScale:(float)scale
{
diagramStripView.transform = CGAffineTransformIdentity;
[self redrawDiagrams:scale];
}
Haven't tried this, but you could try placing everything in a UIScrollView, and whenever you detect a zoom level change, adjust all of the child view transforms to CGAffineTransformMakeScale(1.0, 1.0/zoomLevel). This way, the scrollview is zooming everything up, but each subview is scaling themselves vertically downward, canceling out the zoom.
Assuming you don't actually want to stretch/shrink the button text, the easiest way is to resize all the buttons. I know, it's a pain.