我有一个包含Toolbar和ViewPager的活动,在ViewPager中有三个Fragment,每个Fragment应该将不同的高度设置为Toolbar,也就是说当第一个Fragment是选定的Fragment时,Toolbar的高度应该是x,当第二个Fragment被选中时,工具栏的高度应该是y,以此类推。
现在,我想使工具栏高度的变化与ViewPager滚动同步,有什么建议吗?
我有一个包含Toolbar和ViewPager的活动,在ViewPager中有三个Fragment,每个Fragment应该将不同的高度设置为Toolbar,也就是说当第一个Fragment是选定的Fragment时,Toolbar的高度应该是x,当第二个Fragment被选中时,工具栏的高度应该是y,以此类推。
现在,我想使工具栏高度的变化与ViewPager滚动同步,有什么建议吗?
以下是输出结果..
示例代码https://github.com/msquare097/MFlex-toolbar,....
首先,这是一个很好的问题,非常有趣...
并且为了实现它。
我通过在viewpager滚动时更改工具栏的最小高度来使用它。
首先,在您实现ViewPager
的活动中,只需声明所有Toolbar
高度与片段相对应。
我直接将其作为整数
进行了采用。您可以从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);
}
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.
}
});
试试这个:
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) {
}
};
你也可以通过接口来实现这个功能。
接口:
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);
}
}
在你的Fragment中:
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");
}
}
}
为每个片段设置不同的高度。
SetUserVisibleHint是Fragment的默认方法。使用此方法,您可以找出哪个片段对用户可见,并将可见片段的工具栏高度设置为活动。
主要用途是,ViewPager默认加载三个片段,前一个、当前选择和下一个,以使ViewPager的滑动更加流畅。因此,如果未检查SetUserVisibleHint,则您的工具栏高度将混乱。因为ViewPager在后台加载下一个片段。
您可能会看到片段1可见,但工具栏高度将设置为片段3或片段2。
<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>
这对我有效。我希望它也能对你有效。谢谢。