如何通过单击 ImageView 在 MaterialCardView 顶部引入/设计导航抽屉布局

Question

我正在尝试设计通过单击作为菜单图标的 ImageView 从右向左拖动导航抽屉布局的布局。

功能正常运行，没有任何问题。但是，从 UI 的角度来看，导航抽屉布局在 MaterialCardView 下方可见，并将内容包装为卡片大小。如何让抽屉式导航栏置于卡片之上并全屏显示。

下面是我的布局文件： activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:cardBackgroundColor="#1835d9"
        style="@style/CustomCardCorners"
        android:layout_alignParentEnd="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true">

        <ImageView
            android:id="@+id/navigation_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/menu"
            android:layout_gravity="top|end"
            android:contentDescription="@string/app_name"/>

    </com.google.android.material.card.MaterialCardView>

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:openDrawer="right"
        android:layout_gravity="right"
        android:layout_alignParentEnd="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true">

        <com.google.android.material.navigation.NavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            app:menu="@menu/my_navigation_items"/>

    </androidx.drawerlayout.widget.DrawerLayout>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

下面是我的themes.xml:

<!-- Customize your theme here. -->
<style name="CustomCardCorners" parent="@style/Widget.MaterialComponents.CardView">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearance_custom_corners</item>
</style>

<style name="ShapeAppearance_custom_corners" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeBottomLeft">40dp</item>
    <item name="cornerSizeBottomRight">40dp</item>
</style>

下面是我的my_navigation_items.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item android:title="Test"/>
<item android:title="Second"/>
<item android:title="Third"/>

</menu>

下面是我的 MainActivity.java 文件：

public class MainActivity extends AppCompatActivity implements View.OnClickListener, 
NavigationView.OnNavigationItemSelectedListener {

ImageView imageView;
DrawerLayout drawerLayout;
NavigationView navigationView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);//will hide the title
    this.getSupportActionBar().hide();
    this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
    WindowManager.LayoutParams.FLAG_FULLSCREEN);
    setContentView(R.layout.activity_main);


    imageView = findViewById(R.id.navigation_icon);
    imageView.setOnClickListener(MainActivity.this);
    setUp();

}

private void setUp() {
    drawerLayout = findViewById(R.id.drawer_layout);
    navigationView = findViewById(R.id.navigation);

    navigationView.setNavigationItemSelectedListener(MainActivity.this);
}


@Override
public void onClick(View v) {
    switch (v.getId())
    {
        case R.id.navigation_icon:
            drawerLayout.openDrawer(Gravity.RIGHT);
    }
}

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    Toast.makeText(MainActivity.this, ""+ item.getItemId(), Toast.LENGTH_SHORT).show();
    drawerLayout.closeDrawers();
    return true;
}
}

Answer 1

如果您确定抽屉布局在 MaterialCardView 下面，那么这肯定是一个“高度”问题。

基于 Material.io elevation docs，导航抽屉布局默认为 16dp，而 MaterialCardView 为 1dp-8dp。

我猜你没有使用 Material 的 DrawerLayout 组件，或者他们称它为 NavigationView.

你可以看到如何实现它，在这个link

Answer 2

视图的时间顺序引起了问题。如official docs中所述，正确的年表是

<DrawerLayout> 

<RootView> <!--root view of main content-->

<!--other child views-->

</RootView>

<NavigationView/> <!--view for navigation menu-->

</DrawerLayout>

所以试试下面的布局

<?xml version="1.0" encoding="utf-8"?>

<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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:layout_gravity="right"
    android:fitsSystemWindows="true"
    tools:openDrawer="right">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <com.google.android.material.card.MaterialCardView
                android:id="@+id/toolbar"
                style="@style/CustomCardCorners"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:layout_alignParentEnd="true"
                app:cardBackgroundColor="#1835d9">

                <ImageView
                    android:id="@+id/navigation_icon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|end"
                    android:contentDescription="@string/app_name"
                    android:onClick="onClick"
                    android:src="@drawable/ic_launcher_background" />

            </com.google.android.material.card.MaterialCardView>
        </RelativeLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        app:menu="@menu/my_navigation_items" />
</androidx.drawerlayout.widget.DrawerLayout>

如何通过单击 ImageView 在 MaterialCardView 顶部引入/设计导航抽屉布局

How to bring / design navigation drawer layout on top of MaterialCardView by clicking on ImageView

android

android-layout

android-navigationview