I have a UIView that I am placing UIImageView's into, with each UIImageView being 16 pixels wide.
The query is if I add say 5 of the UIImageViews using addSubView, and the UIView is spec'd at 16 tall by 300 wide, is there any way to have the images in the view 'stack up' so to speak, so that the images are not on top of each other? Like adding image tags to a web page.
The easiest way I see of doing this is to keep a running tally of where you last placed an image, then increment by width, something like this:
-(void) addImage:(UIImage*)img toView:(UIView*)view
{
static CGRect curFrame = CGRectMake (0,0,16,16);
UIImageView* imgView = [[UIImageView alloc] initWithFrame:curFrame];
imgView.image = img;
[view addSubview:imgView];
curFrame.origin.x += 16;
}
This will have the images appear within your view from left to right
I think I understand your question correctly. You want all the images to line up in a row correct? You would need to set the frame of the UIImageView's view. The orgin will be where the top left of your image is(x,y coordinates inside the UIView that contains it) - so you would move that over 16 each time you add another image.
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 UIButton backgroundImage that I use to display a weather condition image when the loading is complete. I also create a UIImageView that replaces the UIButton to animate a series of images as a progress indicator.
My question: How can fix this animated UIImageView x-axis misalignment across multiple screen sizes?
Here's what the sequence looks like on 4.7" iPhone, the red box indicates the image I'm talking about:
First, the UIImageView animating as a progress indicator (imagine it spinning, alignment is correct)
Second, the download complete, the progress indicator replaced by a UIButton with a backgroundImage:
Third, the UIImageView animating on 4" iPhone (note misalignment on x-axis):
Fourth, the download complete, UIButton replaces it, aligned correctly:
Here's how the UIImageView *progressIndicator is configured.
Note that conditionButton is the UIButton with backgroundImage of the weather condition:
self.progressIndicator = [[UIImageView alloc] initWithFrame:self.conditionButton.frame];
self.progressIndicator.contentMode = UIViewContentModeCenter;
self.progressIndicator.animationImages = #[...long series of images...];
self.progressIndicator.animationDuration = 0.5f;
[self.conditionButton setBackgroundImage:[UIImage imageNamed:#"empty.png"] forState:UIControlStateNormal];
[self.progressIndicator startAnimating];
[self.view addSubview:self.progressIndicator];
I'm pretty sure the issue is with
self.progressIndicator = [[UIImageView alloc] initWithFrame:self.conditionButton.frame];
But I'm not sure how to resolve this.
The same problem occurs when I switch to 5.5" iPhone. I have no Auto Layout warnings, and the constraints that apply to the conditionButton are:
Align Center X to superview
Width = 94
Height = 94
Bottom and Top space to nearest neighbor = default
Any help would be greatly appreciated!
I am trying to think through this fun "problem".
I have a UIView (288x36) that will hold up to 8 UIImages (36x36).
Any number (up to 8) can be placed in the UIView.
I want the "collection" of these images to be centered in the UIView.
If there is only 1 image, then it's center will be in the center of the UIView. If 2, then the max width of the image will be in the center of the UIView and the 2nd images starting point will also be in the center, etc etc.
Has anyone dealt with this before? Any code examples.
I am not very advanced but trying to learn.
Suppose your UIView is called view and your array of images is imageArray:
float remainingSpace = view.bounds.size.width - imageArray.count*36; //This is the space to remaining
float spaceOnLeft = remainingSpace/2.0; //Just the space to the left of the images
for (UIImage *image in images) {
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(spaceOnLeft, 0, 36, 36)];
imageView.image = image;
[view addSubview:imageView];
spaceOnLeft += 36.0; // so the next image is spaced 36 points to the right
}
new to iOS development. I'll explain the core purpose, the app should display an array of images on a horizontally scrolling view, these images will be loaded from the app documents itself. But the number of images stored in the app may vary from user to user. So,
I want to create a horizontally scrolling view (UIScrollView/UITableView) which can hold UIImage. I want to change the width of the view as more images are read, but increasing the width of a UIScrollView wouldn't add a UIImage placeholder for the new images.
OR
Should I try with UITableView, any help would be much appreciated !
Use UICollectionView instead of UIScrollView.
Check this SO link.
Here using collectView is easy as it has delegate method same as UITableView.
The best way is to start a UIScrollView, add it to your ViewController and write something like this:
self.scrollView.contentSize = CGSizeMake(self.pictures.count * 170 + 10, self.scrollView.frame.size.height);
Where the 170 for me is the width of the image + 10 (like to have some space between them). The +10 afterwards is 10px after my images too (end of the UIScrollView).
Later, to put on those images you can do
for (int x = 0; x < self.pictures.count; x++) {
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"myImage"]];
imageV.frame = CGRectMake(10 + x * 170, 10, 160, 120);
[self.scrollView addSubview:imageV];
}
Replace the imageNamed with your own image name or something like that...
This is only for about max 20 pictures, if you have a lot of pictures then I would suggest using a collection. multiple threads have started about those...
You can use icarousel in ios https://github.com/nicklockwood/iCarousel
There are many types to choose from.
Hope that might help you !!!
I have UIImage like this with place for UITextField at free white space between red lines at left side:
UIImage real borders bigger than visible part because gesture recognizer linked to this image and it needs to be bigger for more comfortable using with gestures.
Text alignment in text field set to right side. So task is to crop image frame from left side depending on entered text length, when keyboard dismissed after entering text. I used this code:
- (BOOL)textFieldShouldReturn:(UITextField *)textField
{
ruleImage.layer.anchorPoint = CGPointMake(1,1);
[ruleImage setFrame:CGRectMake(0, 0, 120 + ruleTextfield.text.length * 15 , ruleImage.frame.size.height)];
}
But this code compressed image horizontally, not cropped, and from left to right. So questions:
how to set anchor point to top (or bottom)right corner?
what property can I use to crop image?
P.S. also I tried
ruleImage.autoresizingMask = UIViewAutoresizingFlexibleRightMargin;
ruleImage.contentMode = UIViewContentModeTopRight;
but this properties not solved my problem.
Try
ruleImage.contentMode = UIViewContentModeScaleAspectFill;