首页 文章

在滚动列表视图上隐藏操作栏

提问于
浏览 次
9

我有一个有动作栏和Tabview的应用程序 . 在tabview内部有一个列表视图 . 我想要的是当用户向下滚动列表时隐藏的操作栏，当用户向上滚动并且做得很好时弹出 . 作为一个例子，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);
      }
    }
}

有些想法是否有更好的方法？

nativescript

1 回答

  • 0

    您可以在隐藏/显示上添加操作栏动画：

    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;
    }
}
    回复于

相关问题