UIPageControl select dot and go to that page - ios

I have aUIViewController, which has inside a UIView in which I add a UIPageViewController with the UIViewController as the delegate. The thing is that the UIPageControl of the UIPageViewController is not working as I had expected regarding the dots selection.
I was expecting that if I selected the dot 4, it would take me to the dot 4, yet, It doesn't work like that. It always goes to the following page if I select the right half of the UIPageControl (inside the blue square of the image), and goes to the previous page if I select the left half of the UIPageControl (inside the red square of the image). So, If im in page 2 and select around the second dot, it goes to page 1 (instead of staying on page 2)
Moreover, If I click exactly inside one of the dots (any of the dots), the click is ignored, although im not sure how this works on device (since in the device is more difficult to click exactly inside one dot).
My questions:
1 - Is ignoring exactly inside the dots behavior normal (by exactly inside the dots, I mean not around them)?
2 - Is two halves selection of the UIPageController to move between pages behavior normal?
3 - How can I make it so that if I press the dot X, it takes me to page X (instead of the current two halves behavior)?
Note: I prefer swift

1 - Is ignoring exactly inside the dots behavior normal (by exactly inside the dots, I mean not around them)?
I've never encountered this. I would say its not normal. Something may be overriding it.
2 - Is two halves selection of the UIPageController to move between pages behavior normal?
Yes this is the default behavior for UIPageController.
3 - How can I make it so that if I press the dot X, it takes me to page X (instead of the current two halves behavior)?
I would recommend not doing this. The reason that it isn't this way by default is the touch space is too small (when using a finger not a mouse). So it makes sense to only go forward and back. You'd have to create a custom UIControl to be able to do this if you really need to for some reason.

I would suggest you to use external library for that, as this problem was more or less solved. It is quite complicated to do by subclassing native page control but you can probably find implementation somewhere.
This library does exactly what you want (jump to page) :
https://github.com/Spaceman-Labs/SMPageControl
In the documentation, look for section "Direct Page Selection"
Hope it helps!
Edit: Few more libraries to look into:
https://github.com/TanguyAladenise/TAPageControl
https://github.com/nicklockwood/FXPageControl (very extensive, probably too much)

Related

How do i place a button in the background?

I have quite a few labels and buttons on my view controller and I have an image and I have set it to the back in the layers part on the left. How ever when I make it bigger it seems to go to the front and block the images. I have tried multiple codes from other people who have the same problem, but it still doesn't work. I am using Xcode 8, Swift, iOS.
In interface builder you can change the order of what is in front or behind by changing the order of the views as they appear in the Document Outline...
The higher up the list they appear, the further towards the back they are.

Drawing a "pointer triangle" in swift

I have a UIStackView consisting of clickable images. Whenever I tap one of them, a UIView appears on the right side of the stack, showing some more info about the clicked object. I'm trying to make a triangle, that will show user to what line in the stack does the UIView relate to, like shown in the picture:
I don't know how to do that though. My solution would be probably just make 10 UIImageViews (there's 10 lines in the stack) and whenever user taps an image,set it's corresponding UIImageView to a triangle and the rest to nil. That's clunky and dirty, though, is there any better solution? I'm sure there lots of ways to accomplish that, but what's the best one?

How to make a menu like Hotstar application

How should I go about creating a menu like in Hotstar, where one can make a half swipe on the menu below the navigation bar? I suppose using a container rather than carousel view would be more suitable.
I am including a Hotstar app screenshot to illustrate my intent:
NOTE:
I am not looking for frameworks implementing the drawer / side menu.
What you're looking for here, in fact, is a sliding tab bar. The philosophy of the UI element you describe is that it switches content (with or without animations - that's up to your preference/taste).
For start, I can point you to M13InfiniteTabBar or ZRScrollableTabBar but I'm sure there are many others (these are the ones I had the chance to try out). Both of them are implemented in Objective-C as you marked in the tags.
Of course they are not exactly what you showed in terms of design, but they aren't hard to customize.
Are you looking Like this side menu
https://github.com/mikefrederick/MFSideMenu

Why is my UIWebView displaying nothing after I pull it onscreen?

I have a series of three UIWebViews, arranged side-by-side, each one sized to be full screen.
One of them is 'current', one is 'next', and the last is 'previous'. I have each one populated with test data currently (aptly named 'test one' 'test two' 'test three'). Long term I'll have more than three items to deal with.
Swipes cause the entire shebang to 'rotate' left or right, displaying the next / previous item in the cycle. The code for the rotation works, as far as I can tell, correctly. Current takes on the frame of previous, previous takes on next's frame, and next takes on the frame of current. I then adjust the pointers so that current is pointed to next (which is now placed as current) and so on. Sounds more complicated than it really is:
//code to animate this process properly ommited
previous.hidden=1
CGrect tempFrame=current.frame;
current.frame=previous.frame;
previous.frame=next.frame;
next.frame=tempFrame;
previous.hidden=0
//Adjust the actual pointers so they accurately describe their current positions
UIWebView *temp=current;
current=previous;
previous=next;
next=current;
My only issue is that the web views if you go 2 or more in a given direct slide in 'blank'. E. G. swipe right and you go from test 1 to test 2. Swipe right again, and you get a blank screen. THe frames are all correct, the webview is placed correctly, but it's contents are blank.
Confusing thing is, if you swipe once in the opposite direction, and then back, it displays properly. (E. g. swipe three right, you have a blank; swipe left then back right, and it displays the 'correct' screen.)
Does anyone have any ideas what could possibly be causing this? I suspect that once I go to my next step ('real data' where next / previous is loaded with the appropriate item when it's slid in) it'll cause the current issue to vanish, but I want to understand THIS issue.
Edit:
I've managed to trace the issue, partially, to my 'hiding' the panel that should NOT be visible. Past that, I'm still not sure what is going on.
Turns out that it's related to hiding the 'unused' view in the shuffle. Why it works when I move backwards to it I don't know. By moving the 'unused' view to the very back of the order, everything works right.

UIScrollView image/photo viewer with paging enabled and zooming

OK, I think it's time to make an official place on the internet for this problem: How to make a UIScrollView photoviewer with paging and zooming. Welcome my fellow UIScrollView hackers.
I have a UIScrollView with paging enabled, and I'm displaying UIImageViews like the built-in photos app. (Does this sound familiar yet?)
I found the following project on github:
https://github.com/andreyvit/ScrollingMadness/wiki
Which shows how to implement zooming in a scroll view while paging is enabled. If anyone else tries this out, I actually had to remove the UIScrollView subclass and use the native class otherwise it doesn't work. I think it's because of changes in the 3.0 SDK relating to how the scroll view intercepts touch events.
So the the idea is to remove all the other views when you start zooming, and move the current view to (0, 0) in the scrollview, updating the contentsize etc. Then when you zoom back to 1.0f it adds the other views back and puts things all back in order.
Anyway, that project works perfectly in the simulator, but on the device there is some nasty movement of the view you are resizing, which looks like it's caused by the fact we are changing the contentsize/offset etc. for the view being resized. You have to do this view moving otherwise you can pan left through the whitespace left by the other views.
I found one interesting note in the "Known Issues" of the 3.0 SDK release notes:
UIScrollView: After zooming, content inset is ignored and content is left in the wrong position.
This kind of sounds like what is happening here. After zooming in, the view will shift offscreen because you have changed the offset etc.
I've spent hours on this already and I'm slowing coming to the sad realization that this just isn't going to work.
Three20's photo viewer is out of the question: it's too heavy weight and there is too much unnecessary UI and other behaviour.
The built in Photo app seems to do some magic. If you zoom in on an image and pan to the far edges, the current photo moves independently of the photo next to it which isn't what you get when trying this with a standard UIScrollView.
I've seen discussion about nesting the UIScrollView's but I really don't want to go there.
Has anybody managed this with the standard UIScrollView (and works in the 2.2 and 3.0 SDK)? I don't fancy rolling my own zoom + bounce + pan + paging code.
UPDATE
I deleted my previous answer because of the news below...
Big news for those who haven't heard. Apple has released the 2010 WWDC session videos to all members of the iphone developer program. One of the topics discussed is how they created the photos app!!! They build a very similar app step by step and have made all the code available for free.
It does not use private api either. Here is a link to the sample code download. You will probably need to login to gain access.
Check This
And, here is a link to the iTunes WWDC page:
Check This
I've written a simple and easy to use photo browser called MWPhotoBrowser. I decided to create it as Three20 was too heavy/bloated as all I needed was a photo viewer.
MWPhotoBrowser can display one or more images by providing either UIImage objects, or URLs to files, web images or library assets. The photo browser handles the downloading and caching of photos from the web seamlessly. Photos can be zoomed and panned, and optional (customisable) captions can be displayed. The browser can also be used to allow the user to select one or more photos using either the grid or main image view.
You say you've seen discussions of nesting UIScrollViews but don't want to go there - but that is the way to go! It works easily and well.
It's essentially what Apple does in its PhotoScroller example (and the 2010 WWDC talk linked to in Jonah's answer). Only in those examples, they've added a whole bunch of complex tiling and other memory management. If you don't need the tiling etc. and if you dont want to wade through those examples and try and remove the bits related to it, the underlying principle of nesting UIScrollViews is actually quite simple:
Create an outer UIScrollView and set its pagingEnabled = true. Add it to your main view and set its width and height to your main view's width and height.
Create as many inner UIScrollViews as you want images. Set their width and height to your main view's width and height. Add them as subviews to your outer UIScrollView, each one next to the other, left to right.
Set the content size of the outer UIScrollView to the total of the widths of all the inner UIScrollViews side by side (which is equal to [your main view's width]*[number of images]).
Add your images' UIImageViews to the inner UIScrollViews, one UIImageView to each inner UIScrollView. Set each UIScrollView's content size to each UIImageView's size.
Set min and max zoom scales for each inner UIScrollView and set each of the inner UIScrollView's delegate to your View Controller. In the delegate's viewForZoomingInScrollView, return the appropriate UIImageView for the UIScrollView that is passed. (To do this, just keep each of the UIImageViews in an NSArray and set the corresponding UIScrollView's tag property to the index of the appropriate UIImageView. You can then read the tag in the UIScrollView passed to viewForZoomingInScrollView and return the appropriate UIImageView from the NSArray).
That's it. Works just like the photo app.
If you have a lot of photos, to save memory you can just have two inner UIScrollViews and two UIImagesViews. You then dynamically flip between them, moving their position within the outer UIScrollView and changing their images as the user scrolls the outer UIScrollView. It's a bit more complex but the same principle.
I did some playing around with the native Photos app, and I think I can say with confidence they are using a single UIScrollView. The giveaway is this: zoom in on an image, and pull to the left or right. You will see the next or previous photo. If you tug hard enough, it will even page to the next photo at 1.0f zoom. Flip back and the previously zoomed photo will be back to 1.0f zoom as well.
Obivously I didn't write Photos.app, but I'll take a wild guess at how they did it:
A single UIScrollView and a single UIScrollViewDelegate
Populate the UIScrollView with UIImageView children
Listen for scrollViewDidScroll:
Do some math and figure out what page you are currently on
Listen for viewForZoomingInScrollView:
Return a different view depending on the page index
Listen for scrollViewDidEndZooming:withView:atScale: and optionally do some anti-aliasing, etc based on the content
If you decide to try that out, let me know how it works out for you. I'd love to know how you finally end up getting this to work. Even better, post it to github.
I did some playing around with the
native Photos app, and I think I can
say with confidence they are using a
single UIScrollView. The giveaway is
this: zoom in on an image, and pull to
the left or right. You will see the
next or previous photo. If you tug
hard enough, it will even page to the
next photo at 1.0f zoom. Flip back and
the previously zoomed photo will be
back to 1.0f zoom as well.
This is wrong. I'm using nested scrollviews, and getting exactly the same effect. If you're using some memory management scheme (which I had to start using... my page number is fairly high ('bout 50 each in 2 scrollViews)), then you can use a mechanism similar to whatever you have triggering your page loads / unloads to trigger a zoom reset for the pages -1 and +1 from the current page.
I suspect that apple sets this off as soon as the previous pic has disappeared.
What I don't understand is how to achieve smooth scrolling between pages - there's always a very short hang at the moment of transition. Do not get it. I've gotten pretty deep into fixing it - NSInvocationOperations were my first stop, then I made a reusable views queue for the page views (which retain their image views)... still this durned hang.
I only have one NSOperationQueue running, and I've tried fiddling with the max number of concurrent operations. My thought was that the main thread was getting clogged by competing Queues, or maybe even one queue trying to do to much... still, the hang.
I even tried creating super low-qual versions of my media, in case that was the problem. With each image weighing in at around 10k (these are jpegs, mind you)... you guessed it. The hang's still there.
I'm pretty much resolved to do what I've done before and use TTPhotoViewController from Three20. I've spent some hours swimming through that code, and it's always a great education. At this point, though, I would really like to know where the heck this hang comes from, if only so I can spend my can't-sleep hours wondering about something less brain boiling.
sure would be nice if apple built an image viewer like the photos app into the SDK for us to use. I'm currently using three20 and it works great. But it is a lot of extra stuff to carry around when all you really want is the photo viewer.
i write a code for that , and can be as reference
load current view scrollview and imageview ..
and for the screen next to the current view , only imageview
remove all view when current page load to save memory , so good for many photo project
use tag to differentiate different scrollview
_xxxxxxx
the download link click here
Take a look at https://github.com/facebook/three20/blob/master/src/Three20UI/Headers/TTPhotoViewController.h Not sure if that's what you are looking for

Resources