与 ViewPager 同步工具栏高度

Question

我有一个带工具栏和 ViewPager 的 activity，在 ViewPager 中有三个片段，每个片段都应该为工具栏设置不同的高度，这意味着当第一个片段是选定的片段时，工具栏的高度应该是x and when the 2nd Fragment is selected toolbar height should be y and so.

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

Answer 1

如果要使用动画，可以使用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 2

试试这个：

 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 3

这是输出..

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

首先这个问题很好而且很有趣... 并实施它。
我通过更改 viewpager 滚动使用了工具栏最小高度。

首先，只需在实现 ViewPager 的 activity 中声明与片段相关的所有 Toolbar 高度。

我刚才直接当成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 4

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

接口：

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

Activity:

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 的默认方法。使用这个你可以找出哪个片段对用户可见并将可见片段工具栏高度设置为 activity.

这个的主要用途是，如果未选中 SetUserVisibleHint，viewPager 默认加载三个片段，前一个片段，当前选择片段和下一个片段以进行 viewpager smoother.so 的渲染。你的工具栏高度会混淆。当 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>

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

与 ViewPager 同步工具栏高度

Synchronizing Toolbar Height with ViewPager

android

android-viewpager

android-toolbar