UIPageViewController with 4 direction scrolling - ios

I have created a grid view with the some images on UIView, which should like default iOS Photos app Collection [Screenshot attached]
When clicking on an image, it should show the full image in a screen with UIPageViewController
i added the FullImages with UIPageViewController but it is only two directional, i can only scroll from left to right and right to left OR top to bottom and bottom to top, But i want to do both at a time
for example:
I have 9 images in the following order
1 2 3
4 5 6
7 8 9
suppose i'm at image 5
if i scroll from top to bottom i have to go to image 2
now, if i scroll from bottom to top i have to go to image 5
now if i scroll again from bottom to top i have to go to image 8
now if i scroll from right to left i have to go to image 9
now if i scroll from top to bottom i have to go to image 6
now if i scroll from left to right i have to go to image 5
can somebody suggest how to achieve this?
can i use the UIPageViewController or any other control to get this effect

I would use UICollectionView for Grid layout for photos.
You can't set both dimension scrollability of collection view. But you will achieve this by using Multiple Section
As an example :
I think you need something like this.. Just remove First Row & Columns. & add ImageView instead of Just Text..
http://www.brightec.co.uk/ideas/uicollectionview-using-horizontal-and-vertical-scrolling-sticky-rows-and-columns
Another good eg is: https://github.com/izotx/ScrollableCollectionView
& if you want to load view at the middle photo of grid then set ContentOffset of that collectionview accordingly..
As far as i understand your problem, this solution should work in your problem..
Try this out & inform me if you solve it or not. Or you get another best solution..

A UIPageViewController will not do what you want. Think of it like a book. That's what it offers. It won't offer scrolling through a grid of pages like that.
A customized UICollectionView is probably the best starting point for what you want.

Related

Layout for 3 uiImageView side by side using swift

I want to create a control for ios 8+ where we have 3 images. In center image in big and left/right images are small.
I have to create some code in swift, using Stack Layout but it will not work in iOS 8 as it is available from ios 9. So need to change this. What should i use to keep images together (left and right bottom)?
Also another problem i have is, i need pan gesture on only big center image not on the small left and right image. So when i touch the big image i can move all three around the screen. Currently it if i touch any of 3 all moves.
Functions:
small left/right image: Act as button for running a swift function
middle image: on pan gesture drag all three around screen
You have 3 choices to create an image slider according to your requirement.
Using Scroll view (UIScrollView)
Using Collection view (UICollectionView)
Using Page Controller
Here are simple/basic logic, how and what you should use to achieve sliding image.
Using Scroll view (UIScrollView)
Add three images in scroll view with equal width
Set Height of middle image, according to your requirement (bigger than other)
Set width of any one image (probably middle) equal or around equivalent percentage (80% equal) to device screen using AutoLayout constraint.
Scroll view automatically scroll horizontally according to horizontal content size. You don't need to add Pan gesture.
You can also enable paging of scroll view.
Using Collection view (UICollectionView)
Add collection view with three (static) cells or single dynamic (You need to choose how do you want to update this feature in future. If you choose single dynamic cell then you can easily add more images in slider by adding its data into datasource variable, in future.)
Enable horizontal scroll only in collection view.
Update (make it bigger) Image height in data source method using index path for item (indexPath.item == 1).
Collection view have pan gesture also. You don't need to implement it.
You can enable pagination also.
Note: Set image/cell width equal to device screen or equivalent.
Using Page Controller
Here are nice reference tutorials, "How to use Page View Controller"
How To Create UIPageViewController Using Storyboard
How to Use UIPageViewController to Build Tutorial Screens
I do not recommend this option (Page view controller) but you have provided complete details about scope of your requirement (view controller level or it is simple child view slider), so this is an option to image slider also.

xcode - TableView rows from bottom to top

For my little project, I need you help.
I already created a functioning table view. Now I want that the rows goes from bottom to top and not like usually from top to bottom. How do I do that?
First you rotate your UITableView 180 degrees upside down, and then rotate your individual cells also upside down.
Take a look: UITableView anchor rows to bottom
If you can target iOS 6+, this answer suggests using UICollectionView to lay out rows in reverse order: https://stackoverflow.com/a/23895000/144088.
The most simple solution,
you can use array.reversed() to show the last object of the array at the top of tableview

ios 8 layout using uitableview static cell & uitableview dynamic prototypes

I work on a app, nothing fancy, but since is my first app, there alot of stuff I never did before.
So, I'm trying to build a view like the image attached.
I've looked up on the Internet how to do something like that but I don't know what is better/cleaner way to do.
As you can see I have 3 areas: the title, the tableview in the middle and a button on the lower side.
The table will expand based on the content (3 lines or 30 lines) so the button must move down and a scroll bar should appear.
So, my idea:
Using a tableview having 3 static cells: one to put my title, second to put a tableview having prototypes cells, and a third one for the button.
That way I would have a scroll bar when the table in the middle grows, pushing the button.
Here I have a question: how to have the table view (the inner tableview) resize itself, pushing the height of the middle row, instead of having a fixed width with a scroll.
Is the the best way to achieve that?
Thanks for any idea.
C.C.
Are you sure you want to push the bottom UI down as the table grows? You say whether the table has 3 or 30 cells, but what if it has 300 cells? Your user then has to scroll to the bottom to reach the button and tab bar. I think you'll find that it would be better to use Auto Layout and let the table fill the screen space between the title and the button. The table will scroll so if you have 300 cells then you can scroll through inside the table's available area.
The advantage here is you won't be fighting with Auto Layout. If your user rotates an iPhone 4S into landscape you'll only have a few rows displayed but conversely if they run in portrait on an iPad you'll fill all of that space.
As for how to do it, the other advantage is that you don't need the nested table you describe. Use a constraint to attach the title label to the top layout guide, then attach the tab bar to the bottom layout guide. Put a vertical space constraint between the button and the tab bar. Finally, put vertical space constraints between the table and the title & the table and the button. (You'll need to implement constraints for the horizontal axis as well, but that's pretty simple.)
There's are refinements you can put into place if you want the table to shrink to fit if there are only 3 rows, but this should get you started and you may not want that anyway.
Key point: the tableView wants to scroll naturally, inside a view sized to fit the display. Don't change that behavior unless you really have to. Neither your users nor UIKit expects what you're trying to do, and the table is going to fight you all the way about it.
Nesting UIScrollViews (which your nested table would do) works, but it opens up a lot of bad UI flow problems. In my experience every time somebody wants nested scrollViews there's some other approach which is more "natural" to iOS interface paradigms.
If you're dead set on the UI you described I wouldn't use a table for the outer structure. Just make it a UIScrollView and calculate your content size based on the number of rows the table will display. You can actually do that, and then use Auto Layout as I described.

Place buttons and labels on top of UIImageView in Xcode 6

I'm new to iOS development and I'm just getting my way around Xcode 6 working with Swift, but I'm hitting small blocks here and there so please understand why question may be very basic.
My issue is I have a background image (UIImageView) which is placed within a View within a ViewController. All I want is to be able to drag and drop other type of objects like buttons or labels on top in the designer section. When I have the designer view I see these buttons and labels visible on top of the UIImageView, but when I run the project in the iPhone simulator all these objects disappear and I just see the background image (UIImageView). Is there something I'm missing here?
Thanks in advance.
You should read auto layout Apple document https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/
Basically its the way you describe position relatively, say you want to align button center on the UIImage, in this case you define 2 constraints vertical align and horizontal align.

Manipulating scroll view in Corona SDK

I have a class with a scroll view that has a width of 980. I also have about 100 buttons aligned 5 columns x 5 rows for each 320 width of my scroll view. The scroll works okay but I'm trying to achieve two things:
Allow scrolling only when slide length is about 50% of screen size
If the slide length is half the screen size, then it would immediately slide/scroll to the next 25 items. For example, in plain sight you would see buttons 1-25 then if you try to scroll, the next 25 objects would be displayed (buttons 26-50).
I followed the sample from here but I don't know how to implement what I want to do or if it's even possible to do this using scroll view. I hope someone can give me a good example or idea. Thanks.
Try something like this: http://developer.coronalabs.com/code/slider-module-springboard-functionality-warning-shameless-promotion-inside. It works sort of like the iOS springboard.

Resources