Combine TapGestureRecognizer and PanGestureRecognizer in Xamarin Android - android

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.

Related

Uno Platform - Android NumberPicker doesn't render properly until you interact with the picker

I'm trying to use Android's Native NumberPicker in an Uno Platform app. What happens is that the Selected value of the picker is left-aligned until I interact with or tap the picker and then the item becomes centered.
This is the code
<android:Grid x:Name="Picker">
<widget:NumberPicker
MinValue="1"
MaxValue="100"
Value="45"/>
</android:Grid>
and this is the result
As soon as I tap or scroll the picker it renders properly
Additional info:
I'm using Uno.UI 2.1.37
TargetFrameworkVersion v9.0
What I tried:
Programmatically tapping the picker
Setting DescendantFocusability to DescendantFocusability.BlockDescendants
If I create a separate Activity (and call StartActivity from MainActivity) which has the NumberPicker then the picker renders correctly on first load. Here's the code
[Activity(Label = "NumberPickerActivity")]
public class NumberPickerActivity : Activity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
var picker = new NumberPicker(this)
{
MinValue = 1,
MaxValue = 100,
Value = 45,
WrapSelectorWheel = false
};
picker.LayoutParameters = new ViewGroup.LayoutParams(500, 350);
var layout = new RelativeLayout(this);
layout.AddChild(picker);
SetContentView(layout);
}
}
and here's the result
so it definitely seems like the issue is only when rendering the native control within a UWP control.
Thanks in advance

Replicating the drop-down ToolbarItem "More" in Xamarin.Forms

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.

Images and Checkboxes with the Microsoft Band 2

I am trying to create a tile on the Microsoft Band 2 using Android Studio. I was wondering if it is possible to add images to a button like I would be able to on an android phone. My other question is about checkboxes. Are there checkboxes on the band? If not is there another way to get similar functionality? I need users to be able to click multiple things for a single question. Any help would be greatly appreciated.
For the checkboxes I would do a layout where you have a small text button next to a larger text button within a layout. When the large text button gets clicked, call an update function from your receiver that changes the text of the smaller button (possibly an asterisk or some other character that looks like a bullet point and it seems to appear and disappear). For example, your update function could look like this (slight modification from the example tile code given in the SDK):
private final int bulletTextId = 12;
private final int textButtonId = 21;
private boolean isActiveBullet = false;
private void onButtonClicked(int clickedID) {
switch (clickedID) {
case textButtonId:
String text = "";
isActiveBullet = !isActiveBullet;
if (isActiveBullet) text = "*";
try {
client.getTileManager().setPages(tileId,
new PageData(pageId1, 0)
.update(new TextBlockData(bulletTextId, text))
.update(new TextButtonData(textButtonId, "Text Button")));
} catch (BandIOException e) {e.printStackTrace();}
break;
default:
Log.e("", "Unknown button press received");
}
}
For multiple buttons you might need a map of button to boolean and switch the corresponding ones. If you can't figure that out, comment and I'll follow up.
Originally I was thinking it would make sense to change the background color, but that doesn't seem to be supported by the sdk.
As for using an image for the background, I don't think that is currently supported, just from looking at the function definitions in the sdk source code, but I would actually love to know that for sure as well.
Edit: I found this shortly after posting. It appears you can use bitmaps as masks, but I am not sure how to do that. Hopefully someone will come along and tell us because I would like to know too :)
"8.5.1
Icons Used as
FilledButton
Masks
By defining an Icon bitmap that acts as a mask and
then
superimposing that Icon over a
FilledButton
(see
Negative
Margins
)
, you can create the effect of the Icon image becoming visible when the button is pressed. That is, the
Icon bitmap
is defined to
have transparent pixels for the desired image, and opaque pixels els
e
where
. When the
user presses the
FilledButton
, the
FilledButton
color changes
but
shows through
only
the
transparent portions of
the Icon bitmap. "
And here is other relevant code if you want it:
private PageLayout createButtonLayout() {
return new PageLayout(
new ScrollFlowPanel(15, 0, 260, 105, FlowPanelOrientation.HORIZONTAL)
.addElements(new TextBlock(0, 0, 20, 45, TextBlockFont.MEDIUM)
.setMargins(5, 0, 0, 0)
.setId(bulletTextId))
.addElements(new TextButton(0, 0, 190, 45).setMargins(5, 0, 0, 0)
.setId(textButtonId).setPressedColor(Color.BLUE))
);
}
private BroadcastReceiver messageReceiver = new BroadcastReceiver() {
#Override
public void onReceive(Context context, Intent intent) {
if (intent.getAction() == TileEvent.ACTION_TILE_OPENED) {
} else if (intent.getAction() == TileEvent.ACTION_TILE_CLOSED) {
}
/* ***** THIS IS THE ONLY EVENT WE ACTUALLY CARE ABOUT ***** */
else if (intent.getAction() == TileEvent.ACTION_TILE_BUTTON_PRESSED) {
TileButtonEvent buttonData = intent.getParcelableExtra(TileEvent.TILE_EVENT_DATA);
appendToUI("button is " + isActiveBullet + " ");
onButtonClicked(buttonData.getElementID());
}
}
};

Xamarin.Forms: wrong button text alignment after click (Android)

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

Get the position of the selected row from ScrollPickerView ( a custom ui picker view for android )

I am developing in android and i have a requirement for making a custom ui picker view like the one in iphone for which i am using the code from the link
http://code.google.com/p/scroll-picker-view-for-android/
here in the
scrollPickerViewListener = this;
scrollPickerView = new ScrollPickerView(this);
scrollPickerView.addSlot(getResources().getStringArray(R.array.custom_list), 1, ScrollPickerView.ScrollType.Ranged);
scrollPickerView.setSlotIndex(0, 13);
ViewGroup.LayoutParams params = new
ViewGroup.LayoutParams(LayoutParams.FILL_PARENT, 200);
this.setContentView(scrollPickerView, params);
how to get the index of the selected item from the pickerview when the user scrolls
I would first ask why you would want to create an iPhone picker instead of using ones made for Android, anyways...
I checked some of the source code of the library you are using and it seems that the developer of this library thought it was funny to leave absolutely no comments behind. It extends from a ListView so it shouldn't be that hard.
A quick glance shows a ScrollPickerViewListener. You should probably use that. Try this.
scrollPickerView.setScrollPickerViewListener(){
public void onSingleTapUp(int index){
}
}
Or...
#Override
public void onSingleTapUp(int slotId) {
Toast.makeText(this, ""+slotId, Toast.LENGTH_SHORT).show();
}

Categories

Resources