当用户在 android 上滚动视图时如何使背景图像移动

Question

您好开发人员和程序员。我刚开始学习 android 应用程序开发。找到了很棒的导航栏样式，想开发类似的设计。它有背景图像，滚动时会移动。

请帮助我开发相同的。谢谢。我添加了一个示例 gif 作为 link。

https://media.giphy.com/media/l4FGv7VknT1zpZACQ/giphy.gif

Answer 1

这可以通过使用导航抽屉的自定义布局以及 DrawerLayout.DrawerListener 的自定义实现来实现。下面是一个非常简单的示例，可以很容易地适应 Android Studio 的 "New Project -> Navigation Drawer Activity".

生成的代码

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <FrameLayout
        android:id="@+id/nav_view"
        android:layout_width="@dimen/navdrawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#ccc">

        <ImageView
            android:id="@+id/image"
            android:layout_width="256dp"
            android:layout_height="256dp"
            android:layout_gravity="center"
            android:src="@drawable/mydrawable"/>

    </FrameLayout>

</android.support.v4.widget.DrawerLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ImageView iv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        iv = (ImageView) findViewById(R.id.image);

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        DrawerLayout.DrawerListener listener = new MyActionBarDrawerListener();
        drawer.addDrawerListener(listener);
    }

    private class MyActionBarDrawerListener extends DrawerLayout.SimpleDrawerListener {

        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
            super.onDrawerSlide(drawerView, slideOffset);

            int navdrawerWidth = getResources().getDimensionPixelSize(R.dimen.navdrawer_width);
            float closedAmount = (1 - slideOffset);
            int marginStart = 2 * (int) (navdrawerWidth * closedAmount);

            ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) iv.getLayoutParams();
            MarginLayoutParamsCompat.setMarginStart(params, marginStart);
            iv.setLayoutParams(params);
        }
    }
}

解决方案的核心是您提供背景图像，但在抽屉滑动时更新其 marginStart 属性。您可以 fiddle 使用确切的数字来获得您喜欢的滑动量。

请注意，为了提高可读性，我省略了很多代码。在实践中，您可能 MyActionBarDrawerListener 从 ActionBarDrawerToggle 扩展，以便获得导航图标等

Answer 2

看着不难，其实也不简单因为这种效果据说是Parallax effect。我进行了可靠的谷歌搜索，但仍然找不到有用的图书馆。所以你必须自己做 步骤是

了解由您的片段制作的自定义导航布局。
完成抽屉布局后，添加一个图像作为片段的背景
调用 mSlidingDrawer.addDrawerListner(new YourDrawerListner()) 方法 // 就像 Ben P.
实施onDrawerSlide(View drawerView, float slideOffset)
获取您的片段背景图像实例（我使用了 mImage）
在onDrawerSlide(...)中使用偏移量
在你的图片实例中调用mImage.animate().setTranslationX(offset).start()

更新

Ben P. 的答案更好但是你也可以使用我的，只需将 Ben P. 的 DrawerListner 部分添加到我的答案中即可

核心

是视差效果。基于元素的相对运动

当用户在 android 上滚动视图时如何使背景图像移动

How to make a background image moving when user scroll a view on android

android

navigationbar

android-layout

navigation-drawer

activity_main.xml:

MainActivity.java

更新

核心