I am trying to create a header like the one in the App Store. Where when the user drags down, the header stays in place and only the cells scroll down. But when the user drags up, both the header and cells scroll up.
What I have done so far is set my collectionView background view to the image I want to stick to the top and set contentInsets of the collectionView below the image. This way when the user drags down, the image will stay in place. But when the user drags up, my cells go over the image (I want the image to scroll up with the cells). I think I am going about this wrong. Thanks.
UIView *back = [UIView new];
UIImageView *backImage = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 320, 320)];
backImage.image = [UIImage imageWithData:coverData];
[back addSubview:backImage];
self.collectionView.backgroundView = back;
[self.collectionView setContentInset:UIEdgeInsetsMake(300, 0, 0, 0)];
EDIT
I used the tutorial from this question but this does the opposite of what I want, and I am unsure of how to change that code to fit my needs
Ok I got it. If you are using the tutorial posted from the linked question-
Change
origin.y = MIN(
MAX(
contentOffset.y,
(CGRectGetMinY(firstCellAttrs.frame) - headerHeight)
),
(CGRectGetMaxY(lastCellAttrs.frame) - headerHeight)
);
To This
origin.y = MIN(
contentOffset.y,
(CGRectGetMinY(firstCellAttrs.frame) - headerHeight)
);
Related
I am new to UIScrollView, and they are driving me crazy.
I am trying to create a screen that has a title and some descriptive text at the top, and then a scroll view (with paging enabled) in the bottom two thirds of the screen. This scroll view will contain 1-3 images. Ideally, I'd like the first image to appear centered in the initial scroll view window, and then enable the user to view the other images by scrolling/paging horizontally, again ideally with each image centered in its 'page'.
The code below loads the images for 'item' from the Internet, creates a UIImageView for each, and inserts them into the scroll view. According to the frame calculations, I would expect the first image to be up against the left side of the scrollview, and then the other images to the right, with no space between them. But instead, the first image is shifted to the right, about half-way across the screen, and there are equally large spaces between each image.
I have turned off paging to simplify matters, and I have tried experimenting with tweaking the image frame values, trying to understand what's happening, but nothing works as I expect it to.
I am guessing that autolayout is messing with me. Can someone confirm that, and maybe give me some hints on how to get this scrollview under control?
Thanks in advance.
self.imageScrollView.contentSize = CGSizeMake(self.imageScrollView.frame.size.width * (imageFieldNames.count),
self.imageScrollView.frame.size.height);
self.imageScrollView.pagingEnabled = NO;
CGFloat xPos = 0.0;
for (NSString *field in imageFieldNames) {
NSString *name = [self.item valueForKey:field];
if (name.length > 0) {
UIImageView *iv = [[UIImageView alloc] init];
iv.contentMode = UIViewContentModeScaleAspectFit;
[self loadImage:iv withFile:name];
iv.frame = CGRectMake(xPos, 0.0,
self.imageScrollView.frame.size.width,
self.imageScrollView.frame.size.height);
[self.imageScrollView addSubview:iv];
xPos += self.imageScrollView.frame.size.width;
}
}
I have a subview and I have been customizing its size by using the frame property and setting its value to the CGRectMake function's parameter values.
I have slowly but surely been changing the CGRectMake parameters and re-running the app to get the subview to the correct position on the screen but I know there has to be an easier way.
Here is what I am currently doing:
UIImageView *halfView = [[UIImageView alloc]initWithImage:image];
[self.view addSubview:halfView];
halfView.frame = CGRectMake(0, 0, 320, 270);
Is there a way that I can stop having to manually enter those 4 parameters into CGRectMake, and just set it to the top 50% of the screen?
Here is what I want the subview to look like on the iphone's screen:
halfView.frame = CGRectMake(0, 0, 320, self.view.bounds.size.height/2);
you just take the height and divide it by two
You should also probably change 320 to self.view.bounds.size.width
I suggest reading this post to really get a grasp of UIViews and working with them:
UIView frame, bounds and center
i have a Scroll View with paging enabled. and a long width so i can select between my 3 pages. But Every time that i click somewhere on the left or right side it goes back to the middle view. how can i fix it? here's a video sample http://www.youtube.com/watch?v=F1bj7_CBt-g
and this is the code in my viewDidLoad for that paging function.
pageIndex = 0;
self.myScrollView.contentInset = UIEdgeInsetsMake(0, 320, 0, 0);
self.myScrollView.pagingEnabled = YES;
self.myScrollView.clipsToBounds = NO;
[self.myScrollView setContentSize:CGSizeMake(1280, 120)];
thank you for all your help!
Instead of self.myScrollView.contentInset = UIEdgeInsetsMake(0, 320, 0, 0);
Try self.myScrollView.contentInset = UIEdgeInsetsZero;. I suspect it is the problem.
If you want to by default scroll to one page, you can use
[self.myScrollView scrollRectToVisible:([Your rect]) animated:NO];
UIScrollView has a built-in behavior "directionLockEnabled".
When enabled, panning will attempt to lock to either the horizontal or vertical directions. But when the user aggressively attempts to scroll diagonally - it still allows diagonal scrolling.
I'd like to remove the ability to diagonally scroll.
Many thanks in advance.
EDIT:
I've tried putting a UIScrollView inside another (each with dimensions so as to constrain the movement) but the pan recognizers seemed to conflict - only one worked.
I've looked at TTScrollView to see if it could be modified for the job - but it does not seem to be working properly out of the box (freezing after first gesture.)
I've tried adding a second action (listener) to UIScrollView.panGestureRecognizer to call setTranslation:inView with a constrained value. This resulted in erratic jumping.
And several other avenues probably not worth mentioning.
EDIT2:
Odrakir's solution works. Code looks like:
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIImage* image = [UIImage imageNamed:#"Sofia"];
UIImageView* imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = CGRectMake(0, 0, 1024 * 2, 768 * 2);
UIScrollView* scrollView1 = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 1024*2, 768)];
scrollView1.contentSize = CGSizeMake(1024*2, 768*2);
[scrollView1 addSubview:imageView];
UIScrollView* scrollView2 = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 1024, 768)];
scrollView2.contentSize = CGSizeMake(1024*2, 768);
[scrollView2 addSubview:scrollView1];
[self.view addSubview:scrollView2];
}
I never tried that, but I have an app that has a horizontal ScrollView, and inside it there are multiple views, each of them with their own vertical ScrollView.
It's kind of like a magazine, with different articles and each article has a number of pages.
Both ScrollViews work and the user can't scroll diagonally. You can try that.
The display hierarchy is Horizontal ScrollView-> View ->Vertical ScrollView
When I apply a rotation transform to a UITextView and then click inside to begin editing, it appears that the content size is automatically being made wider. The new width of the content view is the width of the rotated view's bounding box. For example, given a text box of width 500 and height 400, and rotated by 30 degrees, the new content width would be:
(500 * cos(30)) + (400 * sin(30)) = 633
Or graphically:
Interestingly, if you are already editing the text view and THEN apply the transform, then it appears that no modification is made to the content size. So it appears that sometime around the start of text editing, the text view looks at its frame property and adjusts the content size based on the frame width. I imagine the solution to this is to tell it to use the bounds property instead, however I don't know where to do this, as I'm not sure exactly where the text view is deciding to modify the content size.
I have googled but can't seem to find any references to using transformed UITextViews. Does anybody have any ideas about this?
EDIT (button action from test project):
- (IBAction)rotateButtonTapped:(id)sender {
if (CGAffineTransformIsIdentity(self.textView.transform)) {
self.textView.transform = CGAffineTransformMakeRotation(30.0 * M_PI / 180.0);
}
else {
self.textView.transform = CGAffineTransformIdentity;
}
NSLog(#"contentsize: %.0f, %.0f", textView.contentSize.width, textView.contentSize.height);
}
I was also stuck with this problem.
The only solution which I found was to create an instance of UIView and add the UITextView as a subview. Then you can rotate the instance of UIView and UITextView will work just fine.
UITextView *myTextView = [[UITextView alloc] init];
[myTextView setFrame:CGRectMake(0, 0, 100, 100)];
UIView *myRotateView = [[UIView alloc] init];
[myRotateView setFrame:CGRectMake(20, 20, 100, 100)];
[myRotateView setBackgroundColor:[UIColor clearColor]];
[myRotateView addSubview:myTextView];
myRotateView.transform = CGAffineTransformMakeRotation(0.8);
[[self view] addSubview:myRotateView];
Have you tried applying the rotation by doing a layer transform rather than a transform on the view?
#import <QuartzCore/QuartzCore.h>
mytextField.layer.transform = CATransform3DMakeRotation (angle, 0, 0, 1);
This might be enough to trick whatever broken logic exists inside the core text field code.