我有一个带有3个选项卡的屏幕,下面有一个ViewPager,有3个片段,右下角有一个浮动操作按钮.
当第一个标签是当前标签时,我想在右下角显示FAB.当第二个标签是当前标签时,我想在底部中心显示FAB.当第三个选项卡是当前选项卡时,我想隐藏FAB.
当视图寻呼机滚动时,即基于滚动量,从右下到中心或反之亦然的翻译动画应该发生.
以下是我的尝试.
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position,float positionOffset,int positionOffsetPixels) {
ViewCompat.animate(mFAB)
.translationX(-translate)
.withLayer()
.setDuration(0)
.setInterpolator(new LinearInterpolator())
.start();
}
@Override
public void onPageSelected(int position) {
mTabLayout.getTabAt(position).select();
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
这是最好的方法吗？如果是,那么translate变量的值应该是多少？
请帮我实现这个.
作为参考,您可以查看Android Lollipop Call应用程序. FAB以类似的方式显示拨号器动画.对于第一个标签,它在右下方,然后是中间标签,它位于中间.这正是我想要的.
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position,int positionOffsetPixels) {
final int width = mViewPager.getWidth();
if (position == 0) { // represents transition from page 0 to page 1 (horizontal shift)
int translationX = (int) ((-(width - mFab.getWidth()) / 2f) * positionOffset);
mFab.setTranslationX(translationX);
mFab.setTranslationY(0);
} else if (position == 1) { // represents transition from page 1 to page 2 (vertical shift)
int translationY = (int) (mFab.getHeight() * positionOffset);
mFab.setTranslationY(translationY);
mFab.setTranslationX(-(width - mFab.getWidth()) / 2f);
}
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
请记住,width参数应该代表屏幕的宽度(我假设ViewPager填充了屏幕的宽度(所以我指定width = mViewPager.getWidth()).
您还没有确切地说出您希望隐藏FAB的方式.所以我只是垂直翻译它.您还可以使用setScaleX(…)和setScaleY(…).
编辑：
应使用以下方法计算更改参数的(步骤)值(让我们调用它 – 以供将来参考 – 公式1)：
// formula 1
value = targetValue - ((targetValue - initialValue) * (1.0f - offset));
其中offset表示更改的参数(在[0f; 1f]范围内).所以在你的情况下,offset是onPageScrolled方法的positionOffset参数.
让我们分析第0页和第1页(你的情况;位置== 0)之间的转换：
>您想要水平移动FAB,因此您将修改translationX参数.
> FAB锚定在右下角(例如,使用layout_gravity =“bottom | right”)
> FAB的初始位置是动画在NOT滚动页面0的正确位置.因此,动画的translationX的initialValue为0
initialValue = 0;
>您想将FAB移动到屏幕中心.如果屏幕宽度为可变宽度,您可以计算FAB移动到屏幕中心的正确targetValue.它相当于屏幕宽度的一半减去FAB宽度的一半.因为你从右上角开始,这个值是负的(“)
targetValue = -(width - mFab.getWidth()) / 2f;
>由于initialValue参数为0,您可以将公式1简化为(将作为公式2引用)：
// formula 2
value = targetValue * offset;
>获取计算的targetValue,你得到这个(公式2计算的targetValue和positionOffset而不是offset)：
value = (-(width - mFab.getWidth()) / 2f) * positionOffset;
这正是我用来将FAB从初始位置(底部|右侧)移动到屏幕中心(水平)的原因.
我在第1页和第2页之间的转换中计算了translationY的期望步长值时经历了类似的过程.
您需要做的是为将来的任何步骤做同样的事情.考虑动画参数的initialValue和targetValue,将计算值插入公式1并查看它是否按预期工作.
