Question

我正在开发一款Android应用，我想要实现一项功能，但由于缺乏经验，我不知道该怎么做，不幸的是谷歌搜索它并没有帮助。

所以，有一个带有两个标签的 ViewPager 和带有箭头图像的 FloatingActionButton ，我想要做的是根据滚动状态旋转箭头寻呼机（在第一个标签上它应该是一个左箭头，然后在标签之间它应该平滑地向上或向下旋转（并不重要），最后在第二个标签上它应该变为右箭头，副亦然）。

我一直在尝试 RotateAnimation 课程，但我没有设法让它发挥作用。

请注意我的应用程序的 minSdkVersion 是14（Jelly Bean +），因此Vector drawables和其他just-Lollipop甚至KitKat的东西对我来说都不会起作用。< / p>

提前致谢。

Answer 1

您需要在视图寻呼机上使用PageChangedListener。然后听onPageScrolled(int position, float positionOffset, int positionOffsetPixels)会告诉你计算旋转角度需要什么。

请注意，这不是动画 - 您将根据viewpager的滚动显式设置按钮的旋转。您需要跟踪当前页面并将其与onPageScrolled的位置参数中的页面进行比较。为此，您可以使用我的代码作为示例：

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    if (currentPagePosition != position && (int) positionOffset == 0 && positionOffsetPixels == 0) {
        // New page is set!
        currentPagePosition = position;
        onNewPage(currentPagePosition);
    } else {
        if (positionOffset == 0 && positionOffsetPixels == 0) {
            // User scrolled a little, then let go 
            // and it went back without changing position
            onNewPage(position);
            return;
        }
        if (position == currentPagePosition) {
            onPageScrolledToLeft(position, positionOffset);
        } else if (position < currentPagePosition) {
            onPageScrolledToRight(position, positionOffset);
        }
    }
}

有了这个，现在你可以实现这两个方法来使用positionOffset来计算旋转角度。请注意，onPageScrolledToLeft表示当前页面向左移动，或者用户向右滚动。发生这种情况时，positionOffset的值将从1.0到0.0。当onPageScrolledToRight触发时，positionOffset将从0.0 - 1.0开始。现在计算出正确的旋转（即0.5应该是0度）后，您可以使用视图的setRotation(float rot)方法。

Answer 2

您正在使用的库在其视图中包含阴影，这意味着在使用setRotation时它会与视图的其余部分一起旋转。您可以通过将浮动操作按钮包装在FrameLayout中来解决此问题，从FAB中删除fab_icon属性，并在FAB上添加ImageView，如下所示：

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginBottom="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginEnd="16dp">

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fab_colorNormal="?attr/colorAccent"
        app:fab_colorPressed="?attr/colorAccentHighlight"/>

    <ImageView
        android:id="@+id/fab_icon_overlay"
        android:layout_width="@dimen/fab_icon_size"
        android:layout_height="@dimen/fab_icon_size"
        android:layout_gravity="center"
        android:layout_marginTop="-3dp"
        android:src="@drawable/ic_content_add"
        android:tint="@android:color/white"/>

</FrameLayout>

然后，旋转ImageView而不是旋转FAB。结果是FAB似乎旋转，因为它是一个圆圈，其中的图标正在旋转。请注意，android:layout_marginTop的值必须是fab_shadow_offset的负值，才能使图标完全居中。默认值为3dp。

您现在要做的是将Ashtons的回答与setRotation(float rotation)的通话结合起来，请注意旋转的度数是度（0.0f - 360.0f）。

解决方案可能如下所示：

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    // positionOffset ranges from 0.0f to 1.0f, multiply it by 180.0f to rotate the 
    // icon clockwise, making the icon appear flipped when scrolled to the last page.
    // Multiply by -180.0f to rotate counter-clockwise.
    fabIconOverlay.setRotation(positionOffset * 180.0f);
}

浮动按钮旋转取决于View Pager滚动状态

2 个答案: