Android上的自定义导航抽屉

Posted 2023-04-13

【中文标题】Android上的自定义导航抽屉

【英文标题】：Custom navigation drawer on Android

【发布时间】：2020-07-20 15:43:32

【问题描述】：

我想为我的导航抽屉实现类似的功能：

我遵循了 Stack Overflow 的这个答案，除了视图没有正确查看外，几乎得到了答案。这是我遵循的答案：https://***.com/a/37336064/5816306

但我得到的是这样的：

如您所见，在我看来，导航抽屉是单独出现的。它没有得到整个窗口，视图是分开的。我想将它显示为第一张图片，就像整个屏幕应该只有一张图片，而主屏幕的一小部分应该像第一张图片一样显示。

我的抽屉活动 XML 代码：

  <androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    app:elevation="0dp"
    android:layout_
    android:layout_
    android:background="@drawable/splash"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <RelativeLayout
        android:id="@+id/holder"
        android:layout_
        android:layout_
        android:orientation="vertical">

    <LinearLayout
        android:id="@+id/content"
        android:layout_
        android:background="@color/colorAccent"
        android:layout_
        android:orientation="vertical">

    <include
        layout="@layout/app_bar_main2"
        android:layout_
        android:layout_ />
    </LinearLayout>
    </RelativeLayout>
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_
        android:layout_
        android:layout_gravity="start"
        android:background="@android:color/transparent"
        app:menu="@menu/activity_main2_drawer" />

</androidx.drawerlayout.widget.DrawerLayout>

这是导航标头 XML：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_
        android:layout_
        android:contentDescription="@string/nav_header_desc"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        app:srcCompat="@mipmap/ic_launcher_round" />

    <TextView
        android:layout_
        android:layout_
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="@string/nav_header_title"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_
        android:layout_
        android:text="@string/nav_header_subtitle" />

</LinearLayout>

我的主要活动代码是：

private AppBarConfiguration mAppBarConfiguration;
    View contentView;
    DrawerLayout drawerLayout;
    private static final float END_SCALE = 0.7f;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        FloatingActionButton fab = findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() 
            @Override
            public void onClick(View view) 
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            
        );
        drawerLayout = findViewById(R.id.drawer_layout);
        contentView = findViewById(R.id.content);
        NavigationView navigationView = findViewById(R.id.nav_view);
        // Passing each menu ID as a set of Ids because each
        // menu should be considered as top level destinations.
        mAppBarConfiguration = new AppBarConfiguration.Builder(
                R.id.nav_home, R.id.nav_gallery, R.id.nav_slideshow)
                .setDrawerLayout(drawerLayout)
                .build();
        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        NavigationUI.setupActionBarWithNavController(this, navController, mAppBarConfiguration);
        NavigationUI.setupWithNavController(navigationView, navController);

        drawerLayout.setScrimColor(Color.TRANSPARENT);
        drawerLayout.addDrawerListener(new DrawerLayout.SimpleDrawerListener() 
                                           @Override
                                           public void onDrawerSlide(View drawerView, float slideOffset) 

                                               // Scale the View based on current slide offset
                                               final float diffScaledOffset = slideOffset * (1 - END_SCALE);
                                               final float offsetScale = 1 - diffScaledOffset;
                                               contentView.setScaleX(offsetScale);
                                               contentView.setScaleY(offsetScale);

                                               // Translate the View, accounting for the scaled width
                                               final float xOffset = drawerView.getWidth() * slideOffset;
                                               final float xOffsetDiff = contentView.getWidth() * diffScaledOffset / 2;
                                               final float xTranslation = xOffset - xOffsetDiff;
                                               contentView.setTranslationX(xTranslation);
                                           

                                           @Override
                                           public void onDrawerClosed(View drawerView) 
                                           
                                       
        );

    

    @Override
    public boolean onCreateOptionsMenu(Menu menu) 
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main2, menu);
        return true;
    

    @Override
    public boolean onSupportNavigateUp() 
        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        return NavigationUI.navigateUp(navController, mAppBarConfiguration)
                || super.onSupportNavigateUp();
    

【问题讨论】：

将NavigationView的高度设置为0，将其背景设置为透明，并将您的图像设置为DrawerLayout的背景。

我仍然将导航视图与上图中的一行分开，我现在已经删除了标题我应该如何添加图像

我不知道你所说的“分离”是什么意思。您可以将图像设置为DrawerLayout 上的背景，就像在任何其他View 上一样。

等等，“用线隔开”是指影子吗？如果是这样，看起来 androidx DrawerLayout 现在会在内部自行处理抽屉高度，因此您可以在 <DrawerLayout> 上设置 app:elevation="0dp"。

【参考方案1】：

我通过删除 Drawer Activity 的 XML 代码中的 Linearlayout 背景得到了解决方案。我正在重新发布编辑后的代码：

<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    app:elevation="0dp"
    android:layout_
    android:layout_
    android:background="@drawable/splash"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <RelativeLayout
        android:id="@+id/holder"
        android:layout_
        android:layout_
        android:orientation="vertical">

    <LinearLayout
        android:id="@+id/content"
        android:layout_
        **android:background="@color/colorAccent"**// Delete this line
        android:layout_
        android:orientation="vertical">

    <include
        layout="@layout/app_bar_main2"
        android:layout_
        android:layout_ />
    </LinearLayout>
    </RelativeLayout>
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_
        android:layout_
        android:layout_gravity="start"
        android:background="@android:color/transparent"
        app:menu="@menu/activity_main2_drawer" />

</androidx.drawerlayout.widget.DrawerLayout>

我已经写在代码里了。只需删除应用背景的那行代码即可。