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.
Related
I have been working in storyboard and something strange has happened. When I select an image, instead of the image actually highlighting an area above it is highlighted. This is true of all the elements in the View Controller. They are off vertically.
It's possible that in adding and subtracting elements I did something to the top layout but I can't tell what. All the elements are within a scrollview that, in turn, is within a view and the dimensions for both are set to 0,0,320,1000. I am not using auto layout.
The app still builds and runs normally but this makes it difficult to work on this screen in storyboard.
Here is a screenshot of the image and selection showing above it:
Anyone seen this or can suggest what could be causing it?
I am working on a project on Xcode7.3 using swift using autolayout. I am stuck with an problem with the UITableview not displaying properly on the simulator.
I created a ViewController and dragged a TableView into ViewController. Then I dragged a UIView and UIImage ontop of that TableView (To display as a header image). I also dragged a UIImage onto the prototype cell. They are all aligned in the center horizontally and vertically. However, when I run the app, they don't show in the middle of the screen.
As shown in the UITableView_Problem Image, the images are offset to the right. What is also weird is that when I rotate the screen, the scrollbar on the right does not go all the way to the right. The images appears to be in the center of the screen if I consider where the scroll bar is the end of the screen. But that doesnt make sense because the bottom bar items spans the full width of the screen.
However, if I create a UITableViewController from the story board instead of dragging a TableView onto a ViewController, I do not have a problem at all. (Image3)
It is frustrating because I wanted to add a text field for keyboard at the bottom of the screen just like the comment section in Instagram app. And after hours of searching, it appears that the only way to do that is to drag a tableView onto a ViewController. i stack imgur com JC5Pw png
Could anyone please assist? Much appreciated
Blockquote
note: I dont have a developers account yet so I cant check on an actual device
You are designing your interface in the wRegular/hRegular (or universal) size class. You will need to be very good about your constraints or develop a layout for the wCompact/hRegular size class for iPhones in portrait mode. You can change this by selecting here the blue part on the bottom of your storyboard
Thanks Dan for your prompt response! I added constraints to everything except for the tableView. Dont know what I was thinking as I have been troubled by this bug for a few days. Everything works fine after the tableView constraints was set!
I am designing a simple user interface for an app using Xcode and Auto Layout. I have a view controller with three basic outlets: a static image view, a label and a button. You can see it in the picture shown below.
As you can see, I'd like to have the image view horizontally and vertically centered in the view controller, the label just below it and the button somewhere in between the label and the Bottom Layout Guide.
The problem is that I am experiencing some appearance problem with the iPhone 6 I am using for testing. The interface items are not nicely centered as they are supposed to be, as you can see from this screenshot.
I am not asking for the solution to this problem, though. I would rather know whether there are best practices to design a good user interface. For example, is there some way to temporarily hide the label and the button from the view controller to focus only on the debugging of the image view without having to remove and redesign them again?
Select the label you want to hide,then uncheck the checkbox installed
You can simply set its alpha to zero .
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.
I've been searching through here and googling like crazy for a possible solution to this problem. Thus far I'm turning up exactly nothing that actually fixes it so I'm hoping someone can help.
I'm working on the UI for a iPad app. I'm doing it using interface builder. I worked with storyboards briefly but I don't like them all that much so I'm sticking with IB for now. Unfortunately I'm not very experienced with the workings of IOS Ui but it's been going relatively smoothly so far. In my app, I have a view controller, which holds a view containing a pair of sub views. One subview contains a rather windows like header bar (i like the look). The second contains a UITableView. The UITableView is set up properly as far as I can tell, and feeds it's info from a data source using custom UITableViewCells. The UITableView is set to grouped though currently there is only one section. The table is in edit mode by default because I want the user to be able to add new items and use the VC as a selection dialog. The view controller is presented (rather than pushed) using UIModalPresentationFormSheet (again, because I like the view) but I don't know that has any bearing on the problem. The cell border is flush with the X origin, the only reason the text isn't currently starting there is because I went into my cell and move the label over, leaving a gap between the edge of the cell and the label containing my text.
The Offending View http://bit.ly/144cbjT
The Problem: The UITableViewCells, for some reason are positioning themselves at X: 0. This puts them outside the border drawn on the UITablewView when you set it to grouped style. I could probably just turn off the border and get away with it, but I like the look so i want to keep it. I've tried messing around with constraints and anchor points on the cells, the content of the cells, the table itself, the view... I've tried simply moving my cell's labels over a bit. I've also had clipping subviews turned on and off. I've made sure the controls are being loaded properly from the XIB. I've made sure everything is added as a subview where needed. I've made sure I've tried everything I could think of short of setting the cell's X position in code. But since I'm not sure how to tell where the border is, I'd rather have the tableview or the cell do the work itself.
The question: How do I fix this? The selection accessory should be outside the grouping box. The text should be inside, not bleeding out onto the background like it is.I believe the content of the cell should be displayed inside the border within the yellow area.
The odd thing is, this is my fifth or sixth table in this app and I've been doing them all basically the same. Thus far this is the only one I've had trouble with.
Can anyone shed some light as to what's going on?
Thanks in advance
I think that to get this in code, you'd have to do something explicit, so the most likely candidate is a messed up IB file.
Since it doesn't cost anything, I'd just delete the tableView from the IB and then re-add it. If that doesn't work, try recreating the complete IB.
Hope that helps