I have set LeftBarButton in the NavigationItem is below way.
Code :
UIButton leftBtn = new UIButton();
leftBtn.Frame = new CoreGraphics.CGRect(0, 14, 30, 30);
leftBtn.SetImage(UIImage.FromBundle("cancel_white_icon"), UIControlState.Normal);
leftBtn.TintColor = GargiColor.WhiteColor();
UIBarButtonItem barBtnLeft = new UIBarButtonItem();
barBtnLeft.CustomView = leftBtn;
barBtnLeft.TintColor = GargiColor.WhiteColor();
NavigationItem.SetLeftBarButtonItem(barBtnLeft, true);
Output :
EDIT :
After adding #SushiHangover code the Output is below
What I am Expected :
The Cancel Button have more space in the Left Side. How to set it to LeftSide as the backbutton.
My Require Output is below :
#SushiHangover final output :
var negativeSpace = new UIBarButtonItem (UIBarButtonSystemItem.FixedSpace);
negativeSpacae.Width = -8;
var leftBtn = new UIButton (new RectangleF (0, 0, 25, 25));
leftBtn.SetImage(UIImage.FromBundle("cancel_white_icon"), UIControlState.Normal);
leftBtn.TintColor = GargiColor.WhiteColor();
UIBarButtonItem [] bArray = {
negativeSpace, new UIBarButtonItem (leftBtn)
};
NavigationItem.SetLeftBarButtonItems (bArray, true);
Related
I have an application that from the main app "hamburger" menu, if an option is selected I want to show a PickerView for the user to select a number from.
Because it's needs to be accessible throughout the app from this menu I built the UIPickerView in the AppDelegate.cs (as that's where the UINavigationController code is and from that the menu).
Everything shows up correctly: User selected menu button -> menu displays -> User selects "Show Picker" button -> Picker displays with all items. But once the picker displays, you can't scroll the options, nor does the "Done" button I've added register clicks. In fact text fields from the ViewController behind this popup can be clicked on through the popup.
I'm not sure why this UIPickerView is non interactive, does anyone have some thoughts?
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
// create a new window instance based on the screen size
window = new UIWindow(UIScreen.MainScreen.Bounds);
// instantiate the navigation controller
nav = new UINavigationController(new SplashController());
vwNav = new UIView(nav.NavigationBar.Bounds);
var pickerView = new UIPickerView(new CGRect(275f, (UIScreen.MainScreen.Bounds.Size.Height / 2) - (375f / 2), 275f, 375f));
pickerView.ShowSelectionIndicator = true;
var myPickerViewModel = new PickerViewModel(itemList);
pickerView.Model = myPickerViewModel;
myPickerViewModel.PickerChanged += (sender, e) => {
var temp = myPickerViewModel.SelectedItem;
};
// Set up toolbar
var toolbar = new UIToolbar();
toolbar.SizeToFit();
toolbar.Hidden = false;
UILabel titleLabel = new UILabel();
titleLabel.Text = "Select an Item";
titleLabel.Frame = new RectangleF(75, 13, 200, 20);
UIButton doneButton = new UIButton(UIButtonType.Custom);
doneButton.Frame = new RectangleF(40, 335, (float)200, 30);
doneButton.SetTitle("Done", UIControlState.Normal);
doneButton.TouchDown += (sender, e) =>
{
pickerView.Hidden = true;
};
toolbar.AddSubview(titleLabel);
toolbar.AddSubview(doneButton);
pickerView.AddSubview(toolbar);
pickerView.Hidden = true;
btnMenu = new UIButton(UIButtonType.Custom);
btnMenu.Frame = new CGRect(vwNav.Frame.Right - 45, 0, 45, nav.NavigationBar.Bounds.Height);
btnMenu.SetImage(imgMenu, UIControlState.Normal);
btnMenu.SetImage(imgMenu, UIControlState.Selected);
btnMenu.TouchUpInside += (object sender, EventArgs e) =>
{
UIAlertView alert = new UIAlertView();
alert.Title = "Settings";
alert.AddButton("Open PickerView");
alert.AddButton("Exit");
alert.Dismissed += delegate (object alertSender, UIButtonEventArgs args)
{
if (args.ButtonIndex == 0)
{
pickerView.Hidden = false;
}
else
return;
}
}
vwNav.AddSubviews(btnMenu, pickerView);
nav.NavigationBar.Layer.BorderWidth = 2f;
nav.NavigationBar.Layer.BorderColor = (UIColor.FromPatternImage(imgNavBar)).CGColor;
nav.NavigationBar.AddSubviews(vwNav);
// If you have defined a root view controller, set it here:
this.window.RootViewController = nav;
this.window.MakeKeyAndVisible();
return true;
}
I removed some of the unrelated code (a few nav.PushViewController() for different screens and other menu options) to keep it as clear as I could.
From your code, the frame of vwNav is nav.NavigationBar.Bounds, and the frame of pickerView is new CGRect(275f, (UIScreen.MainScreen.Bounds.Size.Height / 2) - (375f / 2), 275f, 375f), if you add pickView to vwNav, the pickerView is out of bounds of vwNav.
Remember that views don't receive touch events where they're outside the bounds of their superview.
That's the cause of your issue.
Solution:
I don't think you should built the UIPickerView in the AppDelegate.cs, create it in your ViewController instead.
You can also add buttons to Navigationbar in ViewController :
UIBarButtonItem btn = new UIBarButtonItem();
btn.Image = UIImage.FromFile("Image");
btn.Clicked += (sender, e) => { System.Diagnostics.Debug.WriteLine("show picker"); };
NavigationItem.RightBarButtonItem = btn;
And remember to add picker to the View of Viewcontroller.
Refer: uinavigationitem and add-uibarbuttonitem-to-navigation-bar-in-xamarin-ios
Feel free to ask me any question:).
I'm trying to add multiple UIBarButtonItem items to the left, and one on the right. This worked fine up through iOS10, but iOS11 seems to have broken it.
This is all written with Xamarin, but the class/method names, etc., just about all map up, so answer however you want.
When using the simplest approach possible to add two buttons, setting an image/action directly on the button, I only get one of the two, and it's huge, and centered, and my title is lost:
var leftMenuBarBackBtn = new UIBarButtonItem(UIImage.FromBundle("arrowBackButton"), UIBarButtonItemStyle.Plain, leftBackButtonTap);
var leftMenuBarItem = new UIBarButtonItem(UIImage.FromBundle("menu"), UIBarButtonItemStyle.Plain, leftMenuButtonTap);
UIBarButtonItem[] navItems = {
leftMenuBarBackBtn,
leftMenuBarItem
};
var rightMenuBarItem = new UIBarButtonItem(UIImage.FromBundle("bell").ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal), UIBarButtonItemStyle.Plain, rightMenuButtonTap);
NavigationItem.LeftItemsSupplementBackButton = false;
NavigationItem.LeftBarButtonItems = navItems;
NavigationItem.RightBarButtonItem = rightMenuBarItem;
Previously we were creating UIImage items and adding them as custom views (please ignore the horrible practices, this was inherited):
var leftBackBtn = new UIButton(UIButtonType.Custom);
leftBackBtn.SetImage(UIImage.FromBundle("arrowBackButton").ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal), UIControlState.Normal);
leftBackBtn.Frame = new CGRect(0, 0, 27, 20);
leftBackBtn.ContentMode = UIViewContentMode.ScaleAspectFit;
leftBackBtn.TouchUpInside += leftBackButtonTap;
UIBarButtonItem leftMenuBarBackBtn = new UIBarButtonItem(leftBackBtn);
var leftMenuBtn = new UIButton(UIButtonType.Custom);
leftMenuBtn.SetImage(UIImage.FromBundle("menu").ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal), UIControlState.Normal);
leftMenuBtn.Frame = new CGRect(0, 0, 27, 20);
leftMenuBtn.ContentMode = UIViewContentMode.ScaleAspectFit;
leftMenuBtn.TouchUpInside += leftMenuButtonTap;
UIBarButtonItem leftMenuBarItem = new UIBarButtonItem(leftMenuBtn);
UIBarButtonItem[] navItems = { leftMenuBarBackBtn, leftMenuBarItem };
var rightMenuBtn = new UIButton(UIButtonType.Custom);
rightMenuBtn.SetImage(UIImage.FromBundle("bell").ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal), UIControlState.Normal);
rightMenuBtn.Frame = new CGRect(0, 0, 19, 22);
rightMenuBtn.ContentMode = UIViewContentMode.ScaleAspectFit;
rightMenuBtn.TouchUpInside += rightMenuButtonTap;
UIBarButtonItem righttMenuBarItem = new UIBarButtonItem(rightMenuBtn);
UIBarButtonItem[] navItems2 = { righttMenuBarItem };
this.NavigationItem.LeftBarButtonItems = navItems;
this.NavigationItem.RightBarButtonItems = navItems2;
I get a weird, stretched out 'back' button, and an extremely tiny hamburger menu:
Lastly, though I disagree with it, our client was insistent on a custom back button. When I went with what I would think is the proper approach, using the native back button, it somewhat works, and my title view is back. This'll work as a stop-gap but it's not really the UX we want:
var leftMenuBarItem = new UIBarButtonItem(UIImage.FromBundle("menu"), UIBarButtonItemStyle.Plain, leftMenuButtonTap);
var rightMenuBarItem = new UIBarButtonItem(UIImage.FromBundle("bell").ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal), UIBarButtonItemStyle.Plain, rightMenuButtonTap);
NavigationItem.LeftItemsSupplementBackButton = true;
NavigationItem.LeftBarButtonItem = leftMenuBarItem;
NavigationItem.RightBarButtonItem = rightMenuBarItem;
Thanks!
refer to UIBarButtonItem on iOS 11
UIBarButtonItem uses autolayout instead of dealing with frames.
That's why the button is got stretched .
Modify:
widthConstraint = leftBackBtn.WidthAnchor.ConstraintEqualTo(27);
heightConstraint = leftBackBtn.HeightAnchor.ConstraintEqualTo(20);
widthConstraint.Active = true;
heightConstraint.Active = true;
How to have a tag bubbles like in the attached image.I have done this for android using TagView component but not sure how to do it for Xamarin iOS?Any component that I can refer?
You will have to write this custom component yourself .
I would recommend having this designed in XIB/Storyboard and place em at runtime .
very rough idea to create one such subview programmitically could be something like
var myView = new UIView(frame: new CoreGraphics.CGRect(10, 10, 120, 40));
myView.BackgroundColor = UIColor.Blue;
myView.Layer.CornerRadius = 20;
var mylabel = new UILabel(frame: new CoreGraphics.CGRect(10, 10, 80, 40));
mylabel.Text = "MUMBAI";
myView.Add(mylabel);
UIButton button = new UIButton();
button.Frame = new CoreGraphics.CGRect(mylabel.Frame.X + mylabel.Frame.Width, 10f, 40, 25);
button.SetTitle("Title", UIControlState.Normal);
button.SetBackgroundImage(UIImage.FromBundle("MyImage"),UIControlState.Normal);
myView.Add(button);
View.Add(myView);
Here frame calculation you need to do ,above are just some sample frame I put .
so ultimately you gonna make such views stack em horizontally ,and when user clicks "x" button , you change the frame with animation .
Try this
https://github.com/nmilcoff/TagsView
It's super simple to get started:
public class ViewController : UIViewController
{
private TagListView tagsView;
public override void ViewDidLoad()
{
// code
this.tagsView = new TagListView()
{
// you can customize properties here!
};
this.View.AddSubview(this.tagsView);
this.View.AddConstraints(
// Add your constraints!
);
// you can attach a source object to each tag
var myObject = new MyModel { Title = "I'm a MyModel!" };
this.tagsView.AddTag(myObject.Title, myObject);
// but, if none is provided, it will be the text string
this.tagsView.AddTag("I'm a simple tag!");
}
}
I would like to wrap the text of my uiSegmentedControl to have more then one line in it.
Actually it looks like this. You see the middle option reads "search in title an...", which should be wrapped :
My Code is:
var sSearchinTitle=getStringResourceByName("searchtitle_" + AppProperties.sharedInstance.sAppLanguage);
var sSearchinPreface=getStringResourceByName("searchpreface_" + AppProperties.sharedInstance.sAppLanguage);
var sSearchOverall=getStringResourceByName("searchoverall_" + AppProperties.sharedInstance.sAppLanguage);
arraySearchTypes = [sSearchinTitle, sSearchinPreface, sSearchOverall];
segmentcontrol_SearchType = UISegmentedControl(items: arraySearchTypes);
let font = UIFont.systemFontOfSize(fFontsize_SearchtypeValues)
segmentcontrol_SearchType.setTitleTextAttributes([NSFontAttributeName: font], forState: UIControlState.Normal)
segmentcontrol_SearchType.frame.origin = CGPoint(x: spaceYElements, y: drawy);
segmentcontrol_SearchType.selectedSegmentIndex = saved_TextSizeTextViewer;
segmentcontrol_SearchType.sizeToFit();
self.view.addSubview(segmentcontrol_SearchType);
var segmentcontrolheigth=segmentcontrol_SearchType.frame.height;
var segmentcontrolwidth=segmentcontrol_SearchType.frame.width;
I found something in other forums which should be a solution for objective C, but I don't understand this :-)
[[UILabel appearanceWhenContainedIn:[UISegmentedControl class], nil] setNumberOfLines:0];
any help ? (thanks :-) )
UPDATE
I tried the following, which doesn't work either. I go through all UILabels and set the numberOfLines = 0;
segmentcontrol_SearchType = UISegmentedControl(items: arraySearchTypes);
let font = UIFont.systemFontOfSize(fFontsize_SearchtypeValues)
segmentcontrol_SearchType.setTitleTextAttributes([NSFontAttributeName: font], forState: UIControlState.Normal)
segmentcontrol_SearchType.frame.origin = CGPoint(x: spaceYElements, y: drawy);
segmentcontrol_SearchType.selectedSegmentIndex = saved_TextSizeTextViewer;
// Go through all sublabels and set wrapping
for labels in segmentcontrol_SearchType.subviews {
if labels.isKindOfClass(UILabel){
var myLabel:UILabel=labels as! UILabel;
myLabel.numberOfLines = 0;
}
}
segmentcontrol_SearchType.sizeToFit();
We are using Xamarin.Forms with Xamarin.Forms.Labs components for the ImageButton. This is iOS.
For some reason the ImageButton is changing the color of the image that we want to use in the control. The standard Button component does the same, however, the Image componet works fine.
In the image, you can see how we load the same file into an Image, ImageButton, and Button views, and you can see that the Image one is correct, but the other two are changed from red to blue.
Any idea how to make the ImageButton or Button component show the original image without altering the colors?.
Snippet:
// wrong colors
var addPins = new ImageButton() {
Image = (FileImageSource) ImageSource.FromFile("Marker.png"),
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Center,
ImageHeightRequest = 50,
ImageWidthRequest = 50,
HeightRequest = 50,
WidthRequest = 50
};
// good colors
var addPins2 = new Image {
Source = ImageSource.FromFile ("Marker.png"),
HeightRequest = 50,
WidthRequest = 50,
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Center
};
// wrong colors
var addPins3 = new Button {
Image = new FileImageSource { File = "Marker.png"} ,
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Center,
HeightRequest = 50,
WidthRequest = 50
};
grid.Children.Add (addPins, 1, 2);
grid.Children.Add (addPins2, 1, 1);
grid.Children.Add (addPins3, 1, 0);
Sample result: