使用ViewPager同步工具栏高度

时间:2016-01-27 14:16:05

标签: android android-viewpager android-toolbar

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

现在我希望工具栏高度的更改与ViewPager滚动同步,有什么建议吗?

5 个答案:

答案 0 :(得分:7)

这是输出..

enter image description here

对于示例代码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);
}

答案 1 :(得分:0)

如果要使用动画,可以使用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.
        }
    });

答案 2 :(得分:0)

Try this:

 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) {
        }
    };

答案 3 :(得分:0)

您也可以在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的默认方法。使用此功能,您可以找出用户可以看到哪个片段,并将可见片段工具栏高度设置为活动。

主要用途是,viewPager默认加载三个片段,前一个,当前选择和下一个片段以使viewpager smoother.so如果未选中SetUserVisibleHint。你的工具栏高度会混淆。由于viewpager在后台加载下一个framgent。

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

答案 4 :(得分:0)

您可以尝试以下代码:

<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>

它对我有用。我希望它也适合你。感谢