ScrollView for all iPhones simulators - ios

For some reason, I could not find a simple answer and know a couple people from my school who had trouble with this too. I have a UIScrollView, and want let users scroll through it like the way it runs in the simulator for iPhone 7, but when I run it on an iPhone SE, the scroll view is a much longer and the label previously viewable inside the view now is farther down in the view and you have to scroll farther down. Now I can tell you my steps, and then show you some pictures. So I put a scrollview in my view then I put a view on top of the scroll view, but scroll view and view were pinned 0 in all directions. But I set the view height to 700 and control clicked from the view to the parent view and said equal widths. Then set viewcontroller to free form and set the height to 700. Then I added a button and a label just pinned to top right and left for button on and bottom left and right for label (0 to the bottom). This question is to answer a beginners question on what code should he or she implement to have the scrollview resize to each size iPhone. Here's photo of the storyboard.
I do not have any code written in the viewcontroller except for 3 outlets - label, button, and scrollview.
Please tell me what code I need to implement to correct this issue, thank you.

One thing I can suggest you is, Instead of taking a UIScrollView. Take a UITableViewController, and make the UITableView as Static. Now take one cell and add the labels the way you want.
No need to create a Custom Table Cell class, you can directly drag and drop the outlets and action.
Please remove all the Datasource and delegate methods, except the
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
And mention the row height as screen size. Now it will manage as per the device height. Will look approximately same in all the devices.
Thanks.
Feel free to ask if you didn't understand my answer.

Related

Swift collectionView hiding layout guidance

I am looking to create a certain layout with a collection view. Where there are 2 sections to the main viewController, the first being static on the page, and the second being a collectionView which moves over the other when the user scrolls. I want the collectionView to have a limit of how much it cover the static content (it should have a minimum and maximum inset that it can covert). The collectionView has a button which "hangs over" the static section. I have attached some images to describe this further.
I have thought of a few ways to achieve this, the most promising being a collectionView with a top contentInset of the 'max scrolled down' height. This would show the content underneath and allow the collectionView to be scrolled up and cover it. the button which "hangs over" would be a subview of the collectionView and would also show the rounded corners and drop shadow.
Problems:
couldn't continue scrolling the collection view whilst also pinning the header to the top
If anyone has any suggestions of how to go about this, please let me know! Thank you.

Multiline label in UIView vs UITableViewCell

I created a custom UITableViewCell with two labels and a button.
It behaved perfectly as expected, and looked like this:
Later, I realised I needed to use this particular view multiple places, one of which was not in a TableView. Therefore I decided to delete my cell, and create a custom UIView instead - and create an empty custom UITableViewCell only containing this custom view - constrained to 0 in all directions.
With the exact same elements and constraints, the UIView turned out like this when shown in a TableView as a cell:
Everything is identical. NumberOfLines is set to 0, all the constraints are the same.
I also observed something weird, that when I rotated the entire phone to landscape, it turned out like this:
This is exactly how I'd like it to look when in landscape.
If I now turn it back to portrait, suddenly it looks like this:
Now it suddenly looks exactly like I want it to look in portrait.. I just had to flip it to landscape and back to portrait.. Why is that?..
I played around with some variables, among them: preferredMaxLayoutWidth, and found that if I set this value to the size of the screen (minus the 16*2px padding) it looks as expected at first launch in portrait. However, I don't want to set this value. There is no magic number in px that will be right. The whole point of this is to get it fit properly on all screen sizes and orientations. I probably could re-set the preferred width every time superview's layoutSubviews or something is called, but I figured there has to be a solution for this..? Why did it work for UITableViewCell and not for UIView inside a UITableViewCell?
I have tried all sorts of sizeToFit etc., and don't find any questions or answers that targets this particular difference in UIView and UITableViewCell..
The problem here is a bit complex but I will try to explain it... When the view lays out, it initially does so independently of its container and then reports its height to the system when the system needs to determine the height of the cell, which happens before the cell is constructed. Once the cell exists and the device is rotated, the view "realizes" it's in a cell and constraints itself and reports its height appropriately.
Sadly, this is an issue in the table view system stemming from legacy issues with how cells were originally sized back before constraints existed.
The simplest solution is to put the labels and button back directly in the cell. Another option might be to make your external view a table view cell. You can instantiate a table view cell outside of a table view for that one spot it's needed in. Another option is to implement the table view delegate's tableView:heightForRowAtIndexPath: method and manually determine the size.
I am assuming that you are using following method for table view's height:
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
So, Just add all your view's in stack and set top, bottom, leading and trailing constraints of UIStackView with respect to UIView of xib as:

How to set Table view cell to occupy entire screen?

I am working on a project to get custom news feeds from Bing news. I created a custom table view cell and populated various UI items in it. But I am having a hard time to make it occupy the entire screen, it starts from extreme left and ends on the right, leaving large gap from the right margin as show in the image. Can anyone help me out, how to correctly fix it with a detailed explanation of how constraints work in Table views and Tableview cells.
Here' what it looks like in the simulator
Remove previous constraints and add constraint to your UITableView like as shown in below image.
So you UITableView will have 0 margin from edges.
Create a UITableViewController. Just drag drop a TableViewCell into it. Add identifier for that cell and use it. By default it will occupy the whole screen.
In your case I guess you might have added constraints to UITableView. Here what you should do is pin your UITableView to Top,Bottom,Right & Left or make UITableView's width equal to SuperView.

UICollectionView scroll whole page

I have a viewController with some text and under it a UICollectionView (about 50% of the page).
My problem is that when I scroll on the collectionView just the cells are being scrolled and not the whole page (the text + the collection cells).
You can think about it like on Instagram profile page (half info half collectionView), when you scroll on Instagram everything is being scrolled and not just the collection cells.
Anyone knows how can I do it?
Thanks!
Add the text content as separate cells on top of the UICollectionView.
Preferably, create a different section which would contain the cells with the top text.
Keep the backgroundColor/backgroundImage of these cells plain to give the effect that they are simply added as UILabels on a form. Doing so will also differentiate from the rest of the actual UICollectionViewCells.
Now, when you scroll the UICollectionView. It will give an effect that the text along with the cells are scrolled.
In Attribute inspector > Scroll View > check Paging enable
Thats because your text/UILabels doesn't belong within the UIScrollView of your UICollectionView, thus it will not be scrolled when the collectionView is. You could create a UICollectionViewCell for your text, include it within your collectionview and expand the collectionView to fit the screen or use a UICollectionViewController

Anchor a view at the bottom of a UITableViewController

I'm building a view which is a UITableView, however I want to anchor a "Write a comment" UITextField at the bottom of the screen. You can see an example of this on these screenshots from the "Secret" app - the "Write a comment (anonymously)" and "Post" button are anchored to the bottom of the screen regardless of whether you scroll the tableview items up or down.
What's the best way to achieve this?
Should I be embedding a UITableViewController into a UIViewController with the UIView anchored to the bottom of the screen and the tableview anchored to the top of this view?
Is this some kind of UITableView section footer?
Any advice greatly appreciated.
You could subclass UITableView and add a bottom view (not to confuse with a tableview's footerView). Since a UITableView is a subclass of UIScrollView, you can change its contentInsets so that the content of the tableview will still scroll above your bottom view.
tableView.contentInsets = UIEdgeInsetsMake(0, 0, 0, bottomViewHeight);
The next step would be to make the bottom view sticky, that is, floating with the bottom of the tableview. You can achieve this in multiple ways. Here are two suggestions:
1) Manipulating the frame directly
By conforming to UITableViewDelegate you automatically conform to UIScrollViewDelegate. You can see this by inspecting the protocol declaration in UITableView.h:
#protocol UITableViewDelegate<NSObject, UIScrollViewDelegate>
Then implement scrollViewDidScroll:(UIScrollView *)scrollView and change the y-offset of the bottomview to always position it at the bottom of the view. UIScrollView's contentOffset property is used to determine how far down the scrollview has scrolled. This method will be called every single time the scrollview scrolls, hence it will appear that the bottom view sticks to the bottom of the tableview.
2) Use auto layout
While still changing the contentInsets as above, you can achieve the sticky effect by using auto layout constraints instead. By pinning the bottom view to the edge of the scrollview, it will automatically create the sticky effect for you. This is by far my recommended approach, since it saves lines of code, while it uses the highest possible level of abstraction.
I use this category by Florian Kugler when implementing auto layout in code.
This technical note, however not strictly related to the issue, describes how to use auto layout with scrollviews.
I have in-app chat (like whatsapp) and I have the following structure:
UIViewController
\
- View
\
- UITableView
- UIView (with textfied)
I thinks this is the best approach as you don't mix table data with anything else, and you don't have to juggle with sections in code
if you requirement is to show only one picture related information at once in screen means please follow the process it will help you.
first take a view controller then take an image view and on it the buttons you needed add them on image view only below image view take a tableview(if there are comments show tableview. if no comments available show a label as"be first to comment").
Hope this will help

Resources