Question

我有一个包含操作栏和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);
      }
    }
}

有什么想法是否有更好的方法？

Answer 1

您可以在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);
}

现在我们可以使用页面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;
    }
}

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

1 个答案: