I have a problem with Xamarin.Forms (version 1.2.2) on Android (Nexus 5).
The alignment of Button.Text is often not centered after performing a click.
In a short project, I figured out, that updating the UI causes the problem.
public class App
{
public static Page GetMainPage()
{
var label = new Label {
Text = "label",
};
var buttonBad = new Button {
Text = "buttonBad",
Command = new Command(() => label.Text += "1"),
};
var buttonGood = new Button {
Text = "buttonGood",
};
return new ContentPage {
Content = new StackLayout {
Children = {
buttonBad,
buttonGood,
label,
}
}
};
}
}
A click on "buttonBad" (updating the label.Text) causes the text-alignment of this button to not be centered anymore. A click on "buttonGood" does not cause the problem.
Is there a good workaround to solve this problem?
This workaround seems to be too complicated:
http://forums.xamarin.com/discussion/20608/fix-for-button-layout-bug-on-android
edit:
A programatically edit of the UI also cases the bug. Changing the label.Text in an async method after a short waiting leads the "buttonGood" to align its text wrong after a click.
edit2:
I created an example / test project on GitHub:
https://github.com/perpetual-mobile/ButtonTextAlignmentBug.git
The alignment is correct, when the StackLayout is replaced by an AbsolutLayout, but i need the StackLayout to work well.
Ok, after hours of dealing with this silly bug, I resolved it by implementing a custom renderer and overriding ChildDrawableStateChanged:
public override void ChildDrawableStateChanged(Android.Views.View child)
{
base.ChildDrawableStateChanged(child);
Control.Text = Control.Text;
}
Related
I have the following structure.
Frame frame = new Frame();
Grid grid = new Grid();
ContentView contentView = new ContentView();
contentView.GestureRecognizers.Add(CreateSwipeEffect());
grid.Children.Add(contentView, 0, 0);
frame.GestureRecognizers.Add(CreateFrameTapEffect());
frame.Content = grid;
Frame has available two effects: first we can swipe(PanGesture) and second we can tap(TapGesture). On iOS platform this solution perfectly works. However on Android platform only swipe effect is firing. How can I solve this to have both effects available for Android platform?
I use your code in iOS and Android, yes, it works fine on iOS, and have issue on Android.
But if you add tapGenture and panGesture after you add label or frame control, it can works fine. Maybe some mechanisms of Android are a little different from iOS. Please take a look the following code, I test it on Android and iOS, it all works fine.
public Page17()
{
InitializeComponent();
var panGesture = new PanGestureRecognizer();
panGesture.PanUpdated += PanGesture_PanUpdated;
var tapGenture = new TapGestureRecognizer();
tapGenture.NumberOfTapsRequired = 1;
tapGenture.Tapped += TapGenture_Tapped;
Frame frame = new Frame();
frame.BackgroundColor = Color.AliceBlue;
Grid grid = new Grid();
Label label= new Label();
label.Text = "this is test!";
label.BackgroundColor = Color.Red;
grid.Children.Add(label,0,0);
frame.Content = grid;
stacklayout1.Children.Add(frame);
frame.GestureRecognizers.Add(tapGenture);
label.GestureRecognizers.Add(panGesture);
}
private void TapGenture_Tapped(object sender, EventArgs e)
{
Console.WriteLine("the tapgesture fire!");
}
private void PanGesture_PanUpdated(object sender, PanUpdatedEventArgs e)
{
Console.WriteLine("the pangesture fire");
}
You are dispatching Tap Event to Frame(parent) and Swip Event to ContentView(childview).
According to Input events overview:
Remember that hardware key events are always delivered to the View
currently in focus. They are dispatched starting from the top of the
View hierarchy, and then down, until they reach the appropriate
destination.
So based on your codes when you are tapping on the Frame, android system thought you want to fire the tap event on ContentView(which doesn't exist) because current focus is the contentview not the frame. So if you have specific needs to do that, you need to try other ways to implement it. If not, please register the tap event on ContentView.
I am struggling how I could replicate the drop-down ToolbarItem from Xamarin.Forms when a ToolbarItem's order is set to Secondary for IOS, in order for it to look like it does for Android.
Here are some images to better explain what I am looking for:
How it works on Android:
Code:
ToolbarItem toolbarItem = new ToolbarItem()
{
Text = "ToolbarItem",
Order = ToolbarItemOrder.Secondary
};
Images on how it looks on Android:
Image showing the "More" icon
Image showing the "More" icon expanded to show more toolbar items
There is no default "More" icon on the toolbar when setting the Order to Secondary in iOS. Instead what happens, is that a bar below the navigation bar is created, which includes all of the toolbar items - something I do not wish to have for my Application.
This is an example of how it has been achieved before on IOS:
A screenshot I took from one of my Apps that implements this
effect
In native iOS, you can use UIPopoverController to achieve your effect. But please notice that this control can only be used in iPad.
Since you are using Xamarin.Forms, we can create a custom renderer in iOS platform to get this.
Firstly, create a page renderer to display the UIPopoverController. We can show it from a UIBarButtonItem or a UIView depending on your request. Here I use UIBarButtonItem like:
//I defined the navigateItem in the method ViewWillAppear
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
rightItem = new UIBarButtonItem("More", UIBarButtonItemStyle.Plain, (sender, args) =>
{
UIPopoverController popView = new UIPopoverController(new ContentViewController());
popView.PopoverContentSize = new CGSize(200, 300);
popView.PresentFromBarButtonItem(rightItem, UIPopoverArrowDirection.Any, true);
});
NavigationController.TopViewController.NavigationItem.SetRightBarButtonItem(leftItem, true);
}
Secondly, construct the content ViewController in the UIPopoverController(just like the secondary list in android):
public class ContentViewController : UIViewController
{
public override void ViewDidLoad()
{
base.ViewDidLoad();
UITableView tableView = new UITableView(new CGRect(0, 0, 200, 300));
tableView.Source = new MyTableViewSource();
View.AddSubview(tableView);
}
}
public class MyTableViewSource : UITableViewSource
{
public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
{
UITableViewCell cell = tableView.DequeueReusableCell(new NSString("Cell"));
if (cell == null)
{
cell = new UITableViewCell(UITableViewCellStyle.Default, new NSString("Cell"));
}
cell.TextLabel.Text = "Item" + indexPath.Row;
return cell;
}
public override nint RowsInSection(UITableView tableview, nint section)
{
return 10;
}
}
At last we can show it on the screen by calling PresentFromBarButtonItem.
I've got one problem with paste into a textfield in an codenameone app with android 4.1.1 and also 4.3: When I tip on the cursor the context-menu "paste" is shown - but very short and disappears then. I have no chance to paste a text in a textfield.
Under iOS I have no problem with it.
Do you have any idea?
Kind regards
Klaus
Can be reproduced with an empty App like this:
public void start()
{
if (current != null)
{
current.show();
return;
}
Form hi = new Form("Hi World");
hi.setScrollableY(true);
hi.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
TextField tmpTextField = new TextField();
Container tmpInnerContainer = new Container(new BoxLayout(BoxLayout.X_AXIS));
tmpInnerContainer.add(tmpTextField);
hi.add(tmpInnerContainer);
tmpTextField.setText("Textfield with a very long Text in it, Textfield with a very long Text in it");
hi.show();
}
I'm new to Xamarin.
Could you write me the code for adding a button in Xamarin.Forms?
Maybe you should get started with this introduction. It explains how get started with Xamarin forms.
https://developer.xamarin.com/guides/xamarin-forms/getting-started/introduction-to-xamarin-forms/
public class App : Application
{
public App ()
{
// The root page of your application
MainPage =new ContentPage{
Content= new Button{Text="Hello World",BackgroundColor=Color.Black,HorizontalOptions=LayoutOptions.Center,VerticalOptions=LayoutOptions.Center,TextColor=Color.White}
};
}
}
Above snippet will create a Page with a Button having text Hello World centered horizontally and vertically in the page and set it as the LaunchPage of the application. This is an example of how you can have button programmatically.
There is also the Xamarin forms quick start which runs through an example that adds buttons to the UI.
From example :
xaml:
<Button x:Name="translateButon" Text="Translate" Clicked="OnTranslate" />
bound command in cs:
void OnTranslate (object sender, EventArgs e)
{
translatedNumber = Core.PhonewordTranslator.ToNumber (phoneNumberText.Text);
if (!string.IsNullOrWhiteSpace (translatedNumber)) {
callButton.IsEnabled = true;
callButton.Text = "Call " + translatedNumber;
} else {
callButton.IsEnabled = false;
callButton.Text = "Call";
}
}
Button is something like
Button b = new Button();
Then you should add a button to a layout
StackLayout SL = new StackLayout();
SL.Children.Add(b);
Then set your content page to stacklayout
I'm running into a strange issue when adding a Toolbar to my Form in my Codenameone app. If I set a toolbar on my form, it shows another title with the toolbar hamburger and new title below the title of the previous form instead of replacing it like I would expect. It looks like this:
The functionality works fine replacing the old title like I would expect when I run in the Codenameone simulator, but I get this weird behavior shown in the image when I make an Android build and run it on a Nexus 5 (6.0.1). The back arrow and "12 of 12" is the title from the previousForm
This is my code, am I doing anything wrong here with the Toolbar usage?
void goShowResource(final Form previousForm) {
previous = previousForm;
final Toolbar bar = new Toolbar();
final Form rd = new Form("resource details");
final Resource thisResource = this;
rd.setToolbar(bar);
bar.addCommandToSideMenu(new Command("command 1") {
#Override
public void actionPerformed(ActionEvent evt) {
AddResources ar = new AddResources(settings, thisResource);
ar.goAddResources(rd);
}
});
bar.addCommandToSideMenu(new Command("command 2") {
#Override
public void actionPerformed(ActionEvent evt){
UpdateResource ur = new UpdateResource(settings);
ur.goUpdateResource(rd, thisResource);
}
});
rd.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
showDetails(rd);
rd.show();
}
edit: Additonal info, if I open the sidemenu once, the old title bar at the top shrinks away, and I'm left with the the single correct yet incorrectly formatted title area.
You should use the Toolbar for all the forms in the app or disable the default which is native menu bar when working with the toolbar. You can do the latter by editing the theme and selecting the constants tab then pressing "Add" and selecting commandBehavior=Side.
Android currently defaults to the native ActionBar behavior and Toolbar implicitly overrides that, however when a transition occurs from the native to the lightweight component things can get pretty hairy (and might also look unnatural) so we recommend picking one UI paradigm and going with it.
Since the ActionBar is a volatile API we recommend Toolbar going forward as its far more customizable and gives us a lot of control.
This can be fixed by removing all command from the form after setting the toolbar, then add a fresh back command to the toolbar if required.
void goShowResource(final Form previousForm) {
previous = previousForm;
final Toolbar bar = new Toolbar();
final Form rd = new Form("resource details");
final Resource thisResource = this;
rd.removeAllCommands();
rd.setBackCommand(null);
rd.setToolbar(bar);
//Add back command
Command back = new Command("back") {
#Override
public void actionPerformed(ActionEvent evt) {
previousForm.showBack();
}
};
bar.addCommandToSideMenu(back);
bar.addCommandToSideMenu(new Command("command 1") {
#Override
public void actionPerformed(ActionEvent evt) {
AddResources ar = new AddResources(settings, thisResource);
ar.goAddResources(rd);
}
});
bar.addCommandToSideMenu(new Command("command 2") {
#Override
public void actionPerformed(ActionEvent evt){
UpdateResource ur = new UpdateResource(settings);
ur.goUpdateResource(rd, thisResource);
}
});
rd.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
showDetails(rd);
rd.show();
}