Hide the action bar in the scroll list

Question

I have an application with an action bar and Tabview. There is a list inside the tab. I want the action bar to hide when the user scrolls the list and appears when the user scrolls and does it nicely. As an example, the youtube app for android does this.

I tried this code https://gist.github.com/vakrilov/6edc783b49df1f5ffda5 , but since I hide the panel, a space appears at the bottom of the screen, so in this case it is not very useful. I tried and could not change it and increase the height as I hide the panel using:

var params = userList.android.getLayoutParams(); params.height = 500; userList.android.setLayoutParams(params); userList.android.requestLayout(); 

Also this

 var LayoutParams= android.view.ViewGroup.LayoutParams; var params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 

Finally, I came out with some kind of working thing, but too suddenly there was no animation on the hide / show

 var isChangingBar = false; var isBarHidden = false; userList.on("pan", function(args) { var delta = args.deltaY; console.log("deltaY: " + delta); if (!isChangingBar) { if (delta > 0 && isBarHidden === true) { isChangingBar = true; isBarHidden = false; page.actionBarHidden = false; isBarHidden = false; setTimeout(function() { isChangingBar = false; }, 250); } else if (delta < 0 && isBarHidden === false) { isChangingBar = true; page.actionBarHidden = true; isBarHidden = true; setTimeout(function() { isChangingBar = false; }, 250); } } } 

Some ideas if there is a better way?

Answer 1

You can add actionbar animation to hide / show:

 declare const java: any; declare const android: any; export enum LayoutTransitionTypes { CHANGE_APPEARING = 0, CHANGE_DISAPPEARING, APPEARING, DISAPPEARING, CHANGING } export function initPageActionBarVisibilityAnimations(page) { if (!page.actionBar) { return; } const actionBarH = page.actionBar.getMeasuredHeight(); if (actionBarH < 1) { return; } const lt = new android.animation.LayoutTransition(); lt.setAnimator(LayoutTransitionTypes.APPEARING, (function () { const a = new android.animation.ObjectAnimator(); a.setPropertyName('translationY'); a.setFloatValues([0.0]); a.setDuration(lt.getDuration(2)); return a; })()); lt.setAnimator(LayoutTransitionTypes.DISAPPEARING, (function () { const a = new android.animation.ObjectAnimator(); a.setPropertyName('translationY'); a.setFloatValues([-actionBarH]); a.setDuration(lt.getDuration(3)); return a; })()); lt.setStartDelay(LayoutTransitionTypes.CHANGE_APPEARING, 0); lt.setStartDelay(LayoutTransitionTypes.CHANGE_DISAPPEARING, 0); lt.setStartDelay(LayoutTransitionTypes.APPEARING, 0); lt.setStartDelay(LayoutTransitionTypes.DISAPPEARING, 0); lt.setStartDelay(LayoutTransitionTypes.CHANGING, 0); page.nativeView.setLayoutTransition(lt); } 

Now we can use the pan event page to automatically hide / show the action bar to scroll up / down. Each change to page.actionBarHidden will launch a smooth transition to the screen / display of the action bar.

 export function onScrollPan(ev: PanGestureEventData) { const actionBar = page.actionBar; const scrollView: ScrollView = <ScrollView>page.getViewById('mainScrollView'); const voffset = scrollView.verticalOffset; const dh = 50; if (page.actionBarHidden && ev.deltaY > dh * 5) { initPageActionBarVisibilityAnimations(page); page.actionBarHidden = false; } else if (!page.actionBarHidden && ev.deltaY < -dh && voffset > 0 && voffset > 2 * actionBar.getMeasuredHeight()) { initPageActionBarVisibilityAnimations(page); page.actionBarHidden = true; } } 

Answer 2

This article can help you. Visit the NativeScript Blog