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

【问题标题】：How to make a background image moving when user scroll a view on android当用户在android上滚动视图时如何使背景图像移动
【发布时间】：2017-07-13 17:00:38
【问题描述】：

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

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

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

【问题讨论】：

您可以查看幻灯片动画，这里有一些示例。 stackoverflow.com/questions/5151591/…

标签： android android-layout navigation-drawer navigationbar

【解决方案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 属性。您可以摆弄确切的数字来获得您喜欢的滑动量。

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

【讨论】：

真的很棒。

【解决方案2】：

看起来没那么难，但还是没那么容易，因为据说这种效果是Parallax effect。我做了一个可靠的谷歌搜索，但仍然找不到有用的库。所以你必须自己做 步骤是

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

更新

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

核心

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

【讨论】：