How to show Collection in iPad but List in iPhone? - ios

I have a requirement to show the Data in Linear Vertical List in iPhone and
in Collection/Grid in IPAD
In the iPhone, it should look like
But In Ipad, it should look like
I have already implemented in iPhone through table view but don't know how to show it as grid view in IPAD
Here are my questions
should I have to create the Separate view controller for Ipad if yes
then how can I define two view controller one for iPhone and other
for iPad
what is the best way to achieve this?
please help me I am trying to implement it but can not find any way.
(Note)Images are copied from Vimeo iTunes app https://itunes.apple.com/us/app/vimeo/id425194759?mt=8

You don't need to create two different controller's for IPAD and IPHONE. Just create one controller with UICollectionView and then use UICollectionViewFlowLayout for your UICollectionView to set layout of UICollectionView according to the device weather it is IPAD or IPHONE Try this solution if you have any doubt pls let us know.
Try this solution
UICollectionViewFlowLayout *collectionViewFlowLayout = [[UICollectionViewFlowLayout alloc] init];
[collectionViewFlowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
self.myCollectionView.collectionViewLayout = collectionViewFlowLayout;
Also you can use multiple properties of UICollectionViewFlowLayout.
Check this solution and let me know if it works for you.
Check these links for reference :
https://www.raywenderlich.com/136159/uicollectionview-tutorial-getting-started
https://www.raywenderlich.com/107439/uicollectionview-custom-layout-tutorial-pinterest

The way to do this is with Adaptive Layout and size classes in the storyboard. You don’t need to write any code at all, and you are also covered for multitasking/split-screen and future iOS devices of unknown dimensions. You can make any view appear or disappear according to weather the width is compact (like the iPhone) or regular (like the iPad). In the views inspector you can add a variation for compact width like this:
Adding a compact width variation to view
Click add variation and untick “installed”. Now that view will only be installed when the device has compact width. You can do this with a container view with an embed segue to a UITableViewController.
If you view the storyboard as an iPad ( by clicking the little icons at the bottom where it says “view as”) that view will disappear. Replace with another container view that segues to UICollectionViewController and do the same again, but this time add a variation with regular width.
Thats it.
(Sorry, I don't have enough points to show images)
Here is a Demo project that creates something like the layout and behaviour you want. All the action is in the storyboard, the view controllers are just skeletons.

Related

Different designs for different devices ios

I have been creating an application for iPhone and iPad. I am using Auto Layout (wAny and hAny). Now I want a separate design for iPhone 4s alone. How can I use separate designs for this device. I already completed most of the designs with this wAny and hAny. How can I change this.
Edit:
I want to change only few view controller not all the designs.
I suggest not to go with different storyboards. You can add 2 views inside that viewcontroller's(for which the design is different) view and toggle it programmatically depending on the device. Regarding autolayout, set wAny and hAny and add constraints accordingly.
VC.view
-iPhone 4 View
-Other device's view
This can be done in storyboard only.
So programmatically when loading the vc, check the device and show the specific view hiding the other view. In this case in future, even if the design is normalized, you can easily use the same view with change in one line of code.
This is necessary if the design is totally different. Or if it's just few sub views which are different, I think you should write some code to hide and unhide the subviews acc to the device.
I am a novice in iOS, please correct me if I am wrong anywhere.
Better to go with design it as separate controls if you have design changes and load it conditionally for 3.5 inch screens . If its a simple changes (easily managed through codes) then go with codes itself.

Table view custom cell not responding according to constraints

I am designing a table view in which I have a custom cell in which I am trying to design a few views and sub views. I have placed my views as per the following hierarchy and constraints -
And here is my main story board -
I have given my table view cell's content view as orange colour and I have placed a view with yellow colour. I have pinged it to the content view of the cell. My storyboard is of the size 600*600 freeform(Size class - wAny hAny). When I run my app in ipad, it keeps a space as shown below between the cell's content view and its subview even on pinning the subview to all sides of content view-
So,what might be my problem and what mistake am I making? Thanks.
I think the problem is because of the sizing classes (like in the image).
if your app is universal (for both iPhone and iPad) make sure you choose it like the screenshot (w Any, h Any).
Please let me know the current settings.
Update
After sending me the storyboard. I have used it as it is in a new project. and that's how it looks in both iPhone and iPad
It looks fine in both of them. my best guess is it's a problem of the
preview only(which doesn't matter).
If you change the scene size from iPhone 4 inch to inferred
it solve the problem in the preview as well.

Default size classes seem to only work for iPad (XCode 6)

I am trying to wrap my head around the new size classes in iOS8 and XCode6. I am attempting to create a nib, without a storyboard, and do something really simple--center a UIView on the screen.
Starting with a nib in the default size: w:Regular h:Regular, I place a 200x200 UIView onto the parent view and center it, then add contraints to pin it. In my preview pane, the UIView only shows up on the iPad view.
I need for this view to show up on iPads in lanscape and iPhones in portrait. I suppose some day i will understand why Apple thinks this is so much easier, but at the moment I'm bewildered.
When I switch my design view to any of the iPhone supported modes, the UIView disappears.
Even when I unpin the UIView and move it around in the design view, it never shows up in the iPhone view. In other words, I've tried everything to get this view to appear on an iPhone and nothing works.
Here is my UIView and settings:
Obviously there is something I'm missing, but I'm getting really frustrated trying to figure it out. Can anyone offer a clue? Thanks!
It's because you defined your view only for the size classes Regular & Regular. For them to show up on the iPhone you will have to configure the view also for the appropriate size classes, which in case of the iPhone is Regular & Compact where (<height> & <width>).
UPDATE:
The views generally only show up in the size classes for which they are configured. You currently have Regular & Regular selected, this can be seen from your screenshot. This means you defined it only for the devices with size classes Regular & Regular, which is the iPad in both orientations.
You need to add the views also in the size class that you are targeting, which are the size classes of the iPhone.

Default width of iOS 7 views

When I add a UIViewController to a storyboard in the latest xCode its view is defaults to 600x600 in size. This means centred items appear off to the right and the view extends off the bottom of the screen. Why is this?
Many thanks,
Ben
in Xcode 6 the interface builder works with AutoLayout. So you need to set constraints to your views to be in the right place. See here how thats works: Click me
But you also can disable the size class to work in the exact ViewController like this:
If you turn size classes off you see an window like this:
Just select the size class you want (iPhone for example) and you can work like you want it.
But I would recommend to work with AutoLayout due to the fact that there are a lot of different device types (iPhone 4(S), iPhone 5(S), iPad).

Using same ViewController files for 2 Storyboards (to get identical views)

I am building my first single view app. I have my UI elements in my main storyboard. I arranged all of my elements based on the 3.5inch screen and now it looks good. I want the app looks good on 4-inch display as well. And now I created a 4-inch storyboard (blank) and I want to have similar views with exactly the same outlets shown, just change the layouts and positions to fit the 4 inch screen.
I thought I could create a separate storyboard view for different layout but use the same view controller files (.h and .m) so everything (the buttons and labels, etc.) works in the same way but I don't know to do it. Is this a correct idea and if yes how to accomplish it?
Of course, you can... But there is no need for that! You should be interested in autolayout.
Here is a two-part tutorial on how to do that.
Of course you can use the same classes for other Storyboard. This is exactly what you do when you're developing Universal application. But in this case you'll have to put some assumptions in your code for determining whether you're using 4 inch or 3.5 inch screen. Preprocessor instructions will be helpful for you.
There are many ways to achieve your main objective:
having only one storyboard item with autolayouts that will auto
adjust the screen for 3.5/4 inch
if you don't like autolayout and the view it's not to complicated, the "springs and struts" can achieve as well auto resize.
you can have both 3.5 and 4 inch view controllers in the same storyboard, access one or the other with "self.storyboard instantiateviewcontrollerwithidentifier"
you can have as many storyboards as you like and do UIStoryboard *storybord = [UIStoryboard storyboardWithName..
PS: I'm a fan of option 2. It's usually worth to have 2 storyboards when the app is universal, so you'll have one fore iPhone and one for iPad.

Resources