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
Related
For each UIImageView, I want to add the label subview to it.
Here is my class inherited form UIImageView
-(instancetype)initWithFrame:(CGRect)frame
{
if (self=[super initWithFrame:frame]) {
self.categoryLabel=[[UILabel alloc]initWithFrame:CGRectMake(frame.origin.x, frame.origin.y, frame.size.width, 50)];
self.categoryLabel.textAlignment=NSTextAlignmentCenter;
self.categoryLabel.font=[UIFont systemFontOfSize:20];
self.categoryLabel.textColor=[UIColor whiteColor];
[self addSubview:self.categoryLabel];
NSLog(#"%#",self.subviews);
}
return self;
}
-(void)setModel:(HorizontalModel *)model
{
_model=model;
self.categoryLabel.text=self.model.category;
[self sd_setImageWithURL:[NSURL URLWithString:[NSString stringWithFormat:#"XXXXX%#",self.model.imgURL]] placeholderImage:[UIImage imageNamed:#"obama"]];
}
Here is my code in the view controller.
-(void)addImage:(NSNotification *)notification
{
self.HArrayLists=notification.userInfo[#"array"];
for (int i=0; i<[self.HArrayLists count]; i++) {
JTImageView *imageView=[[JTImageView alloc] initWithFrame:CGRectMake(i*310, 0, 300, 200)];
imageView.model=[HorizontalModel restaurantsDetailWithDict: self.HArrayLists[i]];
[self.mediaScrollView addSubview:imageView];
}
self.mediaScrollView.contentSize=CGSizeMake(310*[self.HArrayLists count], 0);
}
It turns out that only the first imageView shows a label, while the rest of the imageViews show only images.
I think the core of your problem is the line:
self.categoryLabel=[[UILabel alloc]initWithFrame:CGRectMake(frame.origin.x, frame.origin.y, frame.size.width, 50)];
You are offsetting the x and y positions of the label by the x and y values of the image. This will place them outside the area of the image and with the image clipping, make them invisible. I think the line should be
self.categoryLabel=[[UILabel alloc]initWithFrame:CGRectMake(0, 0, frame.size.width, 50)];
to place all the labels at the top left corner of each image.
Having said that there are also a number of recommendations I would like to offer.
Firstly make all variable names start with a lowercase. So self.HArrayLists should be self.hArrayLists.
Secondly try and make variable names match their contents. So again looking at self.HArrayLists, perhaps something like self.imageData.
Next I would have done the composition differently. I would have a UIView to which I add both the UILabel and UIImageView instances. Using a parent view like this to layout two sub views often makes life easier.
I would also look into using a UICollectionView and UICollectionViewController rather than a UIScrollView. It will take you a bit of work to get your heads around how collection views work. But you will gain in terms of performance and better layout management.
Finally, study up on constraints. They're an essential part of building modern apps that can easily adapt to different sized screens, rotation and layouts.
You need to set as categoryLabel's frame properly.
self.categoryLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, frame.origin.y, frame.size.width, 50)];
I am having a strange problem here. I have a UIScrollView that is setup in the interface builder. I add content to it via a method called setupScrollView which is as follows :
-(void)setupScrollView {
UIView *content = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.scrollView.frame.size.width*[self.stickers count], self.scrollView.frame.size.height)];
for(int i=0; i<[self.stickers count]; i++){
UIImageView *imageView= [[UIImageView alloc] initWithFrame:CGRectMake(i*self.scrollView.frame.size.width, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height)];
MySticker *sticker = self.stickers[i];
imageView.image=sticker.image;
[content addSubview:imageView];
NSLog(#"scroll view width is %f",self.scrollView.frame.size.width);
NSLog(#"ImageView width is %f", imageView.frame.size.width);
}
self.scrollView.contentSize=CGSizeMake(content.frame.size.width ,content.frame.size.height);
[self.scrollView addSubview:content];
}
Now I call this method in viewDidLayoutSubviews because I need the views to be repositioned first after using the constraints set in the interface builder. This all works fine but my images in the scroll view are slightly distorted with jagged edges, there are sticker/chat images with black outlines so it's quite noticeable. If however I place the [self setupScrollView] in the viewDidLoad method the images won't be distorted and look perfectly clear. Example image:
Have no idea why it is doing this. Could anyone give me some pointers to what I might be doing wrong?
If it works correctly in viewDidLoad try to call setupScrollView method in viewWillLayoutSubviews method.
Also check situation when setupScrollView will be call more than once to avoid adding duplicates.
I have set up a UIScrollView with which I want to display 12 images (only 8 fit on screen) laid out horizontally. In the following image you can see the problem I'm having (which makes my scroll view not scroll), my constraints and the UIScrollView which I have added on storyboard:
I have called the following method on -(void)viewDidLoad, where I "set up"my scrollview (itemList is my scroll view property and itemNames a array with the images'names):
- (void)setupHorizontalScrollView
{
self.itemList.delegate = self;
[self.itemList setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.itemList setBackgroundColor:[UIColor blackColor]];
[self.itemList setCanCancelContentTouches:NO];
self.itemList.indicatorStyle = UIScrollViewIndicatorStyleWhite;
self.itemList.clipsToBounds = NO;
self.itemList.scrollEnabled = YES;
self.itemList.pagingEnabled = NO;
NSInteger tot=0;
CGFloat cx = 0;
for (; ; tot++) {
if (tot==12) {
break;
}
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[self.itemNames objectAtIndex:tot]]];
CGRect rect = imageView.frame;
rect.size.height = 40;
rect.size.width = 40;
rect.origin.x = cx;
rect.origin.y = 0;
imageView.frame = rect;
[self.itemList addSubview:imageView];
cx += imageView.frame.size.width;
}
[self.itemList setContentSize:CGSizeMake(cx, [self.itemList bounds].size.height)];
}
I have added the [self.itemList setTranslatesAutoresizingMaskIntoConstraints:NO]; because I saw this suggestion on other posts, but it doesn't work with or without it. The only way it works is if I uncheck use AutoLayout on the storyboard, but that moves the UIImageViewI use to look as a navigation bar to the bottom of the screen.
I don't know what to do anymore, any help is appreciated :)
Try to set your scrollView's Content size int "viewDidLayoutSubviews" method with keeping the autolayouts set.
-(void)viewDidLayoutSubviews
{
[self.itemList setContentSize:CGSizeMake(required_width, required_height)];
}
Two Solutions:
Create different constraints that can be satisfied simultaneously (you will have to edit). I think the problem is your bottom space and top space constraints are mutually exclusive. please remove one and try again. IF this is difficult for you, try adding another UIView to contain the UIScrollView to help manage your constraints, it might seem odd at first, but sometimes adding another view to contain your view actually makes it simpler at each level.
Turn off Autolayout, and change the autoresize masks of your UIImageView to be what you wish.
Insert: [scrollView setContentSize:CGSizeMake(x,y)]; in the following method:
-(void)viewWillAppear:(BOOL)animated
I'm trying to create an app to display various document formats and have the following code in a ViewController.m file:
- (void)viewDidLoad
{
[super viewDidLoad];
self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 768 , 1024)];
[self.view addSubview:scrollView];
self.webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 768 , 1024)];
[scrollView addSubview:webView];
[webView loadRequest:service.urlRequest];
}
The trouble is, the app is only to be used in portrait mode and one of the Word documents is 1024 wide. I'd like to be able to scroll horizontally to see the whole document but this doesn't work.
I think I need to implement some setting on the scrollview but so far haven't been able to figure out what it is.
I've tried setting the width of both the scrollView and webView widths to 1024 and scrollView.contentSize.width but appear to be barking up the wrong tree.
I've also tired self.scrollView.contentSize = CGSizeMake(1024, 1024); but feel as though I'm just trying various things in an almost random manner to see if one works.
Can anyone tell me how to implement this?
WebView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
I'm in an UIViewController, self.view points to a valid view with a frame of 300x480.
UIView *redView;
UIView *blueView;
//[[self view] setAutoresizingMask:YES]; //WRONG!
[[self view] setAutoresizesSubviews:YES];
[[self view] setClipsToBounds:YES];
redView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
[redView setBackgroundColor:[UIColor redColor]];
[redView setAutoresizingMask:UIViewAutoresizingFlexibleLeftMargin];
[[self view] addSubview:redView];
blueView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
[blueView setBackgroundColor:[UIColor blueColor]];
[blueView setAutoresizingMask:UIViewAutoresizingFlexibleRightMargin];
[[self view] addSubview:blueView];
With this snippet of code i was trying
To align the 200x200 red view to the right margin,
To align the 100x100 blue view to the left margin;
but the result as you can see is far from being what i was expecting...
http://imageshack.us/photo/my-images/27/iossimulatorscreenshoto.png/
I've read every single bit of apple documentation and every google result about the autoresizing mask usage, but i still can't figure out why this is happening.
Can someone please explain to me what is happening?
Thanks in advance.
Keep in mind it's an autoREsizing mask, not an autosizing mask. It doesn't do anything until something changes size.
What you want to do is define your views' frames exactly where you want them to be according to the current size of your parent view, i.e. 300 x 480. So for example
redView = [[UIView alloc] initWithFrame:CGRectMake(100, 0, 200, 200)];
blueView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
You are setting their autoresizing masks correctly as far as the horizontal alignment. If self.view changes size, then redView and blueView will remain locked to the margins.
You should set at least one of flexible top margin, flexible bottom margin, or flexible height. Otherwise the behavior is undefined if the parent view changes height. It's impossible for all three of those parameters to remain fixed within two different heights.
This line of code doesn't make sense:
[[self view] setAutoresizingMask:YES];
It isn't a compiler error because BOOL happens to be castable to UIViewAutoresizing, which is an enum. The effect is that YES = 1 = UIViewAutoresizingFlexibleLeftMargin. Probably not what you wanted. More likely you wanted:
[[self view] setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight];
If you can, you should do all this in Interface Builder. Since it's a WYSIWYG editor, you can SWYG ("see what you get"). You can quickly play around with the options and learn how they work. Much faster than edit - compile - run to see the effects. Even if you can't / won't use Interface Builder for your project, try a sample project with it to learn how autoresizing works. Once you know you can do it in code with less trial and error. But watch out for the gotcha that turning a margin bar on in Interface Builder is equivalent to turning the corresponding FlexibleXYZMargin option off in code.