隱藏滾動列表視圖上的操作欄

我有一個具有操作欄和Tabview的應用程序。在tabview裏面有一個listview。我想要的是當用戶向下滾動列表時彈出的操作欄，當用戶滾動時彈出並很好地完成操作。作爲Android的youtube應用程序的例子是這樣做的。隱藏滾動列表視圖上的操作欄

我試過這段代碼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); 
     } 
    } 
}

有些想法，如果有更好的方法？

來源

2016-04-22 Antonio Cueva

您可以隱藏/顯示添加動作條動畫：

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將自動隱藏滾動/ show動作欄平移向上/向下事件。 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; 
    } 
}

來源

2017-05-05 04:39:36

隱藏滾動列表視圖上的操作欄

回答

相關問題