繁体   English   中英

在带有片段的活动中实现导航抽屉

[英]Implementing Navigation Drawer in Activity with Fragments

我目前正在重新设计我的应用程序,以包括一个用于浏览该应用程序的导航抽屉。 当前,每个屏幕都是一项活动,而我设计主屏幕的方式是它包含一个工具栏和另一个xml文件。

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

<Toolbar
    android:layout_width="match_parent"
    android:id="@+id/toolbar"
    android:layout_height="?attr/actionBarSize"
    app:popupTheme="@style/AppTheme.PopupOverlay">
    <ImageView
        android:layout_width="@dimen/_30sdp"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/_95sdp"
        android:src="@drawable/logo"
        android:id="@+id/logo"
        />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/sync_green"
        android:id="@+id/sync_button"
        android:layout_marginStart="@dimen/_75sdp"/>
</Toolbar>
<include layout="@layout/activity_main" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/run"
   />

现在,我为导航抽屉创建了另一个XML文件:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- The main content view where fragments are loaded -->
    <FrameLayout
        android:id="@+id/flContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:menu="@menu/activity_main_drawer" />

我的难题是,由于我的工具栏位于home.xml片段中,所以当我切换片段时,我将失去工具栏。 我想在导航抽屉中保留所有视图的工具栏。

另外,在我的Java代码中,setActionBar(toolbar)抛出错误,提示无法解析方法setActionBar。

用于将NavigationDrawer与Fragment集成到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: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:fitsSystemWindows="true"
    android:layoutDirection="rtl"
    tools:openDrawer="start">

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


    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        android:background="@color/flat_white_light">

    </android.support.design.widget.NavigationView>

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

现在,在content_act_main.xml您可以拥有:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ToolbarColoredBackArrow"
            app:popupTheme="@style/AppTheme.PopupOverlay" >

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

如果您注意到,在conten_act_main.xml ,有一个工具栏可用于FrameLayout中显示的所有内容,您可以将此FrameLayout用作Fragments的容器。

当然,您可以维护此工具栏,需要ActionBarDrawerToggle来将drawerLayoutToolbar绑定在一起。

最小配置将或多或少:

 ActionBarDrawerToggle actionBarDrawerToggle;
    DrawerLayout drawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        drawerLayout = (DrawerLayout) findViewById(R.id.navigation_drawer);
        setSupportActionBar(toolbar);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
        actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.app_name,R.string.app_name);
        drawerLayout.setDrawerListener(actionBarDrawerToggle);
    }

然后将工具栏放在基本活动布局中,并将其他视图放入DrawerLayout

  <Android.support.v4.widget.DrawerLayout
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:id="@+id/navigation_drawer"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:fitsSystemWindows="true">

        <Android.support.v7.widget.Toolbar
            xmlns:Android="http://schemas.Android.com/apk/res/Android"
            xmlns:app="http://schemas.Android.com/apk/res-auto"
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            ></Android.support.v7.widget.Toolbar>
        ....
        ....
    </Android.support.v4.widget.DrawerLayout>

在您的活动中尝试一下

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("");
        setSupportActionBar(toolbar);

这是我的.xml文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.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:fitsSystemWindows="true"
    android:paddingBottom="@dimen/design_navigation_separator_vertical_padding"
    tools:openDrawer="start">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:orientation="vertical">

        <include
            android:id="@+id/toolbar"
            layout="@layout/apptoolbar" />

        <FrameLayout
            android:id="@+id/frame_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/nav_toolbar"
            android:clickable="true">

        </FrameLayout>
    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/appColor"
        android:fitsSystemWindows="true"
        android:paddingBottom="@dimen/design_navigation_separator_vertical_padding"
        app:itemTextAppearance="@style/NavigationDrawerStyle"
        app:headerLayout="@layout/nav_header_home"
        app:itemBackground="@color/appColor"
        app:itemTextColor="@color/drawable_selector_drawer_item"
        app:menu="@menu/activity_home_drawer" />

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM