I wanted to create a simple slideshow of images using an UIScrollView and I noticed that, using the new AutoLayout mode, the operation became way more complicated compared to iOS5. I wasn't able to find any SIMPLE and SHORT example/tutorial for accomplishing it. There was a lot of material about "pure" and "hybrid" approaches,but honestly nothing really worked for me. Maybe the material is not clear enough, maybe I'm not good enough..who knows. Anyway, I thought it could be useful sharing my finding and the consequent snippet of code which is currently doing the job for me. Here we go:
- (void)setupSlideshow {
NSInteger nPhotos = [self.profilePhotos count];
UIScrollView *scrollView;
UIImageView *imageView;
NSDictionary *viewsDictionary;
// Create the scroll view and the image view.
scrollView = self.slideShow;
CGFloat sWidth = scrollView.frame.size.width;
CGFloat sHeight = scrollView.frame.size.height;
UIView *container = [[UIView alloc] initWithFrame:CGRectMake(0, 0, nPhotos * sWidth, sHeight)];
scrollView.pagingEnabled = YES;
CGFloat cx = 0;
for (int i = 0; i < nPhotos; i++) {
imageView = [[UIImageView alloc] init];
// Add an image to the image view.
[imageView setImage:[UIImage imageNamed:self.profilePhotos[i]]];
CGRect imFrame = imageView.frame;
imFrame.origin.x = cx;
imFrame.origin.y = 0;
imFrame.size.width = sWidth;
imFrame.size.height = sHeight;
imageView.frame = imFrame;
[container addSubview:imageView];
cx += sWidth;
}
container.translatesAutoresizingMaskIntoConstraints = NO;
scrollView.translatesAutoresizingMaskIntoConstraints = NO;
[scrollView addSubview:container];
// Set the constraints for the scroll view and the image view.
viewsDictionary = NSDictionaryOfVariableBindings(scrollView, container);
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:#"H:|-0-[container(%f)]-0-|",cx]
options:0
metrics: 0
views:viewsDictionary]];
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-0-[container]-0-|" options:0 metrics: 0 views:viewsDictionary]];
}
The scrollView has been instantiated in the StoryBoard.
As you can notice, I adopted an approach based on a UIView container for the pictures I want to use which has been added to a scrollview. I have then added some constraints using the Visual Constraints Format notation. I tried to match the width of the container to the scroller's one using this:
[NSString stringWithFormat:#"H:|-0-[container(==scrollView)]-0-|"]
but it doesn't work (to be precise it doesn't scroll but sticks to the first image), so I opted for a dynamic approach using a simple string format.
As I said, it does the job, but I'm sure I can make it way more elegant. Besides that, is it possible to fix the problem relative the dynamic width?
I hope to receive some useful feedback, in order to refine this example. I will then setup a GitHub for making it publicly available for all of those who spent 3 days banging their head against a wall...like I did.
Related
I am new to iPhone programming.
Using below code I can able to download and displaying all images form server. But in server I have more than some 1000s of images are there. so Using below code I can able to download and displaying in scrollview as 3*3 thumbnail.
But what I want means first I have to download and display 15 images in scrollview as 3*3 thumbnail.
If I scroll down means i have to show activity indicator then download next form 16 to 30 images, similarly again if I scroll means I want to download and display 31 to 45 images in thumbnail.
I dont want to download all images form server.
Can any tell me please how can I do this.
- (void)viewDidLoad
{
URLs = [[NSMutableArray alloc]init];
for (NSString *path in latestiamge)
{
NSURL *URL = [NSURL URLWithString:path];
if (URL)
{
[URLs addObject:URL];
}
else
{
NSLog(#"'%#' is not a valid URL", path);
}
}
self.imageURLs = URLs;
myScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0.0, 84.0, 320.0, 840.0)];
myScrollView.delegate = self;
myScrollView.contentSize = CGSizeMake(320.0, 840.0);
myScrollView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:myScrollView];
float horizontal = 2.0;
float vertical = 2.0;
for(int i=0; i<[imageURLs count]; i++)
{
if((i%3) == 0 && i!=0)
{
horizontal = 5.0;
vertical = vertical + 100.0 + 5.0;
}
CGRect frame;
frame.size.width=100.0;
frame.size.height=100.0;
frame.origin.x=0;
frame.origin.y=0;
AsyncImageView *imageView = [[AsyncImageView alloc] initWithFrame:frame];
imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.clipsToBounds = YES;
imageView.tag = i;
UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc]
initWithTarget:self
action:#selector(actionHandleTapOnImageView:)];
imageView.userInteractionEnabled = YES;
[imageView addGestureRecognizer:singleTap];
[myScrollView addSubview:imageView];
[myScrollView addSubview:imageView];
horizontal = horizontal + 100.0 + 5.0;
}
[myScrollView setContentSize:CGSizeMake(320.0, vertical + 3900.0)];
[super viewDidLoad];
}
Well there is a good and basic class you can use for downloading and displaying images asynchronously .
SDWebImage
Doing everything yourself as you currently are is more effort than is required and not good for memory management. Consider using a table or collection view to manage the scrolling so you don't have so many views loaded at the same time and so you don't need code for the full layout of everything.
You're already using AsyncImageView, it will work if you add a number of them to the cells you're going to display and configure them as requested by the delegate/dataSource methods.
You should also think about acting as the scroll view delegate and monitoring the scroll completion. If the user has scrolled to the current bottom, you could add a footer view with an activity indicator, start a load of the next page from the server and then reload the view and remove the footer when the new page is downloaded.
From what I can understand from your question, you want to create a image grid with three images in a row. But your approach is wrong...!
Do not use scrollView but use a UITableView. I think you can use UICollectionView if you are targeting iOS 6.0 or above.
Here is what you need to do :
Create custom UITableViewCell with number of images you need in a row. You can make this dynamic too by passing number of grid items you need while creating the cell and creating the and positioning those views in the cell as subviews.
Reuse the cells in the table to populate the grid.
You can cache images for better performance, I would suggest you to use SDWebImage
In cellForRowAtIndexPath you can configure all the gridItems.
Do you need more help...??
So I have seen the many other posts on this, and I think I have tried almost all of them. I don't want this to be a duplicate, but I can't get a solution to my problem. I have a setup like this:
When I get to my Scroll View Controller, I can page over just fine, but I can also move the pictures around vertically. I think it has something to do with the NavigationBar forcing the ScrollView frame down, but still having the frame set to the full screen size. How do I prevent any vertical scrolling on the Scroll View View Controller? My .m is below:
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
self.navigationController.navigationBarHidden = NO;
i = 0;
_PhotoBundle = [[NSBundle mainBundle] pathsForResourcesOfType:#".jpg"inDirectory:#"Dog_Images"];
_PhotoArray = [[NSMutableArray alloc] initWithCapacity:_PhotoBundle.count];
for (NSString* path in _PhotoBundle)
{
[_PhotoArray addObject:[UIImage imageWithContentsOfFile:path]];
}
for (int x = 0; x < _PhotoArray.count; x++)
{
CGRect frame;
frame.origin.x = self.mainScroll.frame.size.width * x;
frame.origin.y = 0;
frame.size = self.mainScroll.frame.size;
UIImage *nextImg = [[UIImage alloc] init];
nextImg = [_PhotoArray objectAtIndex:x];
UIImageView *nextIV = [[UIImageView alloc] initWithFrame:frame];
[nextIV setImage:nextImg];
[self.mainScroll addSubview:nextIV];
//NSLog(#"Pass %d", x);
}
self.mainScroll.contentSize = CGSizeMake(self.mainScroll.frame.size.width * _PhotoArray.count, self.mainScroll.frame.size.height);
}
Thank you very much!!
So I found a post that explained it perfectly:
How to disable just vertical scrolling in a UIScrollView?
When I change my
CGSizeMake(self.mainScroll.frame.size.width * _PhotoArray.count, self.mainScroll.frame.size.height);
to
CGSizeMake(self.mainScroll.frame.size.width * _PhotoArray.count, 1.0);
It makes the contentSize from being larger than the bounds... Something that I have read about, but did not fully understand. I hope this helps someone else who is stuck with this...
UIScrollView scrolls it's content only if it's -contentSize is set bigger than it's frame. So when you are setting self.mainScroll.contentSize it has contentSize.height more that it's frame.
Try reading at least Apple's documentation before using it's classes. It's boring. But salary pays off all the boring stuff.
By the way. You are using UIScrollView incorrectly for your displaying UIImageView objects. Try to watch Apple WWDC sessions (which could be downloaded from iTunes) - there are two or three sessions about how to use just three UIImageView objects to draw an endless UIScrollView paging
Apple's documentation on UIScrollView
Basically, I want to have an app with only one view that has an image on it. I want to be able to swipe left or right and have the first image go out of the view and the second image to come in. The images are the same and I want it to look like they are connected (like scrolling down a rope where the pattern just repeats, but it looks like a constant scroll). I need it to be able to change the image or restart after a series of swipes. I know that I need to turn pagination ON in the UIScrollView, but I am new to iOS and am having trouble.
Ultimately, I want to have the iPhone vibrate every so-and-so swipes (and restart the pattern).
I'm sure that there are a lot of ways to do this (i.e. a TableView) so feel free to just point me in the direction of some references if the answer is tedious to explain.
Thanks!
FOLLOW UP:
I found an Apple example that did very nearly what I wanted to do. I made a lot of adjustments to it, but I'm banging my head against a wall trying to get the images to cycle. Here is what I think is the offending code, but I'm not sure what the solution is, as the ScrollView is functional, it just doesn't reset the center to the current view. Any ideas?
- (void)layoutScrollImages
{
UIImageView *view = nil;
NSArray *subviews = [scrollView1 subviews];
// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 0;
for (view in subviews)
{
if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
{
CGRect frame = view.frame;
frame.origin = CGPointMake(curXLoc, 0);
view.frame = frame;
curXLoc += (kScrollObjWidth);
}
}
// set the content size so it can be scrollable
[scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];
}
I'd just use a UIScrollView. Set the contentWidth to be 3 times the width/height of the view (for 3 pages) and set the contentOffset to be the center 'page' (view.bounds.size.width or view.bounds.size.height depending on whether you're scrolling horizontally/vertically respectively) . You'll need to setup a delegate for the UIScrollView (probably the view controller) and implement - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView. This will be called when the scroll view has finished decelerating. Once it has finished decelerating, reset the contentOffset back to the center view. This should give the impression of an infinite scroll. You can also set a counter to increment in the scrollViewDidEndDecelerating method to increment the counter or initiate the vibration.
You shouldn't need to keep repositioning the images. Just set the images once in the scrollView:
//Horizontal arrangement
UIImage *image = [UIImage imageNamed:#"nameOfImage.png"];
UIImageView *imageView1 = [[UIImageView alloc] initWithImage:image];
UIImageView *imageView2 = [[UIImageView alloc] initWithImage:image];
UIImageView *imageView3 = [[UIImageView alloc] initWithImage:image];
NSArray *imageViews = [NSArray arrayWithObjects:imageView1, imageView2, imageView3];
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
[self.view addSubview: scrollView]; //This code assumes it's in a UIViewController
CGRect cRect = scrollView.bounds;
UIImageView *cView;
for (int i = 0; i < imageViews.count; i++){
cView = [imageViews objectAtIndex:i];
cView.frame = cRect;
[scrollView addSubview:cView];
cRect.origin.x += cRect.size.width;
}
scrollView.contentSize = CGSizeMake(cRect.origin.x, scrollView.bounds.size.height);
scrollView.contentOffset = CGPointMake(scrollView.bounds.size.width, 0); //should be the center page in a 3 page setup
So the images are setup, you don't need to mess with them anymore. Just reset the contentOffset when the scroll views stops (note: you need to make sure you're the delegate of the scroll view or you'll not receive the message when the scroll view stops):
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
scrollView.contentOffset = CGPointMake(scrollView.bounds.size.width, 0);
}
Please forgive any typos. I wrote it out by hand.
Look on cocoacontrols.com for a custom photo album view. As for the vibration, this code snippet vibrates the phone (make sure you link to and #import <AudioToolbox/AudioToolbox.h>):
AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);
UIScrollView in paging mode assumes the pages are located right next to each other, with no gap. However if you open a photo in the Photos app and swipe through photos, you can see that it has some gap between pages. I want these gaps too.
I'm looking for existing solutions if any, or for some more bizarre ideas about implementing the page gaps besides the one I have explained below. Or maybe there's some obvious easy way I am missing?
To be clear: I want the gap to only be visible while scrolling, so I cannot simply inset the page content.
My plan is to try moving the page content from inside scrollViewDidScroll callback, so that (assuming you're scrolling to the right) initially the target page is slightly offset to the right of its page boundaries, and by the time you arrive at the target page it's back at its proper location, and the source page is slightly offset to the left of its boundaries. (Or maybe instead of moving things continuously, I'll be better off shifting the offsets, say, exactly halfway between pages.)
I'm the author of the ScrollingMadness article+example that I've been referring some people to here. I've implemented progammatic zooming, and got in-photo zooming+scrolling working together with inter-photo paging. So I know how to play with UIScrollView, and am looking for the advanced stuff.
Please don't point me at TTScrollView. I've already pointed many people to it myself, but I consider it's feel too far from the native UIScrollView behaviour, and do not want to use it in my projects.
Note that this answer is quite old. The basic concept still works but
you should not be hard coding view sizes in iOS7 and 8. Even if you ignore
that advice, you should not use 480 or 330.
Have you tried making the frame of the UIScrollView slightly larger than the screen (assuming that you want to display your images fullscreen and then arranging your subviews on the same slightly-larger-than-the-screen boundaries.
#define kViewFrameWidth 330; // i.e. more than 320
CGRect scrollFrame;
scrollFrame.origin.x = 0;
scrollFrame.origin.y = 0;
scrollFrame.size.width = kViewFrameWidth;
scrollFrame.size.height = 480;
UIScrollView* myScrollView = [[UIScrollView alloc] initWithFrame:scrollFrame];
myScrollView.bounces = YES;
myScrollView.pagingEnabled = YES;
myScrollView.backgroundColor = [UIColor redColor];
UIImage* leftImage = [UIImage imageNamed:#"ScrollTestImageL.png"];
UIImageView* leftView = [[UIImageView alloc] initWithImage:leftImage];
leftView.backgroundColor = [UIColor whiteColor];
leftView.frame = CGRectMake(0,0,320,480);
UIImage* rightImage = [UIImage imageNamed:#"ScrollTestImageR.png"];
UIImageView* rightView = [[UIImageView alloc] initWithImage:rightImage];
rightView.backgroundColor = [UIColor blackColor];
rightView.frame = CGRectMake(kViewFrameWidth * 2,0,320,480);
UIImage* centerImage = [UIImage imageNamed:#"ScrollTestImageC.png"];
UIImageView* centerView = [[UIImageView alloc] initWithImage:centerImage];
centerView.backgroundColor = [UIColor grayColor];
centerView.frame = CGRectMake(kViewFrameWidth,0,320,480);
[myScrollView addSubview:leftView];
[myScrollView addSubview:rightView];
[myScrollView addSubview:centerView];
[myScrollView setContentSize:CGSizeMake(kViewFrameWidth * 3, 480)];
[myScrollView setContentOffset:CGPointMake(kViewFrameWidth, 0)];
[leftView release];
[rightView release];
[centerView release];
Apologies if this doesn't compile, I tested it in a landscape app and hand edited it back to portrait. I'm sure you get the idea though. It relies on the superview clipping which for a full screen view will always be the case.
So I don't have enough "rep" to post a comment on the answer above. That answer is correct, but there is a BIG issue to be aware of:
If you're using a UIScrollView in a viewController that's part of a UINavigationController, the navigation controller WILL resize the frame of your scrollView.
That is, you have an app that uses a UINavigationController to switch between different views. You push a viewController that has a scrollView and you create this scrollView in the viewController's -init method. You assign it a frame of (0, 0, 340, 480).
Now, go to your viewController's -viewDidAppear method, get the frame of the scrollView you created. You'll find that the width has been reduced to 320 pixels. As such, paging won't work correctly. You'll expect the scrollView to move 340 pixels but it will, instead, move 320.
UINavigationController is a bit notorious for messing with subviews. It moves them and resizes them to accommodate the navigation bar. In short, it's not a team player -- especially in this case. Other places on the web suggest that you not use UINavigationController if you need precise control over your views' size and locations. They suggest that, instead, you create your own navigationController class based on UINavigationBar.
Well that's a ton of work. Fortunately, there's an easier solution: set the frame of the scrollView in your viewController's -viewDidAppear method. At this point, UINavigationController is done messing with the frame, so you can reset it to what it should be and the scrollView will behave properly.
This is relevant for OS 3.0. I have not tested 3.1 or 2.2.1. I've also filed a bug report with Apple suggesting that they modify UINavigationController with a BOOL such as "-shouldAutoarrangeSubviews" so that we can make that class keep its grubby hands off subviews.
Until that comes along, the fix above will give you gaps in a paginated UIScrollView within a UINavigationController.
Apple has released the 2010 WWDC session videos to all members of the iphone developer program. One of the topics discussed is how they created the photos app!!! They build a very similar app step by step and have made all the code available for free.
It does not use private api either. Here is a link to the sample code download. You will probably need to login to gain access.
http://connect.apple.com/cgi-bin/WebObjects/MemberSite.woa/wa/getSoftware?code=y&source=x&bundleID=20645
And, here is a link to the iTunes WWDC page:
http://insideapple.apple.com/redir/cbx-cgi.do?v=2&la=en&lc=&a=kGSol9sgPHP%2BtlWtLp%2BEP%2FnxnZarjWJglPBZRHd3oDbACudP51JNGS8KlsFgxZto9X%2BTsnqSbeUSWX0doe%2Fzv%2FN5XV55%2FomsyfRgFBysOnIVggO%2Fn2p%2BiweDK%2F%2FmsIXj
The way to do this is like you said, a combination of a few things.
If you want a gap of 20px between your images, you need to:
First, expand your scroll view's total width by 20px and move it left by 10px.
Second, when you lay out the xLoc of your images, add 20px for each image so they're spaced 20px apart.
Third, set the initial xLoc of your images to 10px instead of 0px.
Fourth, make sure you set the content size of your scroll view to add 20px for each image. So if you have kNumImages images and each is kScrollObjWidth, then you go like this:
[scrollView setContentSize:CGSizeMake((kNumImages * (kScrollObjWidth+20)), kScrollObjHeight)];
It should work after that!
This is just a hunch, so apologies if completely wrong, but is it possible that the contentSize is just set to slightly wider than the screen width.
The correct information is then rendered within the view to the screen width and UIScrollView takes care of the rest ?
Maybe you want to try UIScrollView's contentInset property?
myScrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 10.0);
I just thought I'd add here for posterity the solution I ended up going with. For a long time I've been using Bryan's solution of adjusting the frame in -viewDidAppear, and this has worked brilliantly. However since iOS introduced multitasking I've been running into a problem where the scroll view frame gets changed when the app resumes from the background. In this case, -viewDidAppear was not being called and I couldn't find a delegate method that would be called at the right time to reverse the change. So I decided to make my scroll view a subview of my View Controller's view, and this seemed to fix the problem. This also has the advantage of not needing to use -viewDidAppear to change the frame - you can do it right after you create the scroll view. My question here has the details, but I'll post them here as well:
CGRect frame = CGRectMake(0, 0, 320, 460);
scrollView = [[UIScrollView alloc] initWithFrame:frame];
// I do some things with frame here
CGRect f = scrollView.frame;
f.size.width += PADDING; // PADDING is defined as 20 elsewhere
scrollView.frame = f;
[self.view addSubview:scrollView];
To avoid messing with UIScrollView's frame, you could subclass UIScrollView and override layoutSubviews to apply an offset to each page.
The idea is based on the following observations:
When zoomScale !=1, the offset is zero when it is at the left / right edge
When zoomScale ==1, the offset is zero when it is at the visible rect centre
Then the following code is derived:
- (void) layoutSubviews
{
[super layoutSubviews];
// Find a reference point to calculate the offset:
CGRect bounds = self.bounds;
CGFloat pageGap = 8.f;
CGSize pageSize = bounds.size;
CGFloat pageWidth = pageSize.width;
CGFloat halfPageWidth = pageWidth / 2.f;
CGFloat scale = self.zoomScale;
CGRect visibleRect = CGRectMake(bounds.origin.x / scale, bounds.origin.y / scale, bounds.size.width / scale, bounds.size.height / scale);
CGFloat totalWidth = [self contentSize].width / scale;
CGFloat scrollWidth = totalWidth - visibleRect.size.width;
CGFloat scrollX = CGRectGetMidX(visibleRect) - visibleRect.size.width / 2.f;
CGFloat scrollPercentage = scrollX / scrollWidth;
CGFloat referencePoint = (totalWidth - pageWidth) * scrollPercentage + halfPageWidth;
// (use your own way to get all visible pages, each page is assumed to be inside a common container)
NSArray * visiblePages = [self visiblePages];
// Layout each visible page:
for (UIView * view in visiblePages)
{
NSInteger pageIndex = [self pageIndexForView:view]; // (use your own way to get the page index)
// make a gap between pages
CGFloat actualPageCenter = pageWidth * pageIndex + halfPageWidth;
CGFloat distanceFromRefPoint = actualPageCenter - referencePoint;
CGFloat numOfPageFromRefPoint = distanceFromRefPoint / pageWidth;
CGFloat offset = numOfPageFromRefPoint * pageGap;
CGFloat pageLeft = actualPageCenter - halfPageWidth + offset;
view.frame = CGRectMake(pageLeft, 0.f, pageSize.width, pageSize.height);
}
}
What is the best way to get round corners on an entire UITableView as seen in Stocks and Spotlight? The grouped style doesn't solve the problem because the round corners scroll away with the cell. I'm trying to clip the view so the corners are always round regardless of scroll position.
I saw another discussion about doing this to a UIImage that suggested masking it with another image. I'm not sure if this would work because I need taps to pass through to the table. This isn't isn't ideal for me because I want the background pattern to show through through the corners.
It's an old question but perhaps you still want to know how to do this.
I reproduced a tableView like in Stocks/Spotlight. The trick is
view.layer.cornerRadius = 10;
For this to work you need to include the QuartzCore into the class that you call that property:
#import <QuartzCore/QuartzCore.h>
I heard that this only works since OS 3.0. But since my application is using core data it wasn't a problem because it was already for OS 3.0 and hight.
I created a custom UIView with a subview with cornerRadius 10 and with
view.backgroundColor = [UIColor clearColor];
Then you have to place an UITableView grouped style in that subview. You need to set the backgroundColor to clearColor and the separatorColor to clearColor. Then you have to position the tableview inside the rounded corner view, this is done by setting the frame size and origin. My loadView class of my custom UIView looks like this:
self.view = [[UIView alloc] init];
self.view.backgroundColor = [UIColor clearColor];
CustomUIViewClass *scherm = [[CustomUIViewClass alloc] init];
CGRect frame;
frame.origin.x = 10;
frame.origin.y = 50;
frame.size.width = 300;
frame.size.height = 380;
scherm.frame = frame;
scherm.clipsToBounds = YES;
scherm.layer.cornerRadius = 10;
[self.view addSubview:scherm];
CustomUITableViewClass *table = [[CustomUITableViewClass alloc] initWithStyle:UITableViewStyleGrouped];
frame.origin.y = -10;
frame.origin.x = -10;
frame.size.width = 320;
frame.size.height = 400;
table.tableView.frame = frame;
[scherm addSubview:table.tableView];
I hope you understand my english, maybe I will write a short blog post about this technique with a sample project, will post the link here when I'm ready.
An easier way to do this is to simply import the QuartzCore framework to your project. #import <QuartzCore/QuartzCore.h> to your tableViewController and just set
myTableView.layer.cornerRadius=5;
This will give you rounded corners without having to add your tableview to a superView or clipping it.
Instead of hacking through the code, here's an easy to mimic the grouped style. This works if all you want is one section.
In Interface Builder:
Set UITableView style to Plain and make the frame with some padding on the left and right, perhaps with x = 10 and width = 300.
Then set the corner radius and color yourself:
#import <QuartzCore/QuartzCore.h>
self.tableView.layer.borderColor = [UIColor colorWithWhite:0.6 alpha:1].CGColor;
self.tableView.layer.borderWidth = 1;
self.tableView.layer.cornerRadius = 4;
Have you tried the "grouped" table view style?
self.tableView.style = UITableViewStyleGrouped;
For further reference, see the Table View Programming Guide. The "About Table Views" chapter has some nice screenshots describing the different styles.
Well, there is alot of approach to solve this problem.
However, in my case, all doesn't work correctly. My table sometimes is smaller than table size.
I will share the way I did. I belive is alot easer and faster than some options above.
Make the first and last item rounded.
Create CAShapeLayer for top(left|right) and bottom(left|right).
shapeTop = [CAShapeLayer layer];
shapeTop.path = [UIBezierPath
bezierPathWithRoundedRect:CGRectMake( 0.0f, 0.0f, 306.0f, 58.0f )
byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
cornerRadii:CGSizeMake( 6.0f, 6.0f )].CGPath;
shapeBottom = [CAShapeLayer layer];
shapeBottom.path = [UIBezierPath
bezierPathWithRoundedRect:CGRectMake( 0.0f, 0.0f, 306.0f, 58.0f )
byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight
cornerRadii:CGSizeMake( 6.0f, 6.0f )].CGPath;
The table need to be backgroud clearColor;
The cells has to be a colored background;
Set the layer.mask of it
UIView* backgroundView = [[UIView alloc] initWithFrame:CGRectZero];
backgroundView.backgroundColor = [UIColor whiteColor];
cell.backgroundView = backgroundView;
Don't forget #import <QuartzCore/QuartzCore.h>
I recently came across this problem and solved it a different way. Thought I'd share the results with everyone.
I created a rectangular UIView with a clear, rounded-corner interior, and then laid that on top of the UITableView. You can find the full description at my programming blog.
It works exactly the way I want.
Below code for Swift version :
let redColor = UIColor.redColor()
self.tableView.layer.borderColor = redColor.colorWithAlphaComponent(0.9).CGColor
self.tableView.layer.borderWidth = 1;
self.tableView.layer.cornerRadius = 4;
Make sure that you have import QuartzCore in import section.
Here is swift extension:
extension UITableView {
public var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
layer.masksToBounds = true
}
}
}
Used by this way
tableView.cornerRadius = 7.5
UITableViewStyleInsetGrouped
A table view where the grouped sections are inset with rounded corners.
example code:
self.tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleInsetGrouped];
looks like:
Settings looking table view sections