2016-04-22 2 views
7

У меня есть приложение, в котором есть панель действий и табуляция. Внутри табуляции есть список. Я хочу, чтобы панель действий скрывалась, когда пользователь прокручивает список и появляется, когда пользователь прокручивается и делает это красиво. В качестве примера приложение youtube для android делает это.Скрыть панель действий в списке прокрутки

Я пробовал этот код https://gist.github.com/vakrilov/6edc783b49df1f5ffda5, но поскольку я скрываю панель, в нижней части экрана появляется пробел, поэтому в этом случае это не очень полезно. Я пытался и не изменять его и увеличить высоту, как я скрыть строку с помощью:

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

Также этот

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

Наконец я вышел с какой-то работы вещь, но это слишком внезапно нет анимации при скрытии/появлении

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

Некоторая идея, если есть лучший способ?

ответ

0

Вы можете добавить ActionBar анимацию скрыть/показать:

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

Теперь мы можем использовать страницу pan event автоматически скрывать шоу бар/действие на свитке перемещения вверх события/вниз. Каждое изменение page.actionBarHidden запустит плавный переход к экрану/отображению панели действий.

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; 
    } 
} 
Смежные вопросы