Grouping textbox and label together - xamarin.ios

I have a lookup view on my xamarin.iOS app where the user puts their subdomain in and I want the textbox to be to the left of the label that has the parent domain, the image below shows what I basically want to achieve:
I was easily able to achieve this on android using drawables but my iOS skills are not as sharp so I'm lost on how I do this on iOS.

in iOS ,you can implment it in code.
in xxxViewController
public override void ViewDidLoad()
{
base.ViewDidLoad();
UIView backgroundView = new UIView(new CGRect(10,50,View.Bounds.Width-20,30));
UILabel domainLab = new UILabel()
{
Text = " https://www.example.com ",
Font = UIFont.SystemFontOfSize(12),
TextColor = UIColor.Gray ,
BackgroundColor=UIColor.LightGray,
Frame=new CGRect(0,0,150,30)
};
UITextField textField = new UITextField()
{
Frame=new CGRect(150,0,View.Bounds.Width-170,30),
};
textField.Layer.MasksToBounds = true;
textField.Layer.BorderColor = UIColor.LightGray.CGColor;
textField.Layer.BorderWidth = (System.nfloat)0.5;
backgroundView.AddSubview(domainLab);
backgroundView.AddSubview(textField);
View.AddSubview(backgroundView);
// Perform any additional setup after loading the view, typically from a nib.
}

Related

Xamarin.ios: Search bar displays in every tab bar view

I'm building an iOS app with Xamarin.ios MvvmCross. In this app I use a tabbed view. on one tab view I wan't to display a search bar, but this search bar displays in every tab view. Anyone know how to resolve this so that I can hide the search bar in the other tab views?
Search bar Tab view:
public override void ViewWillAppear(Boolean animated)
{
base.ViewWillAppear(animated);
var searchController = new UISearchController(searchResultsController: null);
searchController.SearchBar.SizeToFit();
searchController.SearchBar.SearchBarStyle = UISearchBarStyle.Prominent;
TabBarController.NavigationItem.HidesSearchBarWhenScrolling = false;
TabBarController.NavigationItem.SearchController = searchController;
NavigationController.NavigationBar.PrefersLargeTitles = true;
this.Title = "Search";
_searchBar = searchController.SearchBar;
_searchBar.SearchButtonClicked += SearchBar_SearchButtonClicked;
_searchBar.TextChanged += SearchBarOnTextChanged;
_searchBar.CancelButtonClicked += SearchBarOnCancelButtonClicked;
TabBarController.NavigationItem.RightBarButtonItem = null;
}
Picture of tab view with search bar:
Search
Other tab views where I want to hide the search bar but can't get it done:
public override void ViewWillAppear(Boolean animated)
{
base.ViewWillAppear(animated);
//var searchController = new UISearchController(searchResultsController: null);
//searchController.SearchBar.Hidden = true;
var search = new UISearchController(searchResultsController: null);
TabBarController.NavigationItem.HidesSearchBarWhenScrolling = true;
search.SearchBar.Hidden = true;
NavigationController.NavigationBar.PrefersLargeTitles = true;
TabBarController.NavigationItem.RightBarButtonItem = null;
}
Picture of tab view where I don't want to show the search bar:
Home
This issue occurs because you just use one Navigation Controller wrapping your TabbarController. When user enter the second tabbar item(Search), you initialize a UISearchController and set it to the NavigationItem's SearchController. So this search bar appears as you want.
But when you return to the Home controller, this UISearchController will be still there since you just use one UINavigationController. Add the code below in your Home Controller's ViewWillAppear() event will fix your issue:
TabBarController.NavigationItem.SearchController = null;
I really recommend you to separate your one UINavigationController to four in your situation. Then each tabbar item controller has its own NavigationItem and will not affect each other. UITabbarController should be your app's root ViewController. Your app's hierarchy can be like this:
I use storyboard to draw two tabbar items helping you understand what I mean.
In this way in the Home controller, there's no need to add any code. You can just add the search bar in your Search controller with the code:
public override void ViewDidLoad()
{
base.ViewDidLoad();
var searchController = new UISearchController(searchResultsController: null);
searchController.SearchBar.SizeToFit();
searchController.SearchBar.SearchBarStyle = UISearchBarStyle.Prominent;
this.NavigationItem.HidesSearchBarWhenScrolling = false;
this.NavigationItem.SearchController = searchController;
NavigationController.NavigationBar.PrefersLargeTitles = true;
this.Title = "Search";
_searchBar = searchController.SearchBar;
_searchBar.SearchButtonClicked += _searchBar_SearchButtonClicked; ;
_searchBar.TextChanged += _searchBar_TextChanged; ;
_searchBar.CancelButtonClicked += _searchBar_CancelButtonClicked; ;
this.NavigationItem.RightBarButtonItem = null;
}
I move your code to ViewDidLoad() event and modify TabBarController.NavigationItem to this.NavigationItem.

How to create popover in Xamarin iOS (iPhone)?

I am creating a page where on click of a button a popover should appear as that in screenshot attached.
I have almost tried many methods to do so.but all ended up showing full screen.Is there really not any way to create a popover in Xamarin iOS?
Can any one help me with this?enter image description here
You can construct the custom pop view controller, then present it with the UIModalPresentationStyle Popover:
//The pop view controller you want to show, here I use Storyboard to initialize it
PopoverViewController popViewController = Storyboard.InstantiateViewController("PopoverViewController") as PopoverViewController;
//Set the presentation style to popover
popViewController.ModalPresentationStyle = UIModalPresentationStyle.Popover;
//The popover view's size
popViewController.PreferredContentSize = new CGSize(150, 150);
//The pop view's position
popViewController.PopoverPresentationController.SourceView = MyBtn;
popViewController.PopoverPresentationController.SourceRect = MyBtn.Bounds;
popViewController.PopoverPresentationController.PermittedArrowDirections = UIPopoverArrowDirection.Up;
//We can also customize the background color
//popViewController.PopoverPresentationController.BackgroundColor = UIColor.White;
popViewController.PopoverPresentationController.Delegate = new PopOverViewDelegate();
PresentModalViewController(popViewController, true);
Do not forget to set the delegate below to achieve the same effect on iPhone:
public class PopOverViewDelegate : UIPopoverPresentationControllerDelegate
{
public override UIModalPresentationStyle GetAdaptivePresentationStyle(UIPresentationController forPresentationController)
{
return UIModalPresentationStyle.None;
}
}

Unable to update the text of a RootElement when used with a modal RadioGroup Section with MonoTouch Dialog

I am creating an iPad app using MonoTouch 2.10.11 and I want to MonoTouch.Dialog to create some of the editable fields on a form. One of the fields will use a RadioGroup to allow the user to select from a list of options. The default behavior of M.T.D is display the selection list table over the existing table. This works great for the iPhone layout, but on this iPad form, the table is only on a small area of the form and the navigation bar looks odd on the middle of the form. I want to display the selection as a full screen modal and the user will hit a "back" button to go back the previous form with the selected item.
I created a new RootElement descendant class like this:
public class ModalRootElement : RootElement
{
public override void Selected (DialogViewController dvc, UITableView tableView, NSIndexPath path)
{
tableView.DeselectRow (path, false);
UIViewController uIViewController = this.MakeViewController ();
this.PrepareDialogViewController (uIViewController);
dvc.PresentViewController (uIViewController, true, null);
}
protected override void PrepareDialogViewController(UIViewController dvc)
{
base.PrepareDialogViewController(dvc);
UIButton button = UIButton.FromType (UIButtonType.RoundedRect);
button.Frame = new RectangleF (5, 5, 80, 20);
button.SetTitle ("back", UIControlState.Normal);
button.TouchUpInside += delegate {
DialogViewController d = dvc as DialogViewController;
(d.Root as ModalRootElement).TableView.ReloadData ();
d.DeactivateController(true);
};
dvc.View.AddSubview (button);
}
}
The table is implemented with the following code:
var _status = new ModalRootElement("Status", new RadioGroup("status", -1)) {
(new Section() {
new RadioElement("New", "status"),
new RadioElement("In process", "status"),
new RadioElement("Rejected", "status"),
new RadioElement("Deferred", "status"),
new RadioElement("Transferred", "status"),
new RadioElement("Unknown", "status"),
new RadioElement("Complete", "status")
})
};
var _odom = new EntryElement ("Odometer", "current odom", "");
_odom.KeyboardType = UIKeyboardType.DecimalPad;
_odom.TextAlignment = UITextAlignment.Right;
var root = new RootElement ("back") {
new Section("") {
_status,
_odom
}
};
_dvc = new DialogViewController(root);
_nav = new UINavigationController (_dvc);
_nav.SetNavigationBarHidden (true, false);
When I run the app, I can drill into the RadioGroup and make a selection. When I click the back button that I added to the view, the modal view closes and the RadioSelected properted of the ModalRootElement object is set correctly, but the text is not displayed.
If I change Selected() method to call dvc.ActivateController instead of PresentViewController, the ModalRootElement displays the correct text, but the RadioGroup table has the wrong size. Is there a way to get the RootElement to display the correct text when you use PresentViewController instead of ActivateController?
I think you need a Root.Reload() call.

MonoTouch.Dialog: Title Bar color with reflection api

I'm using the MonoTouch.Dialog reflection API to create a new DialogViewController:
var dashBoard = new RootElement (""){
new Section("My Dashboard", "All alerts, follow-ups, and tasks are automatically synced each time you launch the app") {
new StringElement ("Alerts"),
new StringElement ("Follow-ups"),
new StringElement ("Tasks")
}
};
var dvc = new DialogViewController (dashBoard) {
Autorotate = true
};
navigation.PushViewController (dvc, true);
If I supply the RootElement with a string value I get a nice title bar with text. I want to control the color of that title bar. I'm not seeing any properties that allow me to do this. Do I need to subclass DialogViewController and build my own title bar?
For me, the easiest way to do this is indeed subclassing the DialogViewController, like this:
public class CustomDialogViewController : DialogViewController {
// add constructors here as necessary, dont forget to call base()
public override void ViewWillAppear (bool animated)
{
base.ViewWillAppear (animated);
this.NavigationController.NavigationBar.TintColor = UIColor.FromRGB(0, 115, 176);
}
}

How can I animate a View to fly in from the bottom of the screen?

I'm trying to figure out how to have a view. Let's call it ThirdView. It should slide up from the bottom of the screen when a user clicks a particular button on SecondView.
You'll want to create the ThirdView in your SecondView and present it as a modal view, passing in the secondView in the constructor. This will be the easiest way of animating it in the way you would like.
var thirdView = new ThirdView(secondView);
this.PresentModalViewController(thirdView, true);
In your third view, you'll want to call the passed-in SecondView and call:
secondView.DismissModalViewControllerAnimated(true);
Here is a complete working example. It is a tad simpler than in chrisntr's answer...though the above example is what I used to figure everything out.
The coolest thing about this method is that for an artistic custom UI (like the one I am building for a game), there is no off-the-shelf UI elements like the TabBar, Navigation bars, etc. The most creative applications don't use standard UI stuff.
In your main.cs file, in your finishedlaunching block:
ViewController myUIV = new ViewController();
window.AddSubview(myUIV.View);
window.MakeKeyAndVisble();
And then in a new code file add this code:
using System;
using System.Drawing;
using MonoTouch.UIKit;
namespace AnimationTest
{
public class ViewController : UIViewController
{
UIButton uib = new UIButton(new RectangleF(100, 100, 40, 40));
public override void ViewDidLoad()
{
Console.WriteLine("UI1");
this.View.BackgroundColor = UIColor.Blue;
uib.BackgroundColor = UIColor.White;
uib.TouchUpInside += delegate {
Console.WriteLine("Hey!");
var vc2 = new SecondController();
PresentModalViewController(vc2, true);
};
this.View.AddSubview(uib);
base.ViewDidLoad();
}
}
public class SecondController : UIViewController
{
UIButton uib = new UIButton(new RectangleF(100, 100, 40, 40));
public override void ViewDidLoad()
{
this.View.BackgroundColor = UIColor.White;
uib.BackgroundColor = UIColor.Red;
uib.TouchUpInside += delegate {
this.DismissModalViewControllerAnimated(true);
};
this.View.AddSubview(uib);
base.ViewDidLoad();
}
}

Resources