DIsplay a view in front of a UITableView with Auto Layout - cocoa-touch

Below is what I am setting up for my view. There is a mask (UIView) with bottom space to superview of 0.
When I am displaying on the simulator (iphone-retina 4) or on a device(iphone 5) ,the mask is disappearing.However, there is no problem with simulator (iphone or iphone 3.5 ) or device(iphone4)
Should 'bottom space to superview = 0' not let the mask off screen ?

The Auto Layout constraints are fine. The mask won't be displaying because the color is [UIColor clearColor], the alpha property is 0.f, the 'hidden' property is set to 'YES', or some other reason such as the view being removed from it's superview parent.

Related

Scrollview vertical only with fixed width in Autolayout

In swift how can I set the width of the scroll view to be the width of the screen size?
I tried setting right leading and trailing bounds, but my aspectscalefill image keeps stretching the entire frame.
I am trying to force the view to be the width of the screen and allow vertical scrolling only.
If you want to make a scroll view with auto layout try this. No code at all so you will have to drag things out of the library to the right of Xcode.
In your view controller drag and place the scroll view size it to whatever you want but it looks like you want to make it the size of the screen. Pin all edges to the edges of the view controller. Pin trailing, leading, top, and bottom.
Now, instead of placing your items in the scroll view, place another view in the scroll view. With this new view you will place all of your items. You will most likely have to move the view up or down to place them all and resize the view. You can then place whatever constraints you want on your items. When all items are in their place, set the frame of the new view back to x = 0 and y = 0.
You will then place constraints as follows. Select the new view and pin to top, bottom, trailing, and leading and then center in container. This will make a constraint that is vertical with some negative number. In the storyboard outline select this constraint and set it to zero.
You will now be able to scroll vertically. Let me know if you have any questions.
I created a single view application, and added a UIScrollView in the storyboard with four constraints (top, left, right, bottom). And I add the following code in the viewDidLoad(). Everything works just fine. My image is only scrolling vertically, but not horizontally. No additional settings are needed.
#IBOutlet weak var scrollView: UIScrollView!
override func viewDidLoad() {
super.viewDidLoad()
// Just as an example, I make a size with same with of the view
// and twice the height of the view.
let size = CGSizeMake(
self.view.frame.size.width,
self.view.frame.size.height * 2);
// Load an image and make a image view
let image = UIImage(named: "im.jpg")!
let imageView = UIImageView(image: image)
imageView.frame = CGRect(
origin: CGPoint(x: 0, y: 0),
size: size);
imageView.contentMode = UIViewContentMode.ScaleToFill;
// Add the image view to scroll view
scrollView.addSubview(imageView)
scrollView.contentSize = size;
}
Your problem i caused by the fact that you add your elements to the scrollView from the storyBoard.
In the storyBoard you need:
1) Add the scrollView, if you need to be in the width of the screen then set it's trailing and leading spaces to superView to 0
2) uncheck the "allow horizontal scrolling" in the attribute inspector
In your code
1) set the scrollView's contentSize to what ever size you want it to be.
1.1) in your code you need to set the size of the contentView like so
scroller.contentSize = CGSizeMake(your width, your height);
This is a very important step, the scrollView will not be able to scroll if you don't set the size. Think about the scrollView as the window and the contentView as the view. If the contentView if the same size as the scrollView then the scrollView can't scroll anywhere (all of the contentView fits into the scrollView) in order to create the scrolling you need to make the contentView bigger then the scrollView itself
2) start adding your elements to the scrollView's contentView by calling
[scroller addSubView:<your view>];
this will add your views to the scrollView's contentView and will be

iOS 7 Navigation Bar and Scroll View are different in storyboard and simulator

I have a navigation controller with navigation bar, not translucent. I added a scroll view to the root view. But when I run the app, it show different from what I saw in StoryBoard. Everything shifted down.
This is what I saw in StoryBoard:
This is in simulator:
Your storyboard should like this
In ios 7 scroll view must be covered to entire screen
You need to put image on top edge
You will output as below
make a full screen UIScrollView, add a full screen Content View to UIScrollView
add a transparent view to top of this Content View: top:0, left: 0, right: 0, equal width with scroll, height: 64(height of status bar & navigation bar)
hook up Transparent View's height constraint (which is 64) to your ViewController Class as a IBOutlet:
design your view as you wish; I will add a button below the navigation bar: top space to transparent view: 8, left: 8, width: 30, height: 30
add code below to your ViewController Class; if the iOS version is iOS7, set Transparent View's Height Constraint to 0(zero), if it is iOS8, do nothing:
- (void) updateViewConstraints {
[super updateViewConstraints];
if ([[[UIDevice currentDevice] systemVersion] floatValue] < 8.0) {
_transparentTopViewYConstraint.constant = 0;
}
}
as a result, all your view's top space is relative to Transparent View, if system version is iOS7, your Transparent View's height will be 0(zero) and your views are move to top, top space will be just 8 for my example, so your views place just below the navigation bar. if system version is iOS8, your Transparent View's height will be 64 and your view's top space will be 8 + 64, so your views place just below the navigation bar again.
please check the following:
is auto layout on? then turn it off
Are you using a simulator of different size? (story board is for 4 inch, while simulator is 3.5 inch) if that so, many things are to set up like turning off autoSizing right and bottom constraints
Hope this helps

Vertical UISlider in iOS with autolayout

As per my iPad app requirement, i've to show the UISlider vertically.
I'm using iOS7 compiler and deployment target is iOS6.
In the story board I added horizontal UISlider of width 600 pixels. I created IBOutlet in my view controller. I didn't set any auto layout constraints. I'm using the below code to rotate and make it vertical.
self.slider.transform = CGAffineTransformMakeRotation(M_PI_2);
After and before rotation I'm printing the frame size of the slider which is correct. But the slider is not looking proper. Its just showing only knob in the center. How can I rotate the UISlider?
I got a vertical slider working with iOS 8 and Xcode 6 with only 3 constraints in the storyboard and one line of code. Here's a cropped screencap of the interface:
There are 3 constraints between the vertical slider and the UIImageView next to it:
vSlider.Center Y = Image View.Center Y
vSlider.Width = Image View.Height
vSlider.Center X = Image View.Trailing + 16
And of course the one line of code is:
self.vSlider.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi / 2))
It's easy to set up these constraints in the storyboard in Xcode 6, but I think it should be simple to write these constraints in code to support iOS 7 or 6.
I got it to work this way:
In viewDidLoad: I added
[self.slider removeConstraints:self.slider.constraints];
[self.slider setTranslatesAutoresizingMaskIntoConstraints:YES];
so that it's called before rotating the slider with
self.slider.transform=CGAffineTransformRotate(self.slider.transform,270.0/180*M_PI);
and there is no need to remove and re-add it to superview.
This is an old topic, but here is a Swift solution with autolayout constraints in storyboard and nothing else.
1/ You need to add rotation to the IBOutlet:
#IBOutlet weak var mySlider: UISlider! {
didSet {
mySlider.transform = CGAffineTransform(rotationAngle: -CGFloat.pi/2)
} // didSet
} // IBOutlet
2/ Define in storyboard the constraints, keeping in mind that the Slider will be rotated around its center.
For instance if you want to locate mySlider on the left side of myView, you need three constraints.
myView.Leading = mySlider.CenterX - 20
mySlider.width = myView.Height (with a multiplier of 0.8 for instance)
mySlider.CenterY = myView.CenterY
mySlider will of course appear horizontal in storyboard, but will have the correct sizing, and the center will be correctly positioned.
Uncheck Auto-Layout on your ViewController, there is no other option under the SDK 7.0 to make it work vertically :(
There are so many possible solutions around about putting UISlider vertical. Here is my summary for iOS7 in XCode5 with autoLayout enabled(defaultly in storyboard):
in viewDidLoad add method
self.slider.transform = CGAffineTransformMakeRotation(M_PI_2);
define your autoLayout constraints about slider explicitly in storyboard as whatever you like
In your viewDidLoad, try:
UIView *superView = self.sizeSlider.superview;
[self.sizeSlider removeFromSuperview];
[self.sizeSlider removeConstraints:self.view.constraints];
self.sizeSlider.translatesAutoresizingMaskIntoConstraints = YES;
self.sizeSlider.transform = CGAffineTransformMakeRotation(M_PI_2);
[superView addSubview:self.sizeSlider];
It does not work with constraints, so the trick is to remove the constraints for your uislider.
You might have to resize it manually by setting its frame property.
You can't use storyboard to build up a UISlider.
Build up UISlider by coding.
slider = [[UISlider alloc] initWithFrame:CGRectMake(640, 150, 600, 400)];
[slider.layer setAnchorPoint:CGPointMake(0.0f, 0.0f)];
slider.transform = CGAffineTransformMakeRotation(M_PI/2);
[self.view addSubview:slider];
Try this :-
self.slider.transform=CGAffineTransformRotate(slideToUnlock.transform,-90.0/180*M_PI);
Try below code to Rotate the UISlider in Vertical Position..
//To rotate the slider in Vertical Position
CGAffineTransform sliderRotation = CGAffineTransformIdentity;
sliderRotation = CGAffineTransformRotate(sliderRotation, -(M_PI / 2));
sliderBrightness.transform=sliderRotation;
For me a two-step process worked best (incorporating some of the previous solutions)
Autolayout step)
I added a vertical view in IB and used autolayout to link it to neighboring views. Then I added a slider in the view and simply hooked it up to the center of the view. Then hooked up the width of the slider to the height of the view. Finally control-dragged the slider outlet to my ViewController code (as slider)
Code step)
Then simply added the to my viewWillAppear (swift-code):
let trans = CGAffineTransformMakeRotation(CGFloat(M_PI_2));
slider.transform = trans;

How to get *actual* frame size for UIScrollView in UINavigationController in iOS 7?

So it appears that the view frame in navigation controllers iOS 7 is defined rather differently (in my opinion, strangely) as compared to iOS 7...
EXAMPLE: Imagine a UIViewController that contains a UIScrollView (self.scrollView) that fills the entirety of self.view and with struts and springs so that it always fills self.view. Now embed that UIViewController in a UINavigationController with the navigation bar kept visible.
In iOS 6, I observe the following:
self.view.frame.origin = (0.0, X) where X = height of status bar (that contains time, signal bars, etc. = 20.0)
self.view.frame.size.height = self.view.bounds.size.height = overall height minus self.navigationController.navigationBar.frame.size.height
self.scrollView.frame.origin = self.scrollView.bounds.origin = (0.0, 0.0)
In iOS 7, I observe the following:
self.view.frame.origin = (0.0, 0.0)
self.view.frame.size.height = self.view.bounds.size.height = overall height (i.e., no reduction in height when embedded in navigation controller)
self.scrollView.bounds.origin = (0.0, -1 * self.navigationController.navigationBar.frame.size.height), but self.scrollView.frame.origin = (0.0, 0.0)
My guess is that this is done so that content can continue underneath the navigation bar so that the navigation bar can display the slightest amount of blur + transparency a la iOS 7.
QUESTION: How can I get the actual size (width x height) of self.scrollView in iOS 7 when it's embedded in a navigation controller, given the observations above, since self.scrollView.bounds.origin == self.scrollView.contentOffset? Do I simply have to write different code for iOS 6 v. iOS 7 and detect which version is running?
I don't really want to assume that the screen is any certain size and hard-code it in, since that seems like bad form...
UPDATE 1: I've uploaded a sketch of what I'm trying to ask. Note that the correct answer in this case is 416.0, which is easy to obtain in iOS 6, but I'm not sure how to obtain it in iOS 7 without resorting to assumptions.
What is happening is the your UITableView is automatically being adjusted so that the content will be visible behind the UINavigationBar on iOS 7. This is done by changing the contentInset property found in UIScrollView. So to get the frame excluding the part behind the nav/status bar, you just need to account for the contentInset.
CGRect frame = self.tableView.frame;
frame.origin.y += self.tableView.contentInset.top
frame.size.height -= self.tableView.contentInset.top;
This code will also work on iOS 6 because self.tableView.contentInset.top will default to 0.
On iOS7, you need to set UIScrollView.contentInset.bottom/top according to UIViewController.bottomLayoutGuide/topLayoutGuide.length.

UItableView Cell Content size for iPad

Hi I face the strange problem.
I have created UITableView for iPad.
When I check the cell width i found it's 320 but for iPad i need 768 and 1024.
The below screen shows the TableView in which the cell shows in Table
When I add scrollBar with following UIScrollView *previewScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, cell.contentView.frame.size.width, 250)];
NSLog(#"cell.contentView.frame.size.widt %f",cell.contentView.frame.size.width);
the scrollbar shows only 320 width(cell.contentView.frame.size.width) area.
what should i do for set the iPad size cell content view
You should use autoResizingFlags correctly. On creation, the cell is only 320px width, but on display it will be larger.
Try this, when creating your scrollview:
previewScrollView.autoresizingFlags = UIViewAutoresizingFlexibleWidth;
This should work, but when you even need more control, you can still use the tableView delegate method: tableView:willDisplayCell:atIndexPath: