New to Xamarin world.
Need a suggestion on how to design a screen.
I need to design a login screen which has a 1 dropdown, 2 text boxes and 1 button - all vertically centre aligned.
It shall run on both portrait / landscape mode on all iPhone and iPads
as well.
I had faced problem in landscape mode. Background image gets squeezed and content gets hidden and it doesn't have a scrollbar.
Thanks in Advance !
You can resize the controls when the device rotate to landscape via code.
ViewWillTransitionToSize() will be fired when the device is rotated. You can resize the controls here, like this:
public override void ViewWillTransitionToSize(CGSize toSize, IUIViewControllerTransitionCoordinator coordinator)
{
base.ViewWillTransitionToSize(toSize, coordinator);
coordinator.AnimateAlongsideTransition((IUIViewControllerTransitionCoordinatorContext) => {
if (UIApplication.SharedApplication.StatusBarOrientation == UIInterfaceOrientation.Portrait || UIApplication.SharedApplication.StatusBarOrientation == UIInterfaceOrientation.PortraitUpsideDown)
{
//Update UI
}
if (UIApplication.SharedApplication.StatusBarOrientation == UIInterfaceOrientation.LandscapeLeft|| UIApplication.SharedApplication.StatusBarOrientation == UIInterfaceOrientation.LandscapeRight)
{
//Update UI
}
}, (IUIViewControllerTransitionCoordinatorContext) => {
//Transition Completion
});
}
Related
I'm integrating GoogleCast to my app. Its root view controller is a UITabBarController, with a custom white tab bar.
After I wrapped it with a GCKUICastContainerViewController, the Home Indicator background area became black (and the indicator is white).
How can I make this Container VC extend its child VC (my tab bar controller) below the home indicator?
Note: There is an ugly workaround that I tried, which is to set castContainerVC.view.backgroundColor = .white. This would work if the tab bar was always visible, but some parts of my navigation stack may choose to hide it. When it happens, I'd end with a white Home Indicator area, but whatever color the presented view controller has above the indicator.
extension GCKUICastContainerViewController {
open override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
if let window = UIApplication.shared.keyWindow, miniMediaControlsViewController?.view.bounds.height ?? 0 == 0 {
contentViewController?.view.frame = window.frame
} else {
contentViewController?.view.frame = (view.subviews.first! as UIView).frame
}
}
}
Yes, it appears Google wants us to have the GCKUICastContainerViewController as the root view controller. And it looks like it has some layout issue when there is safe area inset at the bottom of the display.
I solved this by changing the view's frame manually in viewDidLayoutSubviews. You can do it with an extension like this
extension GCKUICastContainerViewController {
open override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
if let window = UIApplication.shared.keyWindow {
contentViewController?.view.frame = window.frame
}
}
}
This way you will get rid of the space at the bottom of the screen. Works for me.
I have an iOS app developed using Xamarin. Now I am trying to migrate it to iOS 11. My problem is that none of the BarButtonItems in navigation bars are visible in any controller, yet they are functional and I can tap them.
some of those button items are set in storyboard, by adding Navigation Item into the controller. titles of those button items are also invisible. even the standard back button.
the other bar button items are set in code by SetRightBarButtonItem or SetLeftBarButtonItem. I have both custom icon buttons and system item buttons. an example for system item button is:
this.NavigationItem.SetLeftBarButtonItem(new UIBarButtonItem(UIBarButtonSystemItem.Stop, (sender, e) => { ... }), true);
and another with custom icon button:
this.NavigationItem.SetRightBarButtonItem(new UIBarButtonItem(UIImage.FromBundle("gear"), UIBarButtonItemStyle.Plain, (sender, e) => { ... }), true);
These navigation bar button items have been working without problems for a long time. how can I fix them with the new navigation bar structure in iOS 11? (I do not enable large titles in navigation bars)
Just do something like this.
var button = new UIBarButtonItem(UIImage.FromBundle("gear"),UIBarButtonItemStyle.Plain, (sender, e) => { ... });
button.SetTitleTextAttributes(new UITextAttributes()
{
TextColor = UIColor.Blue,
TextShadowColor = UIColor.Clear
}, UIControlState.Normal);
this.NavigationItem.SetRightBarButtonItem(button, true);
I developed an app using Xamarin forms that has side menu see this url.
But I couldn't use this in my current project, so I made my custom component for side menu.
How to implementing feature that hide menu when I tap range out of side menu?
It is hard to give you any help without seeing your code, but generally I tackle this issue by adding a ContentView that covers the screen when ever your menu opens. The menu would be displayed on top of the ContentView. Then you add a TapGestureRecognizer to the ContentView which closes the menu when clicked.
You could add some color to the ContentView but make it opaque so it is see-through, something like this color: #74787878
ContentView backgroundView = new ContentView {
BackgroundColor = Color.FromHex("#74787878"),
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Content = //Your menu
}
backgroundView.GestureRecognizers.Add(new TapGestureRecognizer {
Command = new Command(() => {
//Remove the background and hide the menu
})
});
I made use of YUI scrollview to make a menu construction with touch, flick and arrows. However, for some reason the arrows have a bug.
When the page is loaded the first time it works fine, however, as soon as the user scrolls the page with its mouse of with swipe (on tablet or phone) the arrows do not work any more. When I swipe the content, the arrows magically come to live and work again.
This is the script I use for scrollView:
YUI().use('scrollview-base', 'scrollview-paginator', function(Y) {
var scrollView = new Y.ScrollView({
id: "scrollview",
srcNode : '#clientslider-content',
width : 950,
flick: {
minDistance: 10,
minVelocity: 0.3,
axis: "x"
}
});
scrollView.plug(Y.Plugin.ScrollViewPaginator, {
selector: 'li'
});
scrollView.render();
var content = scrollView.get("contentBox");
var scrollViewCurrentX = $('#clientslider-content').offset();
content.delegate("click", function(e) {
var scrollViewNewX = $('#clientslider-content').offset();
var scrollMarginL = (scrollViewNewX.left-2);
var scrollMarginR = (scrollViewNewX.left+2);
if (scrollViewCurrentX.left < scrollMarginL || scrollViewCurrentX.left > scrollMarginR)
{
e.preventDefault();
}
}, ".clientlink");
content.delegate("mousedown", function(e) {
scrollViewCurrentX = $('#clientslider-content').offset();
e.preventDefault();
}, "a, img");
Y.one('#clientslider-next').on('click', Y.bind(scrollView.pages.next, scrollView.pages));
Y.one('#clientslider-prev').on('click', Y.bind(scrollView.pages.prev, scrollView.pages));
});
You can find a demo here:
http://www.circlesoftware.nl/demo/test.html
To reproduce:
- load the page
- press the right button (do not do anything else)
- scroll down with your mouse
- arrows are broken now
To fix:
- just grap the content of the slider, swipe it
- try the left or right button and they work again
Does anyone have ANY idea what might be the problem here?
Problem came from the library itself it seems, was using 3.7.3, upgrade it to 3.9.1 and seems to be solved now:
http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js
I'm using two panes (grid and details) as master-details pattern.
Now I'm trying to create "Details on the right" or "Details on the bottom" toggle button. I do this by changing the region attribut of the ContentPane, like so:
function toggleDetails() {
if(dijit.byId("Details").region == "right") {
dijit.byId("Details").set("region", "bottom");
dojo.byId("Details").style.height = "200px";
}
else {
dijit.byId("Details").set("region", "right");
dojo.byId("Details").style.width = "400px";
}
dijit.byId("DetailsParent").resize();
}
The panes themselves are changing fine. The problem is that I have a splitter for the details pane. When toggling, the splitter is ok for the original orientation, but doesn't render correctly for the alternate orientation. Any solution to refresh the splitter orientation based on the contentPane region?
I have tried programmatically changing some of splitter widget attributes, like "horizontal" and "region", but nothing really fixed the alternate orientation.
A possible solution could be by using removeChild and addChild like in this example
if (isVertical) {
// vertical layout
this.ap_MainContainer.removeChild(this.ap_TopContainer);
this.ap_TopContainer.region = 'top';
this.ap_MainContainer.addChild(this.ap_TopContainer);
} else {
// horizontal layout
this.ap_MainContainer.removeChild(this.ap_TopContainer);
this.ap_TopContainer.region = 'left';
this.ap_MainContainer.addChild(this.ap_TopContainer);
}