Ukryj pasek czynności podczas przewijania listview

Question

Mam aplikację z paskiem akcji i widokiem Tabview. Wewnątrz widoku tabelki znajduje się widok listy. Potrzebuję paska czynności do ukrycia, gdy użytkownik przewija listę i pojawia się, gdy użytkownik przewija się i robi to ładnie. Przykładem tego jest aplikacja YouTube na Androida.

Próbowałem tego kodu https://gist.github.com/vakrilov/6edc783b49df1f5ffda5, ale gdy ukrywam pasek, na dole ekranu pojawia się biała spacja, więc nie jest to zbyt przydatne w tym przypadku. Próbowałem i nie modyfikować i zwiększyć wysokość jak ukryć pasek przy użyciu:

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

Również ten

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

końcu wyszedłem z jakąś rzecz działa, ale jest to zbyt nagłe brak animacji na ukrywaniu/pojawianiu się

Jakiś pomysł, czy jest lepszy sposób?

Answer 1

Możesz dodać actionbar animację Ukryj/Pokaż:

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

Teraz możemy wykorzystać stronę pan event automatycznie ukryć/pokazać działania pasek przewijania przesuwać się wydarzenia/dół. Każda zmiana page.actionBarHidden rozpocznie płynne przejście do ukrywania/wyświetlania paska akcji.

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