I have a UIViewController which contains a UIImageView, and I put a UIButton on top of the UIImageView.
I am using size classes (width compact, high regular, all iphones portrait).
When I add constraints to the button, it changes positions on different iPhone screens.
I have checked a lot of size class tutorials, but all of them are like putting button in the centre, or adding multiple buttons then evenly spread out.
Do anyone know any tutorial like adding only one button to the screen, and the button remains at the same position according to the background image?
Settings:
settings
Storyboard at design time
TBC
Remove Use Size Classes and Use AutoLayout and then change the view gaps from the column next to attributes inspector
This way you can have constraints and same location on all devices
Related
Im having trouble resizing content inside static cells to fit different iPhone screen sizes.
Looking at the image below you can see that the UIPickerView and Sign In UILabel both did not resize in width.
I've tried adding code to the ViewDidLoad like so
self.signUp.frame = CGRectMake(0,0,self.view.frame.size.width,self.signUp.frame.size.height);to programmatically adjust their sizes but nothing changed.
I also tried adding equal width constraints to make it match the UITableViewCell contentView width and that did nothing as well.
Same issues happens to all UILabels (Membership,Schedule,Method...) and UITextFields (Comments)
This is all occurring in a UITableViewController.
How can I get it to resize?
Apples freeform UIViewController and UITableView are externally useful in this circumstance.
If you design your app in the storyboard, before applying constraints make sure the UIViewController's size is freeform (big square that doesn't match any screen size).
Then add constrains.
When you run the app, the app will resize properly.
Using Autolayout and Interface Builder with the target device being iOS 7 iPhones, how do I create three of these kind of UIButtons that have an image, a divider line and text? The 3 images for each of the buttons all have the same size. The lines and text in one button must line up with the other buttons' line and text (left align the text). Things can't go crazy if the phone is turned to landscape. All buttons are the same constant size.
The buttons are part of a home screen layout which has a logo at the top and so on. When one taps one of the buttons, the app does something.
One thought was to create a button with no text, put a label on top, a thin view for the line on top, and the uiimageview on top. Maybe explicit layout constraints are not even needed? Maybe a containing view is needed for the "button" contents to keep the "button" pieces together?
Image+text can be achieved using UIButton only without adding any autolayout constraints. You set both image and text using -setImage:forState and -setTitle:forState:, and then adjust button insets using *Insets properties. To set the insets properly, play with this great test project: https://github.com/jrturton/ButtonInsets (it's not quite clear from the docs how to use them simultaneously, and this test app should give you the idea).
As for the separator, I'd recommend adding it directly to your images.
But if you don't want to stick to the UIButton and its insets, you can subclass UIView, add 2 UIImageViews (the actual image and the separator), a UILabel, and throw in a couple of constraints. To make the view clickable, you attach a UITapGestureRecognizer to it.
Attached 1 is a screenshot from an app called GeniusScan where you can photograph any document and an adjustable rectangular grid shows on the imageview. You can easily adjust the borders of the grid with your fingers to select the portion of the image that you want to scan. It will be then transformed into the correct prospective.
1- How can I draw and interact with the grid on the imageview?
2- How can I return the corner points of the grid to my view controller.
Update: I found a wonderful class called BJImageCropper which allows to use fingers to ajust the borders, but only for a box like rectangle. Can anyone suggest how it can be updated to support shapes like in the GeniusScan app?
Dude:
I created a demo that solves both questions:
1- How can I draw and interact with the grid on the imageview?
By Adding 4 views that will act as interactive control points by adding UIPanGestureRecognizer and then drawing the grid using CAShapeLayer on top of your view.
2- How can I return the corner points of the grid to my view controller.
You must keep references to the four control points of your grid.
Here's the link to my code.
This isn't actually drawing on top of UIImageView. It's actually an overlay (view) on top of the UIImageView. You need to keep track of 4 points (have 4 views as subview of the layer), track their positions, once moved, use drawRect: to draw lines based on the 4 points.
The way I've implemented it in my app is, I overlay the UIImageView with a transparent 'SelectionView' (a custom view that I wrote). The selectionView contains 4 custom subview of class 'Vertex'. The vertex talk back to the selectionView via protocol method every time user touches/moves it (it's actually not important which vertex moved, just that it moved):
- (void)vertexMoved:(Vertex *)vertex;
Then the selectionView knows that it needs to re-draw, so it calls setNeedsDisplay which calls internally calls drawRect (you should never call drawRect) where I do the actual drawing of the bounding rect. Basically, iterate through each vertex and draw a line using Quartz APIs and fill it with semi transparent/hollow color.
This is how I am doing it atleast, I am sure there are other ways.
I wanna do something like THIS in my ipad application, what is the best way to do the followings:
The shadow under the upper bar.
The padding for the papers (top, left, right & bottom)
The background (as a notepad) : please think about the cells: they must still scrolled inside the paper and cropped before reaching to the paper bottom edge.
I'm looking for the optimal solution that avoids overriding as much as possible.
EDIT :
I tried to use UIViewController (with UITableVIew and has the delegate methods) inside UISplitViewController, And I tried adding UIImageView at the top of the table but this view will scroll with the cells and it'll hide when I scroll down. I tried to use viewForHeaderInSection function also for upper shadow (under the bar) but what about the papers bottom edge (what if I put one image including the shadow and the papers bottom edge and has the padding as a background for the UITableView or UITableViewController, and change this image when rotate to the portrait orientation? is this a good and possible solution?)
My guess:
Create the background in an image editing app
Cut 4 images, for header, footer, left and right sides
Create a UIViewController with 4 UIVIews and add the correct images as background
In the middle of all 4 add a UITableView
This way the images won't move and if you position the UIViews with the background properly, your TableView will scroll inside the notebook (assuming you are trying to create a notebook)
If you app is iOS 6.0 only, autolayout will be a great help. Check apple developer video on it to learn how to use this feature: WWDC 2012 Session 232 - Auto Layout by Example
One easy way to do this is from the xib:
1. In xib create image .On image view you can put background whatever you want as a image.
2. create table view above the image view and set table view background color as a clear color.
This will do it.
I am working on an iphone application on XCode 4.3 using storyboard.
I have created a view and I need it to be divided in two parts. the top part will contain a UIImageView and the bottom part a UItableView.
So I added both to the view using the storyboard interface builder, and set the sizes and positions of the UIImageView and the UITableView.
However when I run the application, the UITableView will take the entire view (it is being scaled to fill the view). I need it just to stay at the width/height I specified in the IB.
Why does the UITableView take the entire view? and how can I make a view with a UITableView be a small part of the view and not fill it?
I hope I was clear
Thanks a lot for any help
edit:
Screenshot of the storyboard section
the top part has a UIImageView and a "Share" Button
and the bottom part a UITableView
The UITableView is taking the entire view and hidding the rest
Another screenshot requested
I am not using storyboard here, just a xib, but it should matter. This is how you should set it up:
Autoresizing for UITableView:
Autoresizing for UIImageView:
Notice the fixed top margin for image view, fixed bottom margin for tableview, and flexible height for both. This will ensure tableview always sticks to the bottom and expands upwards proportionally, and vice versa for image view.
You would want to play around with this settings of your UITableView
I believe the setting is off making it resize. But I might be wrong.
Note: this is a screenshot of my UITableView inside a view controller and it is NOT filling my screen. It may have a different setting in your case. So play around with the values in there.