Extend GCKUICastContainerViewController below the Home Indicator - google-cast

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.

Related

Xamarin.iOS Design Suggestion

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
});
}

Xamarin side menu tap issue

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
})
});

Dojo dijit layout ContentPane with splitter - programmatically change region orientation

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);
}

Selection type changes context menu using chrome extension

I am trying to build a chrome extension. In it I want the context menu to change according to the selected text on the page.
For example, if its a number I want a menu that says divisibility test for this numbr is ...
and if it is a string, it should have a something else, but not both at the same time.
I cant figure out how to do that.
You will have to set a listener for mouse down. There is no other way to get the selected text before the menu is created.
See this SO question:
chrome extension context menus, how to display a menu item only when there is no selection?
Here is part of the code the rest is at the link.
document.addEventListener("mousedown", function(event){
//right click
if(event.button == 2) {
if(window.getSelection().toString()) {
chrome.extension.sendRequest({cmd: "createSelectionMenu"});
} else {
chrome.extension.sendRequest({cmd: "createRegularMenu"});
}
}
}, true);

How to tell the difference between touchesBegan and touchesMoved

How can I ignore the touchesBegan method when the user is pinching an object and ignore the touchesMoved method when the user taps on the screen? I created a picture zoom in / zoom out effect and I want to be able to hide the navigation bar when the user taps on the screen once. Right now when the user starts pinching, the navigation bar gets displayed since the user touched once.
What would be the best way to do this?
It seems like the easiest thing to do for your show/hide navigation bar would be to add a UITapGestureRecognizer and set numberOfTouchesRequired and numberOfTapsRequired to 1.
Alternatively, you could use touchesEnded instead of touchesBegan. Then in your touchesEnded, you could check for the number of touches and only show/hide if it's 1:
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *theTouch = [touches anyObject];
if (theTouch.tapCount == 1) {
// show/hide navigation here ...
} else {
// finish your zoom here ...
}
}

Resources