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.
Related
I added an RoutingEffect in Xamarin Form project and PlatformEffect in my Xamarin.iOS project. It will add effect to Stacklayout. The Stacklayout in this demo is a custom navigation bar. The below of navigation bar is a scrollview has many cells (label, entry, picker).
I implemented in Android is OK.
But in iOS has problem: Shadow effect cannot overlays some controls, such as: Entry, Editor, Picker. Could you share me how to fix it?
This is code in Xamarin.iOS project.
public class DropShadowEffect : PlatformEffect
{
protected override void OnAttached()
{
try
{
var effect = (myDemo.UIControls.DropShadowEffect)Element.Effects.FirstOrDefault(e => e is myDemo.UIControls.DropShadowEffect);
if (effect != null)
{
Container.Layer.CornerRadius = effect.Radius;
Container.Layer.ShadowColor = UIColor.Red.CGColor;// effect.Color.ToCGColor();
Container.Layer.ShadowOffset = new CGSize(effect.DistanceX, effect.DistanceY);
Container.Layer.ShadowOpacity = 0.8f;
Container.Layer.ShadowRadius = 2f;
Container.Layer.ShouldRasterize = true;
Container.Layer.MasksToBounds = false;
}
}
catch (Exception ex)
{
Console.WriteLine("Cannot set property on attached control. Error: {0}", ex.Message);
}
}
*Shadow effect overly Label is OK
*Shadow effect cannot overlay either Picker or Entry
Cause:
Actually, such as Label will still overlay the shadow.But it doesn't seem obvious.If you set the background of label (such as red ),you will see the overlay.
Solution:
You can set the BackgroundColor of the Picker and Entry in the custom renderer to let the alpha as 0.
For example in EntryRenderer
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.BackgroundColor = new UIColor(1,1,1,0);//The last parameter sets the alpha of backgound as transparent
Control.Layer.MasksToBounds = true;
Control.Layer.CornerRadius = xxx; //set the rounded corner
Control.Layer.BorderColor = UIColor.xxx.CGColor;
Control.Layer.BorderWidth = xxx;
}
}
I'm currently developing a mobile application with JavaFX, using GluonHQ and JavaFXPorts. One of my screens contains a listview as you can see from the screenshot below, which was taken from my iPhone 6.
I have noticed the following problems with the scrollbar in mobile devices:
The first time i touch the screen the scroll bar appears a bit off place and then moves to the correct right position. This just happens quickly only the first time. (Screenshot)
I noticed that the scrollbar appears every time i touch the screen and not only when I touch and drag. On native iOS applications the scrollbar appears only when you touch and drag. If you keep your finger on screen and then remove it the scrollbar does not appear.
The scrollbar always takes some time to disappear when I remove my finger from the screen, whilst in native apps it disappears instantly.
Can anyone help me on fixing these issues. How can you define the time the scrollbar appears before it hides again?
You can experience this situation by just creating a ListView and load it with some items.
UPDATE
Thanks to the answer of Jose Pereda below, I have managed to overcome all three problems described above. Here is the code I used to reach the desired results. Watch this short video to get a quick idea of how the new scrolling bar appears and behaves. Again, Jose, you are the boss! Please go ahead with any comments for improvement.
public class ScrollBarView {
public static void changeView(ListView<?> listView) {
listView.skinProperty().addListener(new ChangeListener<Object>() {
private StackPane thumb;
private ScrollBar scrollBar;
boolean touchReleased = true, inertia = false;
#Override
public void changed(ObservableValue<? extends Object> observable, Object oldValue, Object newValue) {
scrollBar = (ScrollBar) listView.lookup(".scroll-bar");
// "hide" thumb as soon as the scroll ends
listView.setOnScrollFinished(e -> {
if (thumb != null) {
touchReleased = true;
playAnimation();
} // if
});
// Fix for 1. When user touches first time, the bar is set invisible so that user cannot see it is
// placed in the wrong position.
listView.setOnTouchPressed(e -> {
if (thumb == null) {
thumb = (StackPane) scrollBar.lookup(".thumb");
thumb.setOpacity(0);
initHideBarAnimation();
} // if
});
// Try to play animation whenever an inertia scroll takes place
listView.addEventFilter(ScrollEvent.SCROLL, e -> {
inertia = e.isInertia();
playAnimation();
});
// As soon as the scrolling starts the thumb become visible.
listView.setOnScrollStarted(e -> {
sbTouchTimeline.stop();
thumb.setOpacity(1);
touchReleased = false;
});
} // changed
private Timeline sbTouchTimeline;
private KeyFrame sbTouchKF1, sbTouchKF2;
// Initialize the animation that hides the thumb when no scrolling takes place.
private void initHideBarAnimation() {
if (sbTouchTimeline == null) {
sbTouchTimeline = new Timeline();
sbTouchKF1 = new KeyFrame(Duration.millis(50), new KeyValue(thumb.opacityProperty(), 1));
sbTouchKF2 = new KeyFrame(Duration.millis(200), (e) -> inertia = false, new KeyValue(thumb.opacityProperty(), 0));
sbTouchTimeline.getKeyFrames().addAll(sbTouchKF1, sbTouchKF2);
} // if
} // initHideBarAnimation
// Play animation whenever touch is released, and when an inertia scroll is running but thumb reached its bounds.
private void playAnimation() {
if(touchReleased)
if(!inertia || (scrollBar.getValue() != 0.0 && scrollBar.getValue() != 1))
sbTouchTimeline.playFromStart();
} // playAnimation()
});
} // changeView
} // ScrollBarView
As mentioned in the comments, the first issue is known, and for now it hasn't been fixed. The problem seems to be related to the initial width of the scrollbar (20 pixels as in desktop), and then is set to 8 pixels (as in touch enabled devices), and moved to its final position with this visible shift of 12 pixels to the right.
As for the second and third issues, if you don't want to patch and build the JDK yourself, it is possible to override the default behavior, as the ScrollBar control is part of the VirtualFlow control of a ListView, and both can be found on runtime via lookups.
Once you have the control, you can play with its visibility according to your needs. The only problem with this property is that it is already bound and constantly called from the layoutChildren method.
This is quite a hacky solution, but it works for both 2) and 3):
public class BasicView extends View {
private final ListView<String> listView;
private ScrollBar scrollbar;
private StackPane thumb;
public BasicView(String name) {
super(name);
listView = new ListView<>();
// add your items
final InvalidationListener skinListener = new InvalidationListener() {
#Override
public void invalidated(Observable observable) {
if (listView.getSkin() != null) {
listView.skinProperty().removeListener(this);
scrollbar = (ScrollBar) listView.lookup(".scroll-bar");
listView.setOnScrollFinished(e -> {
if (thumb != null) {
// "hide" thumb as soon as scroll/drag ends
thumb.setStyle("-fx-background-color: transparent;");
}
});
listView.setOnScrollStarted(e -> {
if (thumb == null) {
thumb = (StackPane) scrollbar.lookup(".thumb");
}
if (thumb != null) {
// "show" thumb again only when scroll/drag starts
thumb.setStyle("-fx-background-color: #898989;");
}
});
}
}
};
listView.skinProperty().addListener(skinListener);
setCenter(listView);
}
}
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
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);
I need to create yes/no confirmation dialog in a foreign language. I think I need to create my own class by extending Dialog ?
Thanks
this should do the trick. My apologies to any Swedish chefs watching.
int answer = Dialog.ask("Gersh gurndy morn-dee burn-dee, burn-dee, flip-flip-flip-flip-flip-flip-flip-flip-flip?", new String[] {"Hokey dokey","Bork bork bork"}, new int[] {Dialog.OK,Dialog.CANCEL}, Dialog.CANCEL);
Edits:
The above explained better:
public final static int NEGATIVE = 0;
public final static int AFIRMATIVE = 1;
public final static int DEFAULT = NEGATIVE;
int answer = Dialog.ask("question?", new String[] {"afirmative button label", "negative button label"}, new int[] {AFIRMATIVE,NEGATIVE}, DEFAULT);
As you can see from the above it is possible to change all the text (language) values on a Dialog just by using this method so you shouldn't need a custom class to create a Dialog in another language.
It's even simpler if you use the standard BB localizing approach the simpler method (Dialog.ask(res.getString(SOMEQUESTION)) will automatically have it's afirmative and negative buttons adjusted for the language set in the phones options. You will only need to add the question as a string resource.
You can find a list of valid methods and constructors here:
http://www.blackberry.com/developers/docs/5.0.0api/net/rim/device/api/ui/component/Dialog.html
More Edits below:
I thought my above answer was what you were after but if you do need to further customize the dialog in a new class you may do it like this:
public class MyDialogScreen extends MainScreen implements LocalResource {
private int exitState;
...
protected void sublayout( int width, int height ) {
setExtent( dialogWidth, dialogHeight );
setPosition( XPOS, YPOS );
layoutDelegate( dialogWidth, dialogHeight );
}
// do some stuff and assign exitState appropriately
// e.g. a button that sets exitState = 1 then pops this screen
// another button that sets exitState = 2 then pops this screen
...
public int getExitState()
{
return this.exitState;
}
In the above I've created a new screen and I have overridden the sublayout method to specify a custom width, height and xy positions in layoutDelegate. When you push this screen you will see it as a dialog like box above the previous screen on the stack at the XY positions you specified.
Make sure to use pushModal. This will allow you to access the getExitState method after the screen has been popped from the display stack.
E.g
MyDialogScreen dialog = new MyDialogScreen();
UiApplication.getUiApplication().pushModalScreen(dialog);
int result = dialog.getExitState();
Cheers
Ray