Question

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

请帮我开发一样。谢谢。我添加了一个示例gif作为链接。

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

Answer 1

这可以通过使用导航抽屉的自定义布局以及DrawerLayout.DrawerListener的自定义实现来实现。下面是一个非常简单的示例，可以很容易地适应Android Studio的“新项目 - ＆gt;导航抽屉活动”生成的代码。

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

请注意，为了提高可读性，我省略了很多代码。在实践中，您可能会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上滚动视图时，如何使背景图像移动

2 个答案:

activity_main.xml中：

MainActivity.java

更新

核心