In the iOS 6 Maps App, when looking at the details for a location, there is a control that acts like a UISegmentedControl. It has 3 "tabs": 'Info', 'Reviews', and 'Photos'.
This control scrolls up and down when the picture is visible, but becomes anchored to the top of the screen and floats when scrolling down more. These pictures may help clarify what I'm trying to state:
Any tips on how I can create this behavior on my own UITableView? The tableview needs to be of the Grouped style, and I need to have multiple sections, so using the Section Header View is out of the question.
make use of the UITableView's tableHeaderView property to add your segmented control.
MapView and TableView should be siblings, and added as a subviews to a scrollView.
The tableView.frame.size.height should be what you see in the image2 (parentViewHeight-navBarHeight)
scrollView.frame.size.height = tableView.frame.size.height
scrollView.contentSize.height = tableView.frame.size.height + mapView.frame.size.height
this should be enough to get the effect you are trying to do. let me know if you have any issues with it.
PS: mapView is just a place holder I assumed for the view you see above the segmented control. you can replace it with any view you want. I am assuming you know how to do the grouped tableView part of these views.
Related
I know this question has been answered before, many times, but my use case seems to be just different enough from all of them that I can't quite figure it out.
My Problem
I have a scroll view that is not the same size as its superview. The scroll view has 1 subview that is the same size as it, but it needs to be able to be pinch-zoomed.
Attempted Tutorials:
(1) - Apple's Technical Note - This is done only with code and the examples show only full screen scroll views.
(2) - Natasha The Robot's Article - This was a really well written article but I could not get it to work for me. I think it's due to the fact that her scroll view is full screen.
(3) - Happy Coding Blog Article - Another full screen scroll view
... and lots other tutorials that were very similar to these
My requirements
My scroll view needs to be full width
My scroll view needs to be 40pt from the top and have a 1:1 aspect ratio
My scroll view needs to have one subview that is the exact same size of it but can be pinch-zoomed (aka content size = scroll view size)
I don't think that the size of the scroll view should impact anything, but it appears to.
What I have tried
As all the tutorials above recommended, I have only a single subview of the scroll view and have aptly named it "Content View".
View Controller
|-View
|-ScrollView
|-ContentView
|-ZoomableView
Here is a picture of my constraints:
As you can see, I have an equal width set up from the "Grid" (Zoomable view) to the view controller's view. I've also tried adding an equal width of the content view and the VC's view.
My question
I know I can get this to work with an explicit width and height, but I know I should be able to get it by setting the width equal to the view's width and height equal to the view's width as well (AKA 1:1 aspect ratio). How can I achieve this?
I think I ran into the same problem in the past. What I end up doing was adding a "container" view and use it to set up my width and height equality constraints instead of the view controller's view.
This setup will produce what you want I think: a scrollview with 1 subview that can be pinch-zoomed in the view controller's view (grey in the screenshot) but with a top margin of 40pt.
I am making aт informative tableview app. I have 3 controllers:
1) Navigation Controller
2) Tableview controller with cells which include different information of different subjects.
3) View controller - which shows different information of EACH cells (big difference in size of information).
How can I use ScrollView, which shows the exact size of the view, depending on the size of the information? Each cell includes information of different sizes.
You can use Auto Layout to have the scroll view automatically resize its contentSize to fit the contents. Let’s say you have a UIImageView and a UITextView. You add them as subviews to your scroll view, and then set up your constraints like this:
#"|[image]|"
#"|[textView]|"
#"V:|[imageView]-[textView]|"
Then set the content compression priority so that the text view doesn’t get squished:
[textView setContentCompressionResistancePriority:UILayoutPriorityRequired
forAxis:UILayoutConstraintAxisVertical];
I haven’t tested this code, but I believe it should work.
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.
I need to create a scrollable composite view on iOS. That is to say, the view will contain at least one image, possibly a button, and some text (that we may wish to format with bold fonts, etc). The amount of data, and particularly the amount of text, is variable, from maybe 4 lines to maybe 100. The data is "variable" to a degree, and in particular the image and text do not come joined at the hip.
This all needs to fit in a "pane" of about 280h x 115w pixels in a portrait-only layout.
A single UITextView doesn't provide the facilities to display an image or format the text.
A UIWebView provides the ability to display the image and formatted text, but the button is a problem (not even sure if it's doable).
A UIScrollView would easily allow the image and button, and then a UIWebView could be embedded in the scroll view for the text, but then scrolling becomes a problem -- I'd like the entire view to scroll as one, without having to resize the web view to contain it's content, and without the confusion of a scrollable within a scrollable (the doc warns of "unexpected behavior").
(I'm guessing your thoughts at this point are that I want too much.)
So, any suggestions? What's the best way to get close to what I need here?
In iOS5 the UIWebView has a scrollView property, which is a normal UIScrollView. You should be able to add a UIButton as a subview of the scrollView to achieve what you want, although positioning it correctly may be a challenge. Prior to iOS5 you could cycle through the subviews of the UIWebView to find the UIScrollView with isKindOfClass...
I suggest testing with a UIWebView inside your UIScrollView. I don't see any interference in the iOS 5.0 simulator. I don't know if there are problems in iOS 4.0.
If you find that there is interference, you can prevent it by setting the web view's userInteractionEnabled property to NO, either in the nib or in code. This will prevent the web view from receiving any touches, so the user also won't be able to pinch-zoom it, follow links in it, or copy text from it.
In the web view's delegate, implement webViewDidFinishLoad: to set the web view's size and the scroll view's contentSize. For example:
- (void)webViewDidFinishLoad:(UIWebView *)webView {
CGRect frame = self.webView.frame;
frame.size = [self.webView sizeThatFits:CGSizeMake(frame.size.width, HUGE_VALF)];
self.webView.frame = frame;
self.scrollView.contentSize = CGSizeMake(CGRectGetMaxX(frame), CGRectGetMaxY(frame));
}
When I did a similar thing, I had a dozen of views which I added to the UIScrollView and then calculated the frames of all the views. Granted, it was an extremely tedious work, given that some views could get hidden under various conditions. The layout code was actually pretty simple, laying out views from top to bottom, but ugly. The upshot is that it works like a charm, fast and reliably. You can even trivially wrap it in an animation block.