使用 ViewPager 同步工具栏高度

Question

我有一个带有 Toolbar 和 ViewPager 的活动，在 ViewPager 中有三个 Fragment，每个 Fragment 应该为 Toolbar 设置不同的高度，这意味着当第一个 Fragment 是选定的 Fragment 时，Toolbar 的高度应该是 x，当第二个 Fragment被选中的工具栏高度应该是y等。

现在我希望工具栏高度的变化与 ViewPager 滚动同步，有什么建议吗？

Answer 1

这是输出..

示例代码https://github.com/msquare097/MFlex-toolbar,....

首先，很好的问题而且非常有趣... 并实施它。
我通过改变 viewpager 滚动来使用工具栏的最小高度。

首先，只需声明所有Toolbar 高度相对于您的活动中实现ViewPager 的片段。

我直接把它当作Integer。您从dimen 加载它作为DP 并将其转换为PX。 在我的 ViewPager 中，我拍摄了 4 个片段。所以声明 4 工具栏的高度。

int heightForPage0 = 150;
int heightForPage1 = 400;
int heightForPage2 = 300;
int heightForPage3 = 600;

设置好适配器后，只需添加监听器

mViewPager.addOnPageChangeListener(this);

并覆盖这三个方法并编写以下代码..

@Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        Log.d(TAG,positionOffset+"");

        int currentHeight;
        int nextHeight;

        switch (position) {
            case 0:
                currentHeight = heightForPage0;
                nextHeight = heightForPage1;
                calculateHeightAndApply(currentHeight, nextHeight, positionOffset);
                break;
            case 1:
                currentHeight = heightForPage1;
                nextHeight = heightForPage2;
                calculateHeightAndApply(currentHeight, nextHeight, positionOffset);
                break;
            case 2:
                currentHeight = heightForPage2;
                nextHeight = heightForPage3;
                calculateHeightAndApply(currentHeight, nextHeight, positionOffset);
                break;
            case 3:
                // for last page we don't have to worry about it.
                // bcoz there is no next page available;
                break;
        }
    }

    @Override
    public void onPageSelected(int position) {}

    @Override
    public void onPageScrollStateChanged(int state) {}

这是我在onPageScrolled..中调用的神奇方法。

private void calculateHeightAndApply(int currentHeight, int nextHeight, float positionOffset) {
    if (positionOffset==0) {
        return;
    }
    int diff = nextHeight - currentHeight;
        int newHeight = (int) ((positionOffset*diff));
        mToolbar.setMinimumHeight(currentHeight+newHeight);
}

Answer 2

如果你想使用动画，你可以使用 PageTransformer。

   ViewPager pager = (ViewPager) findViewById(R.id.viewpager);

   pager.setPageTransformer(false, new ViewPager.PageTransformer() {
        @Override
        public void transformPage(View onepage, float position) {
            //Position is the offset of onepage.
            //If position == 0 , one page is center.
            //If position == 1 , one page is on the right of center page.
        }
    });

Answer 3

试试这个：

 int X = 30;
 int Y = 50;
 Toolbar toolbar = (Toolbar)findViewById(R.id.your_toolbar);

 yourViewPager.addOnPageChangeListener(pagerChangeListener());

 public ViewPager.OnPageChangeListener pagerChangeListener() {
    return new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }
        @Override
        public void onPageSelected(int position) {
           if(position == 0){
               toolbar.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, X));
             }else{
               toolbar.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, Y));
             }
        }
        @Override
        public void onPageScrollStateChanged(int state) {
        }
    };

Answer 4

您也可以借助 Interface 来实现这一点。

界面：

public interface ChangeToolbarHeight {
    void setToolbarHeight(int height);
}

活动：

public class MainActivity extends AppCompatActivity implements ChangeToolbarHeight
{
public void setToolbarHeight(int height)
{
    RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) mToolbar.getLayoutParams();
layoutParams.height = height;
toolbar.setLayoutParams(layoutParams); 
}
}

片段内部：

public class FragmentOne extends Fragment {
     @Override
        public void setUserVisibleHint(boolean isVisibleToUser) {
            super.setUserVisibleHint(isVisibleToUser);
           if (isVisibleToUser)
           {
             ChangeToolbarHeight changeHeightInterface = (ChangeToolbarHeight) getActivity();
             changeHeightInterface.setToolbarHeight(150);
               Log.d("TAG","Current Fragment is visible");
            }
        }
    }

为每个片段设置不同的高度。

SetUserVisbileHint 是 Fragment 的默认方法。使用它您可以找出用户可见的 Fragment，并将可见的 Fragment 工具栏高度设置为 Activity。

这个的主要用途是，viewPager默认加载三个片段，前一个，当前选择和下一个，以使viewpager的fling更平滑。所以如果未选中SetUserVisibleHint。您的工具栏高度会混淆。当viewpager在后台加载下一个的framgent时。

您可能会看到片段 1，但工具栏高度将设置为片段 3 或片段 2。

Answer 5

你可以试试下面的代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="9"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/bannar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/banner_1" />

        <com.astuetz.PagerSlidingTabStrip
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="48dip"
            android:layout_below="@+id/bannar"
            android:background="#fff" />

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tabs" />
    </LinearLayout>
</LinearLayout>

它对我有用。我希望它也对你有用。谢谢