Historically, iOS has limited its search capabilities to the web and/or system apps that come pre-installed with iOS. With the release of iOS 9, though, Apple is enabling developers to take advantage of search to make their app’s content more accessible than ever. Apple has provided three options for implementing search on iOS 9. I’ll be covering these […]
The post Improve Discoverability with Search in iOS 9 appeared first on Xamarin Blog.
Xamarin Forms is a really great platform for mobile app development – we have used it on several apps now and had much better results than when trying to use the native SDK’s directly. Every now and then though you run up against a roadblock with the default renderer implementations where some feature (perhaps a key feature of your app) simply does not work the way it should. Secondary toolbars on iOS are one of those. I recently spent a couple of days trying to coax this feature into working properly before finally finding a solution (many other folks seemed to have simply given up on it).
Xamarin Forms supports the notion of Page-level toolbars. These are represented by the Page.ToolbarItems collection, and each ToolbarItem represents a clickable button that is hosted within the toolbar. In fact, there are two toolbars – the main “primary” toolbar that fills the right end of the navigation bar at the top of your screen, and also a “secondary” toolbar. You can only fit a few (two or three at most) toolbar items on the primary toolbar, and the rest are generally expected to go into the secondary toolbar. On Android this is done by adding an expansion button to the far right end of the primary toolbar which drops down a vertical menu containing the secondary toolbar items.… Read more
Xamarin Forms is a really great platform for mobile app development – we have used it on several apps now and had much better results than when trying to use the native SDK’s directly. Every now and then though you run up against a roadblock with the default renderer implementations where some feature (perhaps a key feature of your app) simply does not work the way it should. Secondary toolbars on iOS are one of those. I recently spent a couple of days trying to coax this feature into working properly before finally finding a solution (many other folks seemed to have simply given up on it).
Xamarin Forms supports the notion of Page-level toolbars. These are represented by the Page.ToolbarItems collection, and each ToolbarItem represents a clickable button that is hosted within the toolbar. In fact, there are two toolbars – the main “primary” toolbar that fills the right end of the navigation bar at the top of your screen, and also a “secondary” toolbar. You can only fit a few (two or three at most) toolbar items on the primary toolbar, and the rest are generally expected to go into the secondary toolbar. On Android this is done by adding an expansion button to the far right end of the primary toolbar which drops down a vertical menu containing the secondary toolbar items.… Read more
The newest version of the Skype for iOS app has a lot of neat eye candy in it. I love all the animations it uses throughout the experience. If you are not familiar with what I am talking about, take a quick look at Brian Lovin’s Design Details blog on Skype. I wanted to try and recreate some of these animations in a Xamarin.Forms app, but I wasn’t sure how to go about it. A quick search brought up this post by Arkadiusz Holko. It’s not a perfect recreation, but it’s a pretty good start!
Arkadiusz put his solution on GitHub, so I decided to see what I could learn from that and port it to a Xamarin.Forms project. My goal was to not use custom renderers and make everything in shared code. Here is a list of things I figured would be needed:
Not too bad, right?
Ok, so it’s not so bad. Xamarin.Forms already has some lovely animation routines for doing all sorts of cool stuff. There are also some easing functions already available to us. The Easing.SpringOut method looked like what I wanted, and the LayoutTo() method will move my view around just fine. The next problem is the drawing API. Without custom renderers, I didn’t find a great way to do custom drawing on a Xamarin.Forms.ContentView. Fortunately, someone else already solved this for me. I came across Christian Falch’s NControl library. Listen to this:
The library contains the NControlView class where real custom cross-platform drawing can be performed without the need for native implementations thanks to the NGraphics library.
I quickly followed along and had something pretty similar going in my Forms app.
The next big issue here is that the side view (green) is moving in sync with the center (red) view. This is not what we want. The reason this is happening is because the easing functions are identical. We need some way to control the coefficients of the easing methods so we can change the elasticity of the animation.
Instead of passing the built in Easing.SpringOut, we can instead create a custom easing function. The Easing class has an overload that takes a Func<double, double>. The only criteria is that when given 0, the function returns 0, and when given 1, it will return 1. Here is what I ended up with:
new Easing((x) => {
return ((x - 1) * (x - 1) * (( sidecoeff + 1 ) * (x - 1) + sidecoeff) + 1);
})
see here for the original BackEaseOut method used. Simplification explained here
And the result after some tweaking.
I made use of the NControl library so that I could draw a bezier curve from these control points. I ended up with something like this:
public override void Draw (NGraphics.ICanvas canvas, NGraphics.Rect rect)
{
base.Draw (canvas, rect);
double yOffset = 20;
double width = rect.Width;
double height = rect.Height;
var points = new PathOp[] {
new MoveTo(0, yOffset - delta),
new CurveTo(new NGraphics.Point(width / 2, yOffset + delta),
new NGraphics.Point(width / 2, yOffset + delta),
new NGraphics.Point(width, yOffset - delta)),
new LineTo(width, height),
new LineTo(0, height)
};
canvas.DrawPath(points, null, new SolidBrush(new NGraphics.Color(0, 0.722, 1, 1)));
}
Arkadiusz’s post talks about using CADisplayLink to get a calback for each frame of the animation where the curve can be updated. I did not find a great place to do something similar in shared code, so I put it in the custom easing method which I figured is called similarly.
_sideHelperView.LayoutTo(position, _animationDuration, new Easing((x) => {
UpdateCurve();
return ((x - 1) * (x - 1) * (( sidecoeff + 1 ) * (x - 1) + sidecoeff) + 1);
}));
The UpdateCurve() method simply calculates the delta of the side and center helper views and calls Invalidate() on the actual NControlView being drawn. This means that each time the easing method is called, the view will be invalidated and cause the curve to be updated each step of the animation. The end result is pretty good.
On my device testing, the animation was smooth on both Android and iOS. There is plenty of room for optimizations and eye candy! Also, if you have not already, I encourage you to stop by Arkadiusz’s GitHub page and take a look at the work he’s done.
The world of Office 365 APIs is immense, with a plethora of capabilities that enable developers to access Office 365 and add rich functionality to their mobile apps, all from shared code. In fact, we’ve already covered several Office 365 topics, including integration of SharePoint Online, Outlook(Mail), and OneDrive, as well as authentication . To consume […]
The post Simplified Office Integration with the O365 Unified API appeared first on Xamarin Blog.
We’re headed to our first Jenkins User Conference in Santa Clara, CA from September 2-3, and we’d love to see you there. We’ll have members from the Xamarin team available to answer your questions, discuss your apps and projects, and show you what’s new in Xamarin Test Cloud. The Jenkins User Conference is the world’s […]
The post Join Xamarin at the Jenkins User Conference appeared first on Xamarin Blog.
