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.
Related
I am using xib and it just shows blank square box even I have done designing and added many views.
Please check attached image no matter its huge designing or just 1 - 2 labels it shows the only square box.
but if I run it will woks perfectly in the device.
My Xcode version is 10.2.1.
You can try one of the following options to debug this issue:
Drag the main view to increase its size and give it some background color which can be seen easily(like red).
Try populating the labels with text in the XIB so that they take up some space and expand the views dependent on them.
Give height constraints to all the views to check if they are visible.
I'm new to iOS development and I'm just getting my way around Xcode 6 working with Swift, but I'm hitting small blocks here and there so please understand why question may be very basic.
My issue is I have a background image (UIImageView) which is placed within a View within a ViewController. All I want is to be able to drag and drop other type of objects like buttons or labels on top in the designer section. When I have the designer view I see these buttons and labels visible on top of the UIImageView, but when I run the project in the iPhone simulator all these objects disappear and I just see the background image (UIImageView). Is there something I'm missing here?
Thanks in advance.
You should read auto layout Apple document https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/
Basically its the way you describe position relatively, say you want to align button center on the UIImage, in this case you define 2 constraints vertical align and horizontal align.
I'm trying to use Auto Layout for a custom Table View Cell in my app.
I can't seem to get the constraints quite right.
I layed the labels out in the custom Table View Cell, but the labels are still getting cut off. Any ideas?
Thanks! Will post anything else needed. Tried to show needed info in picture below:
Debugging in Xcode. Somehow what shows in Simulator looks different than in Xcode debug.
Here's the width of my TableView shown:
UPDATE:
The problem here was related to what user matt said in the accepted answer, but I wanted to make the Q&A a bit clearer now that I have it figured out for anyone else that comes across this.
In his initial comment, he mentioned the Xcode View debugging, which was great and I was able to dig into a little bit more. Its called the Assistant Editor: Device Preview, where you are able to see the layout and layers of what is onscreen to see if maybe you have labels overlapping or going offscreen based on the device it is running on. If you want to check multiple device sized, just hit the plus icon in the lower left hand corner of this picture.
This helped me find overlapping layers and sizing issues with the TableView. I was able to see how it looked on each device size.
What also helps here sometimes to use the Pin menu. Sometimes the labels can run off screen because it doesn't know where the constraints of the cell are based on the device size. So your label can run offscreen if the label is based off of a landscape layout but the device is an iPhone 5 and is in Portrait for example. This is the Pin menu:
Hope that makes sense and gives some more color to the problem. Let me know if you have any questions at all, thanks for the help everyone!
The problem is that you are using auto layout but you have not done anything about sizing the table view. The table view here is not your view controller's view; it is a subview. Your view controller's view is automatically sized to the size of the device / window, but its subviews are not automatically resized. So you are ending up with the table view much too wide for the device; the whole table is sticking off into space on the right side.
Use a trailing space from the right side of your labels to the edge of their superview, and set it to greater than instead of equals with a value of ~ 5
Review the constraints of your tableview with the View. Draw cell border, label border and tableview border with different colors to know which elements do not display correctly.
Ex:
#import <QuartzCore/QuartzCore.h>
...
cell.layer.border.width = 1;
cell.layer.border.color = [UIColor blackColor].CGColor;
The thing that worked for me to solve views being clipped was to uncheck "Constrain to margins" in Auto Layout.
After creating a universal app on Xcode 6, I have managed to create a UI collection view which displays 2 cells in the width of an iPhone. However when viewed on iPad, it shows 4 cells with lots of padding around the cells.
How can i change the size of cells on an iPad so that 3 cells are shown with minimal padding. I want to leave the iPhone size alone.
So far i have used the storyboard to set the cell size. I have a added a custom cell size of 158pts by 158pts which works perfectly with iPhones. I cannot find this code in the Objective C code. How can I set an individual different size for iPad.
This is what it looks like on iPhone.
https://www.dropbox.com/s/md1sn4z3k78i5s1/iphone.png
and this is what it currently looks like on iPad. The wrong way.
https://www.dropbox.com/s/0x2n9i8v6gvlfnc/ipad.png
I want to get rid of the Grey padding and increase the cell sizes so there are only 3 cells with the same padding as on the iPhone version.
I am a real beginner so any help is much appreciated.
I am answering my own post as I believe that the only way to do this is to use a standard ViewController and place a UICollectionView on top. This way you can add different UICollectionViews for the different Size Classes on Xcode 6.
At this point you can set different sizes for cells on iPad size classes to iPhones ones.
There maybe an easier way to use a UICollectionViewController but i am unaware of it, please let me know below.
EDIT
I have since found out this can be completed using the UICollectionViewController by using constraints and by increasing the cell when used on iPads by code.
I'm just getting started with iOS development. I am trying to make a custom UITableViewCell for an iPad-only app.
I am using XCode 4.2 and the latest iOS 5 Beta.
When I'm trying to build my interface, I can't place an elements or make any elements wider than about half of the cell size that's displayed. In the screenshot attached, I want to place the "Name" label on the far right side and stretch the progress bar to the far right side as well. However, when I stretch the progress bar out any further, it just gets cut off.
I'm sure I'm missing something...any ideas?
If it is allowing you to stretch the progress bar the entire length and then cuts it off after you release it, then there is probably another object (i.e. custom button, image view, etc) on the right portion of your cell that is higher on the view stack.
Check in the Objects section of Interface Builder to see if that is the case. Then you can adjust accordingly.
I'll like to make a little guess here...does it have to do with the orientation of landscape/portrait? It looks like the cell is landscape but the view is only for portrait...
check every controller with background color property. set the different color for every one. Might be it's overlapped one view over second view.