Note: Using Monotouch and doing all the UI Programatically.
Hello everybody,
I have a question.
I have this main UIViewController object, and I have 2 UIVIews inside it. This views will perform commands in some devices, etc. I'm planning to do some menu with a slider effect appearing from the left side as it's drawn below. In this menu the user will select some buttons, and this is gonna make to change the another two UIViews.
Here's my question:
I'm planning to use Modal View Controller as UIModalPresentationPageSheet, but how can It appear at the center of the screen horizontaly. I'd like to put it on the center on the left side. How can I change it?
If it's impossible, should I use the UIPopover?
Image Below
Thank you.
Lyniker
I don't think either will get you the animation effect you want. In general I would choose to slide in a view using UIView animation:
if(IsDrawerVisible == false) {
UIView.Animate(0.5, () => {
DrawerView.Frame = new RectangleF(
this.View.Bounds.Left + 300,
DrawerView.Frame.Y,
DrawerView.Frame.Width,
DrawerView.Frame.Height);
}, UIViewAnimationOptions.CurveEaseIn);
}
else {
// Move the frame of the DrawerView by subtracting from Frame.X
}
Of course you need a reference point (usually the parent UIView's left bounds) and do the appropriate calculations to move the "Drawer" component into view. This can be arbitrary though :-)
NOTE: If DrawerView is of type UIViewController / DialogViewController please use the new iOS 5 custom containment APIs or you'll get some seriously wonky behavior. See my blog post on child view controllers here:
http://blog.devnos.com/wont-somebody-please-think-of-the-children
Related
I have built a test project to show what the goal is vs. what I currently have happening. The gif on the left shows exactly what I want the ending appearance to be. It is constructed with a single traditional view hierarchy. I need to achieve this with the pink view being an embedded/contained view. My attempts so far have only gotten me to the gif on the right.
The way the (pink) contained view grows is possibly an important detail: the blue subview changes it's height, and the whole apparatus gets a new intrinsic size because of all the connected vertical constraints. As you would expect, this is a simplification of my actual app, but I think it has all the important bits.
The main things I see that are strange:
The yellow/orange "other" view is not animating at all.
The pink contained view is animating nicely for it's own part, but it is animating it's position, even though it's frame has the same origin before and after the animation as shown here:
Here is the Storyboard of the right gif. Both the container view in the "parent" scene and the top view in the "child" scene have translatesAutoresizingMaskIntoConstraints set to false with runtime attributes.
The question then: **What must I change about my configuration to get all affected layout changes to animate (properly) when I have a size change in an intrinsically-sized and contained view? **
Edit: Tried manual embed
Since posting the question, I have tried a manual View Controller Containment strategy, and I got the exact same results as with the Storyboard technique, which is ultimately a good sign for the platform. There was 1 fewer view in the total hierarchy, but it didn't seem to make a difference.
Edit: Bounty and project
I have added a 100 point bounty to attract attention. I have also uploaded my sample project to this github repo. Check it out!
Changing your animation block in InnerViewController as follows does the trick.
var isCollapsed = false {
didSet {
let factor:CGFloat = isCollapsed ? 1.5 : 0.66
let existing = innerViewHeightConstraint.constant
UIView.animate(withDuration: 1.0) {
self.innerViewHeightConstraint.constant = existing * factor
self.view.layoutIfNeeded()
self.parent?.view.layoutIfNeeded()
}
}
}
The key difference is self.parent?.view.layoutIfNeeded(), which tells the embedding view controller to update the constraints as part of the animation, instead of immediately before the start of the animation.
i am having some very strange issue. Basically i am implementing a drag and drop view with a snap to the horizontal 1D grid. Well, so when i drag a view and its center coordinate X is bigger or smaller then a different view, the non-dragged view should be animated to the left or right of its original position.
This works fine most of the time. But in some special cases its not working. In some situations specific situations the view does not receive any gesture callbacks anymore. I can reproduce this issue and have found out that when i remove the code that applies the animation, everything its working fine.
Basically this is the code that is called when the dragged view is at a position where the view below should be moved to the left or right
/**
* Animate element to its saved position
*/
- (void)switchElement:(unsigned int)draggedIndex with:(unsigned int)otherIndex
{
// first animate
UIView *view = views[draggedIndex];
UIView *otherView = views[otherIndex];
// IF I COMMENT THIS OUT, EVERYTHING WORKS FINE
otherView.frame = [self getImageRectForIndex:draggedIndex];
// now switch internally
if(draggedIndex != otherIndex)
{
// switch views
views[draggedIndex] = otherView;
views[otherIndex] = view;
}
}
Any idea if there is something to have in mind if i animate UIViews and have gesture recognizers attached to them?
If somebody is willing, i can paste the whole class here to test it.
SOLUTION
I am having some "highlight" views in my design. And i have moved the relevant views behind those transparent background views by accident. So now i am not using addSubview: but insertSubview:atIndex: instead.
But marking #Anthonin C. answers as the right one. Because it pointed me in the correct direction (I found it out by overriding the hitTest: method)
Would you please track the otherView.bounds property to verify that your touch isn't out of bounds. I faced this issue recently and Apple documentation provide solution here : Delivering touch events to a view outside the bounds of its parent view
Sorry, I don't have enough reputation to comment your answer.
I have a UIView with some buttons on it. What I would like to do, is add a full screen blur layer between the UIView and the buttons when the user does a long press on one of them. The visual appearance and location of the buttons shouldn't change.
What is the best way to do this? Also, if possible, I would like to avoid transfering the buttons from one view to another, as this might cause me a lot of trouble (the buttons are draggable).
You can use -[UIView insertSubview:belowSubview:] method to place blur view behind buttons.
I would suggest using Pop animation framework for animations.
As for creating blur view this looks good: https://stackoverflow.com/a/25706250/2754158
You could create a view with the blur effect, and use the method view.insertSubView(blurView, above|belowView: view)
In my iOS app I am using SWRevealViewController to add menu functionality. It works great, however my client wants to make the menu cover the current view controller, not move it to the right.
I mean something like this:
before:
after:
The author of this library told me to implement the following, where I can get current offset of the menu and move the current view controller by that offset by doing something like that:
let rvrw = self.revealViewController().rearViewRevealWidth
var bounds = navigationController!.view.bounds
bounds.origin.x = rvrw
navigationController!.view.bounds = bounds
The problem is that the menu is behind it. I would like to know how I can do that in this library or if there is another library with similar implementation and that functionality as well.
I have found tons of libraries, but all of them are pushing the controller not covering it. I have found one or two which do it way I need, but they missed some features (like being under navigation bar), were outdated or buggy.
SWRevealViewController offers some customization options
documented in the SWRevealViewController.h header file.
It seems as though the frontView is the part with "WatchKit" in your example and the rearView is the menu.
In that case, you might be able to use setFrontViewPosition with the value FrontViewPositionLeftSide, which gives the frontView
// Left position, front view is presented left-offseted by rightViewRevealWidth
If that does not work, you could also try FrontViewPositionLeftSideMost, which gives the position
// Left most position, front view is presented left-offseted by rightViewRevealWidth+rigthViewRevealOverdraw
I did not have the setup at hand to try this.
Context
I am using this simple library to make an intro/walkthrough for my app (TL;DR, horizontal paging view controllers). I currently have 3 pages setup.
In the 3rd walkthrough page, I have a custom CALayer that animates a circle in an endless loop. I'd like to add that layer to a UIView in order to lay it out the way I want in IB (via auto layout).
In viewDidLoad (for the 3rd page) I create the circle layer and set its frame to be the same as the view I positioned, assuming the circle would be in the same spot as the view:
for v:UIView in [view1!, view2!] {
var pulse = PulseLayer()
pulse.frame = v.frame
pulse.cornerRadius = v.frame.width / 2.0
pulse.masksToBounds = false
view.layer.insertSublayer(pulse, above: v.layer)
}
Problem
When I run the app in the iPhone 6 simulator, the CALayers show up OUTSIDE their UIViews (see below).
One thing I noticed immediately is the layers are not misplaced the same way--one is above its view, and the other is to the left. I am assuming this is related to the constraints on the views, but I cannot figure out how to fix it.
Equally baffling to me is that when run on the iPhone 5 simulator, the layers appear exactly as I expect them to (see below).
I feel like I am misunderstanding some of the concepts at work here. How can I get the positioning to act the same? (Like the iPhone5 gif.)
Or, is there a better way to do what I am trying to do?
viewDidLoad is too soon. Remember, viewDidLoad is way early; the view is not in the interface yet and nothing has its ultimate size/position. If you're going to add the layers to view rather than as sublayers of the little views, you will have to run your layer-creation code much later, in order to get the position right. viewDidAppear: or viewDidLayoutSubviews will be safe - but of course you must use a bool flag so you don't do it too many times.
Personally I don't see why you don't add the layers to the little views. So you would just set pulse.frame = v.bounds and add as a sublayer to v, not to your view. It solves the positioning and gets the relationships right. And doing it in viewDidLoad would work, because when the views move, the layers move with them.