Controlling transitions when Flex mobile changes between portrait and landscape - apache-flex

I'm developing a mobile application in Flex 4.6, and I have the autoOrient property set to true so that Flex takes care of changing between portrait and landscape mode when the phone is rotated. This works, but...
The transition between portrait and landscape consists of the application rotating from one position to the other and it doesn't look good at all. I would like to have Flex just cut or fade between the two screen orientations without rotating, but I can't find where I could control this.
My application is based on a ViewNavigatorApplication if that helps with the answer.
I guess what I'm looking for is something like the sort of control you can have when changing between views with something like:
navigator.defaultPushTransition = new FlipViewTransition();
but to do with portrait/landscape transitions instead.

You can listen to the orientation change event (StageOrientationEvent.ORIENTATION_CHANGE) and set a transition to your desired container.

Related

Right to left flow direction on MasterDetailPage when the screen is wide

I'm using Xamarin.Forms 3.1. and the app i'm working on has a MaterDetailPage as desktop and it could be use in right to left mode. In normal screen size everything is OK but when the screen of device is wide (like Tablets) the default behavior of Xamarin is to set MasterBehavior to Split and the outcome is like this:
MasterBehavior = Split
Another option is to set MasterBehavior to Popover manually but it makes the problem even worse. The master page comes out form the right side of the screen and goes to somewhere near the left side of screen and detail page will be unreachable, like this:
MasterBehavior = Popover
Is there a way to solve this problem or must wait until Xamarin.Forms team solve this bug?
Here is the solution:
You could try to give a specific width size in Tablets device

Using Xamarin Forms, maintain aspect ratio of Navigation Page Title Icon in Landscape on iPhone X

When running a Xamarin Forms app that uses a TitleIcon on a Navigation Page, the image is squished when the device is turned to landscape mode. What do I need to do to maintain the aspect ratio of the image as it does with previous devices?
iPhone 8 Portrait:
iPhone 8 Landscape:
iPhone X Portrait:
iPhone X Landscape:
For these kinds of customizations, I think you might be better off avoiding the built in NavigationPage NavigationBar and instead implement your own navigationbar in XAML. It would be relatively simple to just use a grid or absolutelayout with your desired background color and image and place it at the top of your pages. You could use a control template or a reusable content view to avoid copying and pasting the bar to every page. Once you've got that done you just have to hide the default navigationbar by using
NavigationPage.SetHasNavigationBar(myPage, false);
Or by adding this to the top of your content page definition in XAML
NavigationPage.HasBackButton="False"
Something like this might help you get started:
http://lukealderton.com/blog/posts/2017/january/replacing-the-xamarin-headernavigation-bar-with-a-custom-viewtemplate/

How can I make my app look alike in both portrait and landscape view?

This is my constraint
I have made use of auto layout in my app, all the UI elements are visible in portrait mode:
But the view is incomplete in landscape mode.
How can I make my app look alike in both portrait and landscape view?
I am using Swift 2 in Xcode7.2.
use autolayout With Sizeclasses.
read this artical
When handling screen with UITextField you should always use something scrollable, either a UIScrollView or a UITableView. By using, you can easily update your screen UI. I'm highly recommended not to use UIScrollView, UITableView will be more easy. And yes, there's one well maintained library (3rd party) https://github.com/michaeltyson/TPKeyboardAvoiding which will handle your tableview position when your textfield will get focus.

Flex 4.6 Mobile force all views to portrait except one

I´m trying to do this for 2 days and no success.
One, and only one view (the video record view) I need to force to start in landscape. All the other views must start in portrait. And... Landscape view and the others portrait views must not rotate if the user rotates the device.
I´m trying with stage.setAspectRatio(StageAspectRatio.PORTRAIT) for portrait views and stage.setAspectRatio(StageAspectRatio.LANDSCAPE) for landscape view. Sometimes works... Sometimes not.
Sometimes going from a portrait to landscape works but when I return to the caller portrait view, its rotate to landscape too.
Thanks for some help.
If you didn't already, take a look at this article that should be really useful to you: StageAspectRatio Enhancements in AIR 3.3
You could of course play with setAspectRatio to define starting orientation, but that's only part of the problem.
You can modify the autoOrients property located in your app descriptor file if you want to get rid of the automatic behavior and handle everything manually.
Or you could listen for every orientationChanging event of the Stage object and preventDefault() them to cancel any screen orientation.
Once this is done, you simple have to handle the loading orientation of your views and this should be it.

Trouble Switching from Portrait to Landscape using Media Queries

I'm currently starting to use a responsive approach to my sites. I've found http://fluidbaselinegrid.com/ to be the best boilerplate for this. But with every boilerplate or grid I've tried I can't get an iPhone or iPad to recognize the media queries when you switch from portrait to landscape mode.
It always loads the correct css in the orientation that you load the page in. But when you go from portrait to landscape it hangs and doesn't resize properly.
You can even see this happening on http://fluidbaselinegrid.com/.
Does anyone know if this is a quirk with mobile webkit that we have to live with for now, or is there a way to fix this?
I contacted the developer behind Fluid Baseline Grid and got this answer:
I think what you are experiencing is the viewport meta tag.
Current:
Maximum-scale doesn't allow the user to zoom in/out with finger pinch.
However, it prevents the layout shifting when a device is changed from
portrait to landscape. This was purposely removed to help those who
may have impairment reading smaller text. You can can simply change
the meta tag in the head to set the scale, which will fix the zooming
issue when you rotate from portrait to landscape.
"If web developers want their scale settings to remain consistent when
switching orientations on the iPhone, they must add a maximum-scale
value to prevent this zooming, which has the sometimes-unwanted side
effect of preventing users from zooming in"
- http://hacks.mozilla.org/2010/05/upcoming-changes-to-the-viewport-meta-tag-for-firefox-mobile/
That definitely fixes the issue, but it seems that you can't have the ability to zoom with a finger pinch and also control the way the layouts switch. Is there a way to work around this?
I solved adding 'initial-scale=1' only (and not 'maximum-scale=1') to the viewport meta tag

Resources