I'm using a uicollectionview to create a carousel like scroll view. I think the uicollectionview is the best approach with this use case. I was able to render uicollectionviewcell inside uicollectionview but the problems is, when I scroll the uicolectionview the later cells will disappear and all the cells went black in the end. Another issue is that the cell is not loaded until it's boundary is fully inside the Carousel.
this is how I set up my uicollectionviewcell inside cellForItemAtIndexPath delegate method
NSString *urlString = [NSString stringWithFormat:BASE_URL, panoid, heading, pitch];
NSURL *panoUrl = [NSURL URLWithString:urlString];
//WIDTH calculated based on screen size, roughly about three cells per screen.
CGFloat WIDTH = collectionView.frame.size.width / 3;
UIImageView *panoImg = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, 133.3)];
// add padding to imageview
panoImg.bounds = CGRectInset(panoImg.frame, 2, 2);
// do I need GCD to do async process here? the images are all loaded from urls. not sure if this will cause a problem.
dispatch_async(dispatch_get_global_queue(0, 0), ^{
NSData *data = [NSData dataWithContentsOfURL:panoUrl];
dispatch_async(dispatch_get_main_queue(), ^{
[panoImg setImage:[UIImage imageWithData:data]];
});
});
seeInsideCollectionViewCell *cell = [_panoCarousel dequeueReusableCellWithReuseIdentifier:#"panoCarouselCell" forIndexPath:indexPath];
cell.frame = CGRectMake(indexPath.item * WIDTH + 4, 0, WIDTH, 133.3);
cell.backgroundColor = [UIColor blackColor];
[cell addSubview: panoImg];
UILabel *label = [[UILabel alloc] initWithFrame: CGRectMake(4, 4, WIDTH, 15)];
[label setBackgroundColor: [UIColor colorWithRed:0.63 green:0.63 blue:0.63 alpha:0.5]];
[label setFont: [UIFont fontWithName:#"Roboto-Light" size:10.0]];
[label setText: _BussinessViewsNames[indexPath.item]];
[cell addSubview:label];
return cell;
any suggestions, the cells were all loaded, just the loading is not seamless and smooth, I've attached a gif to demonstrate the problem here.
remove this line due to you should not change frame for cell
cell.frame = CGRectMake(indexPath.item * WIDTH + 4, 0, WIDTH, 133.3);
When cell reusable, it already has uiimageview, and you again create new uiimageview and add it than cell will be has several uiimageviews as subview
Move load images in another class or method like
self.imageLoader
-(void)loadImageWithURL:(NSURL *)url successBlock:(void (^)(UIImage *image, id itemId))successBlock failureBlock:(void (^)(NSError *error))failureBlock
and call it in cellForItem method (check id of gotten image)
Related
I have a collectionview that loads a series of cells. Some of the cells will have static images (which works well), but some might have multiple images that will need to be swipeable.
The UICollectionViewCell is the base view, the UIScrollView is within it (pinned to the top, left, bottom, and right of its superview).
Adding a UIImageView to the scrollview, I want to pin it to the top and left of the scrollview, but have its width and height be the same as the collection view cell, not the content size of the scrollview.
Then I'd like two additional images to be pinned to the top of the collection view cell, and the left closest view (in this case, the prior UIImageView).
The Storyboard would look something like this:
(with the other images off-screen and not displayed).
I decided to add the images via code:
There's a parent view, and a scrollview (attached to an IBOutlet).
The CollectionViewCell subclass contains:
#synthesize lbl, sv, pageControl;
- (void) awakeFromNib {
sv.userInteractionEnabled = NO;
sv.delegate = self;
pageControl.userInteractionEnabled = NO;
[self.contentView addGestureRecognizer:sv.panGestureRecognizer];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat pageWidth = sv.frame.size.width;
float fractionalPage = sv.contentOffset.x / pageWidth;
NSInteger page = lround(fractionalPage);
self.pageControl.currentPage = page;
}
Then, within the View Controller's collectionView:cellForItemAtIndexPath method, I manually add images like so:
UIImageView *img = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[myArray objectAtIndex:indexPath.row]]];
img.frame = (CGRect) { 0, 0, cell.frame.size.width, cell.frame.size.height};
[cell.sv addSubview:img];
img = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[myArray objectAtIndex:indexPath.row + 1]]];
img.frame = (CGRect) { cell.frame.size.width, 0, cell.frame.size.width, cell.frame.size.height };
[cell.sv addSubview:img];
img = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[myArray objectAtIndex:indexPath.row + 2]]];
img.frame = (CGRect) { cell.frame.size.width * 2, 0, cell.frame.size.width, cell.frame.size.height };
[cell.sv addSubview:img];
[cell.sv setContentSize:CGSizeMake(cell.frame.size.width * 3.0, cell.frame.size.height)];
I would have preferred a StoryBoard/Interface Builder way of doing this, but for now, this will suffice.
My aim is to display a row of lazy loaded thumbnails (number not known) using a UICollectionView, the user can then scroll the thumbnails horizontally.
I am using the code below to achieve close to what I am after but I am getting an error.
The first 4 thumbnails load okay but as you scroll the thumbnails start to get drawn on top of each other and in random orders.
I am trying to get it so that it achieves the following:
Item 1 ----- Item 2 ----- Item 3 ---- Item 4
I would like it so that the cells are only drawn once similar to what you would get when you use a UITableView. I only want the UICollectionView to reload the data when I call for it.
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:#"cellIdentifier" forIndexPath:indexPath];
UIView *tmpView;
if([self.selectedEffects isEqualToString:#"Effects"]){
int index = indexPath.row;
NSLog(#"%i",index);
tmpView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 70, 90)];
[tmpView setBackgroundColor:[UIColor clearColor]];
UIImageView *imageViewWithEffect = [[UIImageView alloc] initWithFrame:CGRectMake(5, 0, 60, 60)];
imageViewWithEffect.layer.cornerRadius = 10.00;
imageViewWithEffect.clipsToBounds = YES;
UILabel *labelEffect = [[UILabel alloc] initWithFrame:CGRectMake(0, 65, 70, 20)];
[labelEffect setText:[[self.activeEffectsArray objectAtIndex:index] objectAtIndex:1]];
labelEffect.textAlignment = NSTextAlignmentCenter;
labelEffect.textColor = [UIColor whiteColor];
[labelEffect setFont:[UIFont boldSystemFontOfSize:8]];
UIActivityIndicatorView *activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
[activityIndicator setFrame:CGRectMake(0, 0, 60, 60)];
activityIndicator.alpha = 1.0;
[activityIndicator startAnimating];
UIButton *buttonSelect = [UIButton buttonWithType:UIButtonTypeCustom];
[buttonSelect setFrame:CGRectMake(0, 0, 60, 90)];
[buttonSelect setTag:index];
[buttonSelect addTarget:self action:#selector(applyEffects:) forControlEvents:UIControlEventTouchUpInside];
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^{
UIImage *imageWithEffect = [self editImage:[[self.activeEffectsArray objectAtIndex:indexPath.row] objectAtIndex:0] ImageToEdit:self.thumbnailImage];
dispatch_async(dispatch_get_main_queue(), ^{
[imageViewWithEffect setImage:imageWithEffect];
[activityIndicator removeFromSuperview];
});
});
[tmpView addSubview:imageViewWithEffect];
[tmpView addSubview:labelEffect];
[tmpView addSubview:activityIndicator];
[tmpView addSubview:buttonSelect];
}
[cell addSubview:tmpView];
return cell;
}
You are adding subviews to the cell every time. This is incorrect because the cells may have been reused. Check if the subviews have already been created, and modify them if they're already there. You can do this by subclassing UICollectionViewCell, or using viewWithTag: (the former is preferable). There are hundreds of examples of this around so I won't rehash here.
You also are referencing the same views in your dispatch block. This is also incorrect, because the cell may have been reused by the time the block is called. Instead, use the indexPath to get the cell again, and modify it that way.
Finally, you may want to consider rounding the image corners on a background thread instead of using layer.cornerRadius - this approach will cause the image to be blended, which can cause choppy scrolling animations when you display lots of images at once.
I have a problem positioning a textLabel and detailTextLabel into a custom UITableViewCell that has a UIImageView appearing behind the textLabel and detailTextLabel.
Refer to the image - it will make more sense
--> what you're looking a UITableView, where each bubble represents a different UITableViewCell.
Essentially, I am trying to fit the textLabel and detailTextLabel into the bubble you see by expanding the bubble dimensions. However, no matter what I try the bubble will not change it's width and height even if I change the UIImageView frame or bounds or contentMode.
Here is the relevant code in cellForRowAtIndexPath:
//Set font and style
cell.textLabel.backgroundColor = [UIColor clearColor];
cell.detailTextLabel.backgroundColor = [UIColor clearColor];
// Assign our own background image for the cell
UIImage *cellBackgroundImage = [UIImage imageNamed:#"Chat.png"];
UIImageView *cellBackgroundImageView = [[UIImageView alloc] initWithImage:cellBackgroundImage];
//[cellBackgroundImageView setBounds:CGRectMake(0, 0, 20, 20)];
//[cellBackgroundImageView setImage:cellBackgroundImage];
//cellBackgroundImageView.frame = CGRectMake(cellBackgroundImageView.frame.origin.x, cellBackgroundImageView.frame.origin.y, 20, 20);
//cellBackgroundImageView.bounds = CGRectMake(cellBackgroundImageView.frame.origin.x, cellBackgroundImageView.frame.origin.y, 0, 0);
cellBackgroundImageView.contentMode = UIViewContentModeScaleAspectFill;
cellBackgroundImageView.image = cellBackgroundImage;
cell.backgroundView = cellBackgroundImageView;
Any help would be appreciated.
Don't do it here, I did it by writing frame of image and label in LayoutSubviews method in custom cell class.
Just
-(void)layoutSubviews
{ setframe: for both UI components }
Dont use Aspect FIll, use either scaleToFill, or set image to image view using imageCapInsets .
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode
For your Image, it must be like
UIImage *cellBackgroundImage = [[UIImage imageNamed:#"Chat.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(20, 70, 40, 20) resizingMode:UIImageResizingModeStretch]
I have a tableview which renders perfectly in iOS 6 & has done so for years. In iO7 in the same tableview either side of the cell.imageview its adding some extra padding approx 5mm either side of each image shown below thus moving my cell.textLabel.text further to the right. How would I remove this I cant seem to find the answer anywhere to this question?
In iOS7, the UITableViewCell's predefined property imageView is indented towards right by 15pt by default.
And this has nothing to do with the following UITableViewCell properties
indentationLevel
indentationWidth
shouldIndentWhileEditing
separatorInset
Therefore creating your own custom UITableViewCell is the best way to overcome it.
According to Apple, there are 2 good ways to do it:
If you want the cell to have different content components and to have these laid out in different locations, or if you want different behavioral characteristics for the cell, you have two alternatives:
Add subviews to a cell’s content view.
Create a custom subclass of UITableViewCell.
Solution:
As you don't prefer subclassing UITableViewCell, so adding custom subviews is your choice.
Simply creates your own image view and text labels, and add them through code or through storyboard. e.g.
//caution: simplied example
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
//get the cell object
static NSString *CellIdentifier = #"myCell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
//create your own labels and image view object, specify the frame
UILabel *mainLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, 220.0, 15.0)];
[cell.contentView addSubview:mainLabel];
UILabel *secondLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 20.0, 220.0, 25.0)];
[cell.contentView addSubview:secondLabel];
UIImageView *photo = [[UIImageView alloc] initWithFrame:CGRectMake(225.0, 0.0, 80.0, 45.0)];
[cell.contentView addSubview:photo];
//assign content
mainLabel.text = #"myMainTitle";
secondLabel.text = #"mySecondaryTitle";
photo.image = [UIImage imageNamed:#"myImage.png"];
return cell;
}
Note that as the predefined UITableViewCell content properties: cell.textLabel, cell.detailTextLabel and cell.imageView are untouched so they will remind nil and will not be shown.
Reference:
A Closer Look at Table View Cells
https://developer.apple.com/Library/ios/documentation/UserExperience/Conceptual/TableView_iPhone/TableViewCells/TableViewCells.html#//apple_ref/doc/uid/TP40007451-CH7-SW1
Hope this help!
I probably had the same problem, the only thing that workd for me is setting the image frame:
cell.imageView.frame = CGRectMake( 0, 0, 50, 55 );
And if you are subclassing the cell, better to do:
- (void) layoutSubviews
{
[super layoutSubviews];
self.imageView.frame = CGRectMake( 0, 0, 50, 55 );
}
I have a UIScrollView that I would like to use with a UIPageControl to have different pages to swipe horizontally. I need to add a UITextView and a number of UIImageView for every page.
In my ViewController I call a webservice and, when data arrive, I add items as follows:
for(int i=0;i<[arrData count];i++) {
NSString *body=#"Dummy text";
CGRect frame;
frame.origin.x = self.scrollView.frame.size.width * i;
frame.origin.y = 0;
frame.size.width = self.scrollView.frame.size.width;
frame.size.height = 40; //vedere landscape
UILabel *label = [[UILabel alloc] initWithFrame:frame];
[label setText:body];
label.numberOfLines=0;
[label sizeToFit];
label.autoresizingMask=UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.scrollView addSubview:label];
[label setBackgroundColor:[UIColor whiteColor]];
[self.scrollView addSubview:label];
int y_pos=label.frame.size.height+10;
int x_pos=0;
for(int img=0; img<[[[arrData objectAtIndex:i]objectForKey:#"images"] count]; img++) {
NSString *imageURL=[[[[arrData objectAtIndex:i] objectForKey:#"images"] objectAtIndex:img] objectForKey:#"fn"];
NSData *imageData = [NSData dataWithContentsOfURL:[NSURL URLWithString:imageURL]];
UIImage *image = [UIImage imageWithData:imageData];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
[imageView setFrame:CGRectMake(self.scrollView.frame.size.width * i+img*100, y_pos, image.size.width, image.size.height)];
[self.scrollView addSubview:imageView];
}
}
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * [arrData count], self.scrollView.frame.size.height);
It runs fine in portrait, but when the device is rotated, obviously, the layout is ruined ... which is the best way to work with a ScrollView with PageControl? Do I have to handle rotation and change the distance between the inserted items or (as I think) is there a better way to build everything?
yes you have to set your scrollviews frame again every time orientation changes, because flexible width stretches the width of scrollview from both sides in landscape mode,so its contents get overlapped and causes problem when you have horizontal scrolling. one thing you can do is set you scrollview's auto resizing mask to flexibleRightMargin|flexibleLeftMargin. it will keep the contents of your scrollview at the center but scrolling will not look clean.