动画ViewPager在Android中填充屏幕

时间:2014-01-08 22:22:11

标签: android android-animation

所以我有一个看起来像这样的观点:

enter image description here

我想要实现的是当用户向下滚动GridView时,整个视图向上移动以隐藏顶部的大图像。基本上,如果他们想要查看更多的gridview,布局会向上滚动以增加gridview的大小。

然而,当我真正这样做时,会发生以下情况:

enter image description here

它工作正常,除了GridView的大小不会增加以填充屏幕中的新空间,因此窗口的下半部分全部为白色,如您所见。

以下是我到目前为止的工作方式:

private void hideHeader(boolean animate) {
    if(animate) {
        AnimatorSet set = new AnimatorSet();
        set.playTogether(
                ObjectAnimator.ofFloat(mImageHeader, "translationY", -mImageHeader.getHeight()),
                ObjectAnimator.ofFloat(mShareButton, "translationY", -mImageHeader.getHeight()),
                ObjectAnimator.ofFloat(mIndicator, "translationY", -mImageHeader.getHeight()),
                ObjectAnimator.ofFloat(mViewPager, "translationY", -mImageHeader.getHeight())
        );

        set.setDuration(700l);
        set.start();
    }
    else {
        //TODO finish
    }
}

正如您可以从代码中看出的那样,我正在使用ViewPager。在这种情况下,GridView实际上是一个片段,这是我第一次认为我的问题来自的地方。但是,不是ViewPager正在填充屏幕并且其内部的片段不是,而是ViewPager本身不是垂直填充的:

enter image description here

这是父片段的XML(包含大图像,Share按钮和viewpager +指示符):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="vertical"
                android:background="@android:color/white"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <include android:id="@+id/fp_abf"
             layout="@layout/action_bar_footer"/>

    <include android:id="@+id/fp_image_header"
             layout="@layout/widget_image_header"
             android:layout_below="@id/fp_abf"/>

    <TextView android:id="@+id/fp_share_button"
              android:layout_width="match_parent"
              android:layout_height="60dp"
              android:layout_below="@id/fp_image_header"
              android:gravity="center"
              android:background="@drawable/selectable_action_button_grey_to_bit_green"
              android:textSize="14dp"
              android:textColor="@android:color/white"
              android:text="@string/share_caps"/>

    <com.viewpagerindicator.TabPageIndicator android:id="@+id/fp_indicator"
                                             android:layout_width="match_parent"
                                             android:layout_height="wrap_content"
                                             android:layout_below="@+id/fp_share_button"
                                             android:background="@color/header_background"/>

    <android.support.v4.view.ViewPager android:id="@+id/fp_pager"
                                       android:layout_width="match_parent"
                                       android:layout_height="match_parent"
                                       android:layout_below="@id/fp_indicator"/>

</RelativeLayout>

我最初把它当作一个LinearLayout,但试图将它切换到相对,看看是否会产生任何差异(它没有)。

正如您所看到的,ViewPager的layout_height为“match_parent”,我认为它足以填充它所有可用的空间。我认为正在发生的事情是视图没有被告知它有更多的空间可以使用并因此重新绘制它的边界,但我不确定如何触发它。

有谁知道如何做到这一点(或者更好的方法让我达到我想要的目的)?谢谢你的阅读。

1 个答案:

答案 0 :(得分:0)

我明白了。有两件事需要做:

1)添加一个方法,手动将ViewPager的布局参数重置为您想要的精确高度。获得该方法后,请在动画的监听器onAnimationStart方法中调用它。这看起来像这样:

private void hideAnimationStart() {
    int containerHeight = mContainer.getHeight();
    int shareHeight = mShareButton.getHeight();
    int indicatorHeight = mIndicator.getHeight();

    int newHeight = containerHeight - (shareHeight + indicatorHeight);

    LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) mViewPager.getLayoutParams();
    params.height = newHeight;

    mViewPager.setLayoutParams(params);
}

基本上测量我想要它占据的空间。

2)您还需要将布局父类型更改为LinearLayout而不是RelativeLayout。我不知道为什么只有Linear工作,但似乎就是这种情况。

我还将包含用于将视图恢复到其原始状态的方法。在这种情况下,请在动画集的侦听器onAnimationEnd中调用此方法:

private void showAnimationEnd() {
    int containerHeight = mContainer.getHeight();
    int shareHeight = mShareButton.getHeight();
    int indicatorHeight = mIndicator.getHeight();
    int imageHeight = mImageHeader.getHeight();

    int newHeight = containerHeight - (shareHeight + indicatorHeight + imageHeight);

    LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) mViewPager.getLayoutParams();
    params.height = newHeight;

    mViewPager.setLayoutParams(params);
}