IOS: Creating full screen 'overlay' UIView (Monotouch) - ios

I have a view within a navigationcontroller, and would like to create a 'full (application) screen' overlay that says a couple of things about what the user should do. I've seen this done with a bit of transparency on other apps and it works well. I'm trying the below, but the content ends up beneath my navcontroller headers. Investigations talk about converting the rectangle to a 'window level' location etc, but still it is underneath.
Any alternatives to my feeble attempt below? Or a link to a sample would be great too.
Thanks!
HelpOverlayUIView _overlayView;
public void PresentHelpOverlay()
{
RectangleF windowFullFrame = new RectangleF(0,0,UIScreen.MainScreen.Bounds.Width,UIScreen.MainScreen.Bounds.Height);
// Conversion?
//[aView convertPoint:localPosition toView:nil];
RectangleF overlayFrame = View.ConvertRectFromView(windowFullFrame ,null);
// Clear old one if it exists.
if (_overlayView != null) _overlayView = null;
// Instantiate popup view and add to (in this case the 2nd tier view). This is in an abstract class, if in a concrete one it'd normally just be View.Add
_overlayView = new HelpOverlayUIView(this, overlayFrame);
// tried th, didn't change it.
// this.WantsFullScreenLayout = true;
// _childView.BringSubviewToFront(_overlayView);
_overlayView.Alpha = 0;
_childView.Add (_overlayView);
// Setup event to close without doing anything.
_overlayView.CloseView += (sender, e) => {
Console.WriteLine ("close called");
// animate modal popup's departure
UIView.Animate (
0.5f,
() => {
// Anim Code
_overlayView.Alpha = 0;
},
null
);
};
// animate modal popup's arrival
UIView.Animate (
0.5f,
() => {
// Anim Code
_overlayView.Alpha = 1;
},
null
);
}
(The view is just a UIView with an overload to the Draw() method that places text etc into the view)

You could add the _overlayView to something higher up in the view hierarchy such as the NavigationViewController. If your NavigationViewController is set to be your RootViewController (well, regardless of what is really) you could try this.
((AppDelegate)UIApplication.SharedApplication.Delegate).Window.RootViewController.Add(_overlayView);
You can also bring a subview to the front like this, but this is only to the front of that view, not to the front of everything (which isn't really what you wanted unless _childView was your NavigationViewController).
_childView.BringSubviewToFront(_overlayView);

Related

Place .net control on the sheet

I am using spreadsheetgear, and I want to place the combobox (ComponentOne) into 1 cell. I want that when the user go to this cell, this combobox will activate and show the list to user. After user chose item on the list, it will place this item into the cell value and hide the combobox.
How to do it in Spreadsheetgear.
Thanks,
Doit
I am not familiar with ComponentOne controls, so cannot really speak for that portion of your question. However, regarding a more general approach to embedding custom controls onto a SpreadsheetGear WorkbookView UI control, this is possible by sub-classing the UIManager class, which would allow you to intercept the creation of existing shapes on a worksheet and replace them with your own custom controls.
Below is a simple example that demonstrates this with the Windows Forms WorkbookView control and a sub-class of SpreadsheetGear.Windows.Forms.UIManager. This example just replaces a rectangle AutoShape with a button. You could modify it to show a ComponentOne CheckBox instead.
Note that the UIManager.CreateCustomControl(...) method gets called anytime a shape is scrolled into view / made visible on the WorkbookView. Also note that that your custom control will be disposed of every time it is scrolled out of view or otherwise made invisible. Please see the documentation for more details on this API.
Another important point about shapes and worksheets in general--shapes are not embedded inside a cell. Instead they hover over cells. So there will be no explicit "link" between a given shape and a given cell. The closest you could come to making such an association is with the IShape.TopLeftCell or BottomRightCell properties, which will provide the ranges for which this shape's respective edges reside over. The IShape interface contains a number of other API that you might find useful in your use-case. For instance, you can hide a shape by setting the IShape.Visible property to false.
using System;
using System.Windows.Forms;
using SpreadsheetGear;
using SpreadsheetGear.Shapes;
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
// Create the UIManager replacement.
new MyUIManager(workbookView1.ActiveWorkbookSet);
}
private void buttonRunSample_Click(object sender, EventArgs e)
{
// NOTE: Must acquire a workbook set lock.
workbookView1.GetLock();
try
{
// Get a reference to the active worksheet and window information.
IWorksheetWindowInfo windowInfo = workbookView1.ActiveWorksheetWindowInfo;
IWorksheet worksheet = workbookView1.ActiveWorksheet;
// Get a reference to a cell.
IRange cell = workbookView1.ActiveWorksheet.Cells["B2"];
// Add a placeholder shape to the worksheet's shape collection.
// This shape will be replaced with a custom control.
double left = windowInfo.ColumnToPoints(cell.Column) + 5;
double top = windowInfo.RowToPoints(cell.Row) + 5;
double width = 100;
double height = 30;
IShape shape = worksheet.Shapes.AddShape(AutoShapeType.Rectangle, left, top, width, height);
// Set the name of the shape for identification purposes.
shape.Name = "MyCustomControl";
}
finally
{
// NOTE: Must release the workbook set lock.
workbookView1.ReleaseLock();
}
buttonRunSample.Enabled = false;
}
// UIManager replacement class.
private class MyUIManager : SpreadsheetGear.Windows.Forms.UIManager
{
private Button _customControl;
public MyUIManager(IWorkbookSet workbookSet)
: base(workbookSet)
{
_customControl = null;
}
// Override to substitute a custom control for any existing shape in the worksheet.
// This method is called when a control is first displayed within the WorkbookView.
public override System.Windows.Forms.Control CreateCustomControl(IShape shape)
{
// If the shape name matches...
if (String.Equals(shape.Name, "MyCustomControl"))
{
// Verify that a control does not already exist.
System.Diagnostics.Debug.Assert(_customControl == null);
// Create a custom control and set various properties.
_customControl = new Button();
_customControl.Text = "My Custom Button";
// Add a Click event handler.
_customControl.Click += new EventHandler(CustomControl_Click);
// Add an event handler so that we know when the control
// has been disposed. The control will be disposed when
// it is no longer in the viewable area of the WorkbookView.
_customControl.Disposed += new EventHandler(CustomControl_Disposed);
return _customControl;
}
return base.CreateCustomControl(shape);
}
private void CustomControl_Click(object sender, EventArgs e)
{
MessageBox.Show("Custom Control was Clicked!");
}
private void CustomControl_Disposed(object sender, EventArgs e)
{
// Add any cleanup code here...
// Set the custom control reference to null.
_customControl = null;
}
}
}

Horizontally centering a popup window in Vaadin

I have added a popup window to my main UI as follows:
Window component = new Window();
UI.getCurrent().addWindow(component);
Now, I want my popup to be centered horizontally and e.g. 40 pixels from the top of the screen. As far as I can see Vaadin has 4 methods for positioning my window.
component.center()
component.setPosition(x, y)
component.setPositionX(x)
component.setPositionY(y)
None of these are really what I want. I was hoping at first that setPositionY might help me. This does allow me to get the right distance from the top, but the x-position is now set to 0, where I wanted it to be centered.
The setPosition might have helped if I was able to calculate what the x-position should be, but this would require me to know the width of the component in pixels, but component.getWidth just tells me 100%.
Next I tried to use CSS styling on the component, writing and explicit css rule and adding it to the component with addStyleName. It seems though that Vaadin overrides whatever I wrote in my css with its own defaults...
Any ideas how to get my Window component positioned correctly?
I used the methods getBrowserWindowWidth() and getBrowserWindowHeight() from the com.vaadin.server.Page class for this.
I centered my "log" window horizontally in the lower part of the browser window with
myWindow.setHeight("30%");
myWindow.setWidth("96%");
myWindow.setPosition(
(int) (Page.getCurrent().getBrowserWindowWidth() * 0.02),
(int) (Page.getCurrent().getBrowserWindowHeight() * 0.65)
);
Solution 1: Use SizeReporter
Indeed, setPositionY() will reset the window's centered property to false. As the width of your pop-up and that of your browser window are not know before they appear on the screen, the only way I know to get those values is to use the SizeReporter add-on. Its use is quite straightforward:
public class MyUI extends UI {
private Window popUp;
private SizeReporter popUpSizeReporter;
private SizeReporter windowSizeReporter;
#Override
protected void init(VaadinRequest request) {
Button button = new Button("Content button");
VerticalLayout layout = new VerticalLayout(button);
layout.setMargin(true);
popUp = new Window("Pop-up", layout);
popUp.setPositionY(40);
addWindow(popUp);
popUpSizeReporter = new SizeReporter(popUp);
popUpSizeReporter.addResizeListenerOnce(this::centerPopUp);
windowSizeReporter = new SizeReporter(this);
windowSizeReporter.addResizeListenerOnce(this::centerPopUp);
}
private void centerPopUp(ComponentResizeEvent event) {
int popUpWidth = popUpSizeReporter.getWidth();
int windowWidth = windowSizeReporter.getWidth();
if (popUpWidth == -1 || windowWidth == -1) {
return;
}
popUp.setPositionX((windowWidth - popUpWidth) / 2);
}
}
This piece of code will be okay as long as you don't resize the pop-up. If you do, it will not be automatically recentered. If you replace addResizeListenerOnce() by addResizeListener() then it will automatically recenter the pop-up but you'll get some "UI glitches" as the add-on sends resize events almost continually while you're resizing your pop-up...
You could try to do it using CSS, but I personally avoid CSS as much as I can with Vaadin :).
You'll need to recompile the widgetset after you've added the add-on as a dependency.
Solution 2: Use com.vaadin.ui.JavaScript
I won't vouch for the portability of this solution but I guess it will work on most modern browsers.
public class MyUI extends UI {
private Window popUp;
#Override
protected void init(VaadinRequest request) {
Button button = new Button("Content button");
VerticalLayout layout = new VerticalLayout(button);
layout.setMargin(true);
popUp = new Window("Pop-up", layout);
popUp.setPositionY(40);
popUp.addStyleName("window-center");
addWindow(popUp);
// Add a JS function that can be called from the client.
JavaScript.getCurrent().addFunction("centerWindow", args -> {
popUp.setPositionX((int) ((args.getNumber(1) - args.getNumber(0)) / 2));
});
// Execute the function now. In real code you might want to execute the function just after the window is displayed, probably in your enter() method.
JavaScript.getCurrent().execute("centerWindow(document.getElementsByClassName('window-center')[0].offsetWidth, window.innerWidth)");
}
}

Xamarin.iOS: Try to move bottom toolbar(text field) above keyboard when editing like chat window

I tried to put the toolbar(with text field) above the keyboard. Initially, the toolbar was at the bottom.
I tried to use "inputAccessaryView" on the text field. The toolbar just disappear after I clicked inside the text field. I know this will work if I created a new toolbar for it. But like in the chat window, I want the same textfield/toolbar.
Here is the code
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
NavigationItem.Title = "Name";
ChatInput = new UITextField (new RectangleF(0,0,View.Bounds.Width - 104f,30f));
Toolbar = new UIToolbar (new RectangleF(0, View.Bounds.Height - 44.0f, View.Bounds.Width, 44f));
ChatInput.BorderStyle = UITextBorderStyle.RoundedRect;
Toolbar.SetItems( new UIBarButtonItem[] {
new UIBarButtonItem(UIBarButtonSystemItem.Refresh, (s,e) => {
Console.WriteLine("Refresh clicked");
})
, new UIBarButtonItem (ChatInput){Style = UIBarButtonItemStyle.Bordered,Width = View.Bounds.Width - 104f}
, new UIBarButtonItem(UIBarButtonSystemItem.Reply, (s,e) => {
Console.WriteLine ("Reply clicked");
})
}, false);
ChatInput.ReturnKeyType = UIReturnKeyType.Send;
ChatInput.ShouldBeginEditing = delegate {
ChatInput.InputAccessoryView = Toolbar;
return true;
};
ChatInput.ShouldReturn = delegate {
ChatInput.ResignFirstResponder();
return true;
};
View.AddSubview (Toolbar);
}
I don't know if there's a way to pin the toolbar on top of the keyboard, but what you could do it create some kind of method to move the toolbar (edit its .Frame property) when the keyboard pops up. I use this method to move an entire UIScrollView up. You can find the method I used here: (http://www.gooorack.com/2013/08/28/xamarin-moving-the-view-on-keyboard-show/).
This may not be the most "clean" solution, but if implemented correctly, it does its job. Another advantage is, is if you put the entire "moving of the keyboard" in a separate class-file, you can re-use it in other views.
Hope this helps. Good luck!
Love and regards,
Björn

FlyoutNavigation - Views using NSLayoutConstraints Fail to Properly Draw View on First Use

Cross-posted here and on github, https://github.com/Clancey/FlyoutNavigation/issues/29.
I have an odd behavior I'm trying to track down, and I'm not sure if it is FlyoutNavigation or something else I'm doing. Maybe someone can take a quick look who understands things a bit better than I do.
Example Project - https://github.com/benhysell/FlyoutNavigationWithNSLayoutConstraintsError
Goal - Use https://gist.github.com/praeclarum/5175100, A C# syntax for NSLayoutConstraints, described in this blog post, http://praeclarum.org/post/45690317491/easy-layout-a-dsl-for-nslayoutconstraint, with FlyoutNavigation.
Issue - On the first use of a view that incorporates NSLayoutConstraints the view doesn't respect the constraints or background color, both odd. On subsequent 'selections' of the view from the menu of FlyoutNavigation the view will properly draw.
Setup - Working in Xamarin Beta Channel against iPhone Simulator 6.1 and the latest released Xcode.
Steps to Reproduce
1. The easiest way to show this is to open the sample project that comes with FlytoutNavigation and modify this project using the steps below. I included in this post a link to the example project I modified to show the error.
Add the gist, https://gist.github.com/praeclarum/5175100, to a new class, call it layout.
Add a new UIViewController and the following to ViewDidLoad(), note this was modified from the Xamarin 'Hello World' sample app one can create in VS2012
public override void ViewDidLoad()
{
base.ViewDidLoad();
View.Frame = UIScreen.MainScreen.Bounds;
View.BackgroundColor = UIColor.Red;
button = UIButton.FromType(UIButtonType.RoundedRect);
button.SetTitle("Click me", UIControlState.Normal);
button.TouchUpInside += (object sender, EventArgs e) =>
{
button.SetTitle(String.Format("clicked {0} times", numClicks++), UIControlState.Normal);
};
View.AddSubview(button);
const int ButtonWidth = 75;
const int HPadding = 22;
const int VPadding = 44;
View.ConstrainLayout(() =>
button.Frame.Width == ButtonWidth &&
button.Frame.Left == View.Frame.Left + HPadding &&
button.Frame.Top == View.Frame.Top + VPadding);
}
In the MainController.cs replace
navigation.ViewControllers = Array.ConvertAll (Tasks, title =>
new UINavigationController (new TaskPageController (navigation, title))
);
with
navigation.ViewControllers = Array.ConvertAll(Tasks, title =>
new UINavigationController(new MyViewController(navigation))
);
I'm saying 'make every view a view that implements NSLayoutConstraints'.
Run Application, first view returns with:
Select the same item from the FlyoutNavigation menu and it will then properly draw.
I've traced through FlyoutNavigationController.cs a couple of times and it appears on the second time selecting the item from FlyoutNavigation, on line 238:
this.View.AddSubview (mainView);
ViewControllers[0].ChildViewControllers[0].View.Frame {{X=160,Y=208,Width=0,Height=0}} System.Drawing.RectangleF
This is the incorrect size for the view, however after I step over line 238:
ViewControllers[0].ChildViewControllers[0].View.Frame {{X=0,Y=0,Width=320,Height=416}} System.Drawing.RectangleF
The position is fixed, and the view will draw correctly.
Summary - I've tried using the gist with the NSLayoutConstraints by itself in a single page window application without issue, and I'm thinking since it does eventually draw properly after a second invokation of FlyoutNavigation I'm thinking there is a 'something' I'm missing with the FlyoutNavigation, or setting incorrectly that I can't put my finger on.

Separate title in NavigationBar and navigation buttons

Hey, I have a stack of UIViewControllers inside of a UINavigationController. Usually the title (or the NavigationItem‘s title) decides about both the title that is displayed in the NavigationBar (displayed at the top) and all the navigation buttons, for example the back-buttons in the navigation bar itself.
Now I plan to put a bit more information into the NavigationBar‘s title, while still keeping those button labels short and concise (for example the view‘s title is “<Customer name> Overview”, while the buttons should just show “Overview”).
I am currently trying to achieve this by changing the NavigationItem‘s title on ViewWillAppear and ViewWillDisappear. This works well, but one can see the moments where the text changes (probably due to the animation). I‘ve tried different combinations with ViewDidAppear and ViewDidDisappear as well, but the effect was the best with just the Will methods. An example code for this is shown below (the Example class is pushed to a UINavigationController).
Is there a better way to achive this? Maybe with simply changing the button titles only or with just directly changing the navigation‘s title? Or can I maybe prevent the standard mechanisms from copying the title to all other instances?
public class Example : UIViewController
{
private int depth;
public Example ( int depth = 0 )
{
this.depth = depth;
this.Title = "Title";
}
public override void ViewDidLoad ()
{
base.ViewDidLoad();
UIButton btn = new UIButton( new RectangleF( 100, 100, 300, 50 ) );
btn.SetTitle( "Duplicate me!", UIControlState.Normal );
btn.TouchDown += delegate(object sender, EventArgs e) {
NavigationController.PushViewController( new Example( depth + 1 ), true );
};
View.Add( btn );
}
public override void ViewWillAppear ( bool animated )
{
base.ViewWillAppear( animated );
this.NavigationItem.Title = String.Format( "Title / {0}", depth );
}
public override void ViewWillDisappear ( bool animated )
{
base.ViewWillDisappear( animated );
this.NavigationItem.Title = "Title";
}
}
If I understand you correctly, I think there's a ready-made for this:
Set backBarButtonItem on your view controller's navigation item.

Resources