I'm trying to create UITableView with vertical gridlines, using method described here: http://www.iphonedevx.com/?p=153 . Everything works fine, until I switch table style to grouped.
Vertical lines just don't appear on the table, though overridden drawRect: is still called.
What am I doing wrong? Is there some major difference between cells for grouped and plain UITableView? Is it possible at all to draw primitives on the cells for grouped tables?
Thanks in advance.
PS: I'm using XCode 4, iOS SDK 4.3 and running the project with iPhone 4.3 simulator.
Just looking for the same. Found this guy's blog. It looks promising. He uses a custom png with the grid to complete the effect.
OK, I've found a solution myself.
I've subclassed UILabel, which represents a single cell in a grid. Override of drawRect: draws path with rounded corners and fills it with desired color. Background color of a label is set to clear color, otherwise no rounded corners for me.
Then I've subclassed a UITableViewCell that adds labels to itself. To simulate margins it adds offsets to labels' frame.origin.x and frame.origin.y.
All this stuff contained in a plain UITableView, but with margins and rounded corners it looks like a grouped one.
Related
Given that using the minimumInteritemSpacing / minimumLineSpacing settings on an iOS collection view creates a space rather than a solid border between cells, how can we style a solid border of consistent width around each cell in a collection view grid with a seperate colour applied as the background to the main collection view (so that after the border of the last cell a different background colour is visible) using these methods?
This is the best example of a solution I have seen so far but it is for objective C only rather than swift 3. The author also outlines the shortcomings of a couple of approaches I have already tried:
UICollectionView custom line separators
As an additional note the grid contains items of varying dimensions as illustrated here:
github.com/Antondomashnev/ADMozaicCollectionViewLayout
Edit - Here is an image of the effect I'm trying to achieve:
Custom CollectionView
It also highlights the problem that whil]1st the blue borders are most easily created using minimumInteritemSpacing / minimumLineSpacing the spaces created (whilst accurate and evenly spaced) just show the colour of the background view beneath the cells so you are left with one solid colour as opposed to the blue and yellow combination shown in the image.
I was able to get the result I wanted by setting a minimumLineSpacing and minimumInterimItemSpacing value of 0 to group the cells together and dynamically adding / removing borders as CALayers using krotov's answer here: UIView bottom border?
Cell in iOS6 has rounded corners, while in iOS7 is a rectangle.
I have been working for more than a year, but the problem has been bothering me, if you can help me, I would be very grateful！
This is the new style, this is how it looks in iOS7+. If you wish to change this, you need to create custom cells that have UIViews inside them that you can modify.
You will need to add spacing on the left / right and will need to manually round the corners of the first / last cells.
However, as I mentioned, this is the new style. You should try find a way to make the new style work in your app rather than forcing it to look like the old iOS
I am in the process of updating an old app from XCode 4.6 to 6.3 and have run into a difference in how my custom table view cells are rendered between iOS 6 and iOS 8 (well the change can be seen in iOS 7 as well).
Here are 2 screen shots from Xcode 4.6/iOS 6.1 simulator:
Here are the equivalent Xcode 6.3/iOS 8.1 simulator:
(As background, the Preferences screen is a grouped UITableView with 3 groups and 1 element per group. The Units screen is a single sectioned UITableView with 3 elements. And the "Note" on the Units image is just a plain view)
The difference I didn't expect (and don't like) is that in iOS 8, the custom table cells have expanded horizontally to cover the entire width of the screen, and have also lost their rounded corners.
I have been looking around to see if/how I can make the iOS 8.1 version look more like the 6.1 version, but so far have failed.
Is it possible to easily get back the layout I want? And if so, where should I be looking to make changes?
One possible approach is to set tableView.backgroundColor and your custom cell's contentView.backgroundColor to clearColor (it can be done via the interface builder as well). Then add a background view to your custom cell. You can give it rounded corners and add space around it.
This is what it looks like at runtime (the blue background belongs to the view behind a tableView):
This is more tricky though when we deal with a group of cells on your right screenshot. There the first cell has to have rounded corners at the top, the last one has to have rounded corners at the bottom, and the middle one shouldn't have rounded corners. I guess, it can be done (you could take indexPath into account when configuring the cell), but it takes a bit more work.
P.S. I'm sorry for the size of images. I don't know how to restrict it.
How can i achieve following in ios 7 ??? I want rounded corners around uitableview for first and last cell only.
It is basically a UItableView that have a rounded corner.
Import quartz Core framework and try to change the corner radius of the tableView itself using tableView.layer.cornerRadius = float value;
iOS 7 does not support rounded corners in grouped tables anymore.
iOS 7 is a major overhaul of the whole GUI. Many things have changed, including the appearance of the UITableViews.
You can try to create a custom cell which draws a rounded rect. You have to identifiy the first and last cell in your TableView and only draw the custom View, Background, whatever for those cells.
How to customize the appearance of the UITableView was also discussed here:
changing corner radius of uitableview grouped in iOS6
Although this link is for iOS 6 the mechanic should be the same in iOS7.
I'm trying to reproduce the design of Twitter UITableView (see image below) :
Did not manage to reproduce it :(
I tried several methods like :
UITableViewController with self.view.layer.borderWidth = 3.0f + shadows + cornerRadius
UITableViewController with Grouped style and corner Radius
UIView with UITableView as a subview and corner radius
Any clue to solve my problem please ?
In advance, thanks a lot for your help.
In my opinion, this seems to be NOT your classic grouped style UITableView.
This could be a UITableView (plain style) that spans across the whole device width, and composed by custom UITableViewCell's. The cells are narrow enough to leave room for the scroll indicators to be shown.
Each UITableViewCell renders a UIImage on the cell's background: each different, depending on position - top, middle, bottom - or content type. The image for the cell background would already contain the shadow pixels. In an experience of mine, using Quartz for shadow, is too processor intensive and slow, iphone 4). In addition, each custom cell could also have its view setOpaque:TRUE for enhanced performance (against the solid colored background).
Each tweet cell may span different lines/heights so you'd probably use [UIColor colorWithPatternImage:[UIImage imageNamed:#"tile.png"]] when setting the background of the cell.
So we end up with no real shadow / processor intensive stuff. Just graphics, color matching and positioning.
This very similar to twitter UI
https://github.com/vicpenap/PrettyKit
I have used a simple trick wherein you use a UIView "Vbg" under UITableView and set the colour of cells and Table to clearcolor. Then increase the height:
Vbg.heightConstraint.constant = number of cells * height of cell.
I had to use this for fixed height cells , so this trick came up my mind and it worked pretty well.