I have just updated my code to use the latest 2.4.0-alpha05 for the navigation component and I have custom navigation between the multiple stacks and my main nav graph is like the documentation I found.
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:startDestination="#+id/accounts"
android:id="#+id/bottom_nav">
<inclue app:graph="#navigation/accounts_tab_nav"/>
<include app:graph="#navigation/contact_tab_nav" />
<include app:graph="#navigation/profile_tab_nav" />
</navigation>
Most of my stacks animate with a slide from right to left. It looks like that when I am on the second screen, in let's say the profile screen, and then switch to the first tab it triggers the popEnter en popExitAnim that are defined in the action that leads to the second screen in the profile tab. Like so:
<fragment
android:id="#+id/profileMain"
android:name="com.app.ProfileFragment"
tools:layout="#layout/fragment_profile">
<action
android:id="#+id/action_profileMain_to_secondFragment"
app:destination="#id/secondFragment"
app:enterAnim="#anim/slide_in_right"
app:exitAnim="#anim/slide_out_left"
app:popEnterAnim="#anim/slide_in_left"
app:popExitAnim="#anim/slide_out_right" />
</fragment>
But obviously I want tho use the (default) fade animation when switching tabs. So how should I do that?
And I would like to pop to the root of the stack when reselecting a tab. But I probably have to do that myself?
I came up with a solution that seems to work for me, but I have to admit it feels a little bit hacky.
I have a public flag in my MainActivity:
var tabWasSelected = false
Then I remember if a tab item was selected in setOnItemSelectedListener
// always show selected Bottom Navigation item as selected (return true)
bottomNavigationView.setOnItemSelectedListener { item ->
// In order to get the expected behavior, you have to call default Navigation method manually
NavigationUI.onNavDestinationSelected(item, navController)
// set flag so that the fragment can call the correct animation on tab change in onCreateAnimation
tabWasSelected = true
return#setOnItemSelectedListener true
}
This will always select the item and navigate to the associated destination while maintaining multiple back stacks.
I then have created a Fragment class which all my other fragments inherit from. It simply overrides onCreateAnimation to set the correct animation. Here is what it looks like:
open class MyFragment: Fragment() {
override fun onCreateAnimation(transit: Int, enter: Boolean, nextAnim: Int): Animation? {
val activity = requireActivity()
if (activity is MainActivity) {
if (activity.tabWasSelected) {
if (enter) {
//flow is exit first, then enter, so we have to reset the flag on enter
//in order that following animations will run as defined in the nav graph
activity.tabWasSelected = false
return AnimationUtils.loadAnimation(requireContext(), R.anim.nav_default_pop_enter_anim)
} else {
return AnimationUtils.loadAnimation(requireContext(), R.anim.nav_default_pop_exit_anim)
}
}
}
//no tab was selected, so run the defined animation
return super.onCreateAnimation(transit, enter, nextAnim)
}
}
Instead of using setupWithNavController function, follow this way.
First, create your NavOptions which include animation shown below.
val options = NavOptions.Builder()
.setLaunchSingleTop(true)
.setEnterAnim(R.anim.enter_from_bottom)
.setExitAnim(R.anim.exit_to_top)
.setPopEnterAnim(R.anim.enter_from_top)
.setPopExitAnim(R.anim.exit_to_bottom)
.setPopUpTo(navController.graph.startDestination,false)
.build();
Then use setOnNavigationItemSelectedListener to navigate with animation like that.
bottomNavigationView.setOnNavigationItemSelectedListener
{ item ->
when(item.itemId) {
R.id.fragmentFirst -> {
navController.navigate(R.id.fragmentFirst,null,options)
}
R.id.fragmentSecond -> {
navigate(R.id.fragmentSecond,null,options)
}
R.id.fragmentThird -> {
navController.navigate(R.id.fragmentThird,null,options)
}
}
}
Finally, you should prevent same item selection case so you can add below code.
bottomNavigationView.setOnNavigationItemReselectedListener
{ item ->
return#setOnNavigationItemReselectedListener
}
I used bottomNavigation like that in my project to add animation for page transitions. I hope it helped.
Related
I'd like to append a new menu entry right below "Enter Full Screen", but I am failing to find the right CommandGroupPlacement property.
CommandGroup(after: .<what needs to be put here??>) {
//my buttons here
}
Attempting to override "View" results in just another group with the same name (see image).
CommandMenu("View") {
//add button here
}
Shoutout to Majid Jabrayilov for his blogpost on this: https://swiftwithmajid.com/2020/11/24/commands-in-swiftui/
To find a solution to my above issue though I still had to think a bit around the corner–what does work is this:
CommandGroup(before: .toolbar) {
Button("Foo") {
}
}
This works, because the toolbar menu entry is located within "View" (even thought I don't have a toolbar in my app, the placement still works nonetheless...)
You said you were looking for the proper CommandGroupPlacement so for your case (relative to full screen mode), you would technically want CommandGroupPlacement.sidebar. CommandGroupPlacement.toolbar works because toolbar options live in the View menu, though you have none set.
/// Example in a CommandsBuilder
CommandGroup(after: CommandGroupPlacement.sidebar) {
Button("New View Action", action: { print("After sidebar menu options") }).keyboardShortcut("s", modifiers: [.command, .option, .control, .function]
}
This should also come in handy for others. The Apple documentation that corresponds to this: CommandGroupPlacement
TLDR:
I have the ref of my tabs
#ViewChild('tabsPage') tabRef: Tabs;
I need to get the nav stack of the current tab, check if it can go back and do go back if needed.
Full story:
I have a tabs page which I arrive from another page with a custom animation.
The behavior of my tabs when the user presses the hardware back button must be as follow:
If the user is in the tab 0, go back with custom animation;
If the user isn't in the tab 0, go to tab 0;
If the user has navigated in the current tab, go back in the nav stack of that tab.
Trying to achieve that behavior, I used this code in my tab root page, inside of ionViewDidEnter():
if (this.tabRef.getSelected().index == 0) {
this.navCtrl.pop({
animation: 'nav-shrink'
, direction: 'back'
})
} else {
this.tabRef.select(0);
}
The problem is: when I have navigated in another tab, the back button won't go back in the tab (from the detail to the list, for instance), it will go back to the tab 0 at once.
ionViewWillLeave() isn't called when I navigate further in any tab, so i can't deregister the backButtonAction.
The solution would be to check if the current tab can go back, so, instead of going to tab 0 or going back from the tabs page with a custom animation, I would just nav.pop() the current tab.
https://ionicframework.com/docs/v2/api/navigation/NavController/
canGoBack()
Returns true if there’s a valid previous page that we can pop back to. Otherwise returns false.
Apparently, the Tab itself is the NavController. So I solved my problem this way:
if (this.tabRef.getSelected().canGoBack()) {
this.tabRef.getSelected().pop();
} else if (this.tabRef.getSelected().index == 0) {
this.navCtrl.pop({
animation: 'nav-shrink'
, direction: 'back'
})
} else {
this.tabRef.select(0);
}
I've been stuck on this issue for about a week now, and I am not exactly sure how to solve it.
What I am trying to do is set the focus of ember-power-select from triggering an
I am currently able to set focus to the power select via tabbing or clicking, however I can't seem to gain its focus from another action.
(Like the hacky way I can think of is to call handleFocus directly and pass a select object)
In Component.hbs:
{{#power-select
class='ls-search-box'
options=searchList
selected=selected
onfocus=(action "handleFocus") as |item|
}}
In Component.js:
actions: {
handleFocus(select, e){
select.actions.open()
},
focusSearch(){
//console.log('focus Search');
var input = Ember.$(".ls-search-box");
if(input) {
input.focus();
}
}
}
Any know what I should do?
You need to change focusSearch like :
focusSearch(){
//console.log('focus Search');
var input = Ember.$(".ls-search-box > .ember-power-select-trigger");
if(input) {
input.focus();
}
}
You used a wrong css selector
I am trying to create a List which behaves like, for example, the Finder Menu on my Mac. In other words if I click on a List Item, keep my mouse down and move up and down the List I want the Selected Item to change.
In my Flex application if I click on my List and then, with the mouse still down, move up and down the List the Selected Item remains the same.
Any advice would be gratefully received.
Thanks
In StackOverflow tradition I am posting a solution to my own problem after working at it more:
I had an ItemRenderer on my List. In the ItemRenderer I declared a variable to hold a reference to the owning List.
private var _parentList:List;
In the 'set data' function I set this variable to the owner List.
override public function set data(value:Object):void {
super.data = value;
// Check to see if the data property is null.
if (value == null)
return;
// If the data property is not null.
// Get a reference to the parent list.
_parentList = this.owner as List;
...
I then added an EventListener to listen for MouseDown events.
// Attach an eventListener to the ItemRenderer.
this.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
...
My onMouseOver handler looks like this.
private function onMouseOver(event:MouseEvent):void {
//trace(data.LocationName);
if (event.buttonDown == true) {
_parentList.selectedIndex = itemIndex;
}
}
So with this in place I can mouse-down on my List and keeping the mouse button depressed move up and down the List with the List Item beneath the cursor always being selected. The final piece to this is to ensure that the List responds to the selectedIndex being set by the ItemRenderer. When the user changes the selectedIndex property by interacting with the control, the control dispatches the change and changing events. When you change the value of the selectedIndex property programmatically, it dispatches the valueCommit event. To ensure I responded to my programmatic changing of the selected list item I added a handler to the valueCommit event.
<s:List
id="locationsList"
dataProvider="{presenter.locations}"
itemRenderer="itemrenderers.locationListItemRenderer"
useVirtualLayout="false"
width="1869.698" height="1869.698"
y="65.151" x="65.151"
borderVisible="true"
borderColor="{presenter.backgroundColour}"
contentBackgroundAlpha="0"
contentBackgroundColor="0xff336c"
labelField="label"
change="presenter.onLocationListChange(event)"
valueCommit="presenter.onLocationListValueCommit(event)">
<s:layout>
<s:BasicLayout />
</s:layout>
</s:List>
So far it seems to work fine. Hope it helps.
I'm using polymer 1.0.
I'm trying to open a with on a clic on an element created dynamically with template repeat.
Here is the code :
<paper-button
data-dialog="modal"
on-click="dialogClick">
Click
</paper-button>
and the script (from doc) :
dialogClick: function(e) {
var button = e.target;
while (!button.hasAttribute('data-dialog') && button !== document.body) {
button = button.parentElement;
}
if (!button.hasAttribute('data-dialog')) {
return;
}
var id = button.getAttribute('data-dialog');
var dialog = document.getElementById(id);
alert(dialog);
if (dialog) {
dialog.open();
}
}
This work only if the value of data-dialog is simple text. If I want to change it by data-dialog="{{item.dialogName}}" for instance, it doesn't work. It is not found by the while loop and exit with the if. in the source code of the page, there is no data-dialog in the paper-button.
Any idea ?
I've ran into a similar problem when using data attributes on custom elements. You might want to subscribe to this polymer issue.
As a workaround, place the data attribute in a standard element that is a parent of the button and search for that one instead.
Also, you might want to consider using var button = Polymer.dom(e).localTarget instead of directly accessing e.target, since the later will give you an element deeper in the dom tree under shady dom.