适当的布局结构- Android导航抽屉和滑动标签条

Question

我写了一个活动，它包含一个工具栏和一个滑动标签条，显示对应于2个片段的2个标签，还有一个浮动动作按钮。我想把导航抽屉添加到这个活动。我正在使用这个指南http://guides.codepath.com/android/Fragment-Navigation-Drawer

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<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">
        <!-- The ActionBar -->
        <include
            layout="@layout/toolbar2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <!-- The main content view -->
        <FrameLayout
            android:id="@+id/flContent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    <!-- The navigation drawer -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nvView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white"
        app:menu="@menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>
<FrameLayout
    android:id="@+id/frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.pipipzz.simpleapp.SlidingTabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#231F20" />
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="@drawable/drop_shadows" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/ddd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="24dp"
        android:layout_marginBottom="10dp"
        android:src="@drawable/fab_icons"
        app:borderWidth="@null"
        app:elevation="4dp"
        app:fabSize="normal" />
</FrameLayout>
</LinearLayout>

问题是，要使用viewpager实现滑动选项卡，我需要片段，为此我在教程中声明了一个框架布局，本教程也使用框架布局作为导航抽屉的第一个孩子，我对布局的结构感到非常困惑。上面的布局代码显示了以下渲染问题:

java.lang.NullPointerException
at android.widget.TextView.setTextColor(TextView.java:2842)
at android.support.design.internal.NavigationMenuPresenter$NavigationMenuAdapter.getView(NavigationMenuPresenter.java:284)
at android.widget.HeaderViewListAdapter.getView(HeaderViewListAdapter.java:220)
at android.widget.AbsListView.obtainView(AbsListView.java:2344)
at android.widget.ListView.makeAndAddView(ListView.java:1864)
at android.widget.ListView.fillDown(ListView.java:698)
at android.widget.ListView.fillFromTop(ListView.java:759)
at android.widget.ListView.layoutChildren(ListView.java:1673)
at android.widget.AbsListView.onLayout(AbsListView.java:2148)
at android.view.View.layout(View.java:15596)
at android.view.ViewGroup.layout(ViewGroup.java:4966)
at android.widget.FrameLayout.layoutChildren(FrameLayout.java:573)
at android.widget.FrameLayout.onLayout(FrameLayout.java:508)
at android.view.View.layout(View.java:15596)
at android.view.ViewGroup.layout(ViewGroup.java:4966)
at android.support.v4.widget.DrawerLayout.onLayout(DrawerLayout.java:931)
at android.view.View.layout(View.java:15596)
at android.view.ViewGroup.layout(ViewGroup.java:4966)
at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1703)
at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1557)
at android.widget.LinearLayout.onLayout(LinearLayout.java:1466)
at android.view.View.layout(View.java:15596)
at android.view.ViewGroup.layout(ViewGroup.java:4966)
at android.widget.FrameLayout.layoutChildren(FrameLayout.java:573)
at android.widget.FrameLayout.onLayout(FrameLayout.java:508)
at android.view.View.layout(View.java:15596)
at android.view.ViewGroup.layout(ViewGroup.java:4966)
at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1703)
at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1557)
at android.widget.LinearLayout.onLayout(LinearLayout.java:1466)
at android.view.View.layout(View.java:15596)
at android.view.ViewGroup.layout(ViewGroup.java:4966)
at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1703)
at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1557)
at android.widget.LinearLayout.onLayout(LinearLayout.java:1466)
at android.view.View.layout(View.java:15596)
at android.view.ViewGroup.layout(ViewGroup.java:4966)
at com.android.layoutlib.bridge.impl.RenderSessionImpl.render(RenderSessionImpl.java:531)
at com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:334)
at com.android.ide.common.rendering.LayoutLibrary.createSession(LayoutLibrary.java:350)
at com.android.tools.idea.rendering.RenderTask$2.compute(RenderTask.java:497)
at com.android.tools.idea.rendering.RenderTask$2.compute(RenderTask.java:485)
at com.intellij.openapi.application.impl.ApplicationImpl.runReadAction(ApplicationImpl.java:894)
at com.android.tools.idea.rendering.RenderTask.createRenderSession(RenderTask.java:485)
at com.android.tools.idea.rendering.RenderTask.render(RenderTask.java:590)
at org.jetbrains.android.uipreview.AndroidLayoutPreviewToolWindowManager.doRender(AndroidLayoutPreviewToolWindowManager.java:644)
at org.jetbrains.android.uipreview.AndroidLayoutPreviewToolWindowManager.access$1700(AndroidLayoutPreviewToolWindowManager.java:79)
at org.jetbrains.android.uipreview.AndroidLayoutPreviewToolWindowManager$7$1.run(AndroidLayoutPreviewToolWindowManager.java:586)
at com.intellij.openapi.progress.impl.CoreProgressManager$2.run(CoreProgressManager.java:152)
at com.intellij.openapi.progress.impl.CoreProgressManager.registerIndicatorAndRun(CoreProgressManager.java:452)
at com.intellij.openapi.progress.impl.CoreProgressManager.executeProcessUnderProgress(CoreProgressManager.java:402)
at com.intellij.openapi.progress.impl.ProgressManagerImpl.executeProcessUnderProgress(ProgressManagerImpl.java:54)
at com.intellij.openapi.progress.impl.CoreProgressManager.runProcess(CoreProgressManager.java:137)
at org.jetbrains.android.uipreview.AndroidLayoutPreviewToolWindowManager$7.run(AndroidLayoutPreviewToolWindowManager.java:581)
at com.intellij.util.ui.update.MergingUpdateQueue.execute(MergingUpdateQueue.java:320)
at com.intellij.util.ui.update.MergingUpdateQueue.execute(MergingUpdateQueue.java:310)
at com.intellij.util.ui.update.MergingUpdateQueue$2.run(MergingUpdateQueue.java:254)
at com.intellij.util.ui.update.MergingUpdateQueue.flush(MergingUpdateQueue.java:269)
at com.intellij.util.ui.update.MergingUpdateQueue.flush(MergingUpdateQueue.java:227)
at com.intellij.util.ui.update.MergingUpdateQueue.run(MergingUpdateQueue.java:217)
at com.intellij.util.concurrency.QueueProcessor.runSafely(QueueProcessor.java:238)
at com.intellij.util.Alarm$Request$1.run(Alarm.java:351)
at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:511)
at java.util.concurrent.FutureTask.run(FutureTask.java:266)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
at java.lang.Thread.run(Thread.java:745)

编辑:

我尝试改变布局中的顺序，如下所示:

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The ActionBar -->
<include
    layout="@layout/toolbar2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
<FrameLayout
    android:id="@+id/frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.pipipzz.simpleapp.SlidingTabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#231F20" />
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="@drawable/drop_shadows" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/ddd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="24dp"
        android:layout_marginBottom="10dp"
        android:src="@drawable/fab_icons"
        app:borderWidth="@null"
        app:elevation="4dp"
        app:fabSize="normal" />
</FrameLayout>
<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">
    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/flContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- The navigation drawer -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nvView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        android:background="@android:color/black"
        app:menu="@menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>

它消除了所有的渲染问题。但是，当我点击工具栏上的主页图标时，它变成了后退按钮，但我看不到导航栏。我认为它是在滑动选项卡中显示的2个片段后面渲染的。我该如何解决这个问题?请帮助。下面是我的活动

的代码

package com.pipipzz.simpleapp;
import android.content.Intent;
import android.content.res.Configuration;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;

public class HomeActivity extends AppCompatActivity {
Toolbar toolbar;
ViewPager viewPager;
ViewPagerAdapter viewPagerAdapter;
SlidingTabLayout slidingTabLayout;
CharSequence Titles[] = {"Following", "Trending"};
int numOfTabs = 2;
private ActionBarDrawerToggle drawerToggle;
private DrawerLayout mDrawer;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_home);
    //Initialise views
    viewPager = (ViewPager) findViewById(R.id.pager);
    slidingTabLayout = (SlidingTabLayout) findViewById(R.id.tabs);
    toolbar = (Toolbar) findViewById(R.id.toolbar1);
    setSupportActionBar(toolbar);
    //getSupportActionBar().setTitle("Galleri5");
    //toolbar.setSubtitle(Html.fromHtml("<font color='#cccccc'>" + "Galleries" + "</font>"));
    viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), Titles, numOfTabs);
    viewPager.setAdapter(viewPagerAdapter);
    slidingTabLayout.setDistributeEvenly(true);
    slidingTabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
        @Override
        public int getIndicatorColor(int position) {
            //return Color.parseColor("#88ffffff");
            return Color.parseColor("#FAC80A");
        }
    });
    slidingTabLayout.setViewPager(viewPager);
    if (android.os.Build.VERSION.SDK_INT >= 21)
    {
        Window window = getWindow();
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        window.setStatusBarColor(Color.parseColor("#263238"));
    }
    FloatingActionButton button = (FloatingActionButton) findViewById(R.id.ddd);
    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(HomeActivity.this, GalleryActivity.class);
            startActivity(intent);
        }
    });
    // Find our drawer view
    mDrawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    drawerToggle = setupDrawerToggle();
    mDrawer.setDrawerListener(drawerToggle);
    final ActionBar ab = getSupportActionBar();
    assert ab != null;
    ab.setHomeAsUpIndicator(R.drawable.menu);
    ab.setDisplayHomeAsUpEnabled(true);
    // Find our drawer view
    NavigationView nvDrawer = (NavigationView) findViewById(R.id.nvView);
    // Setup drawer view
    setupDrawerContent(nvDrawer);
}
private ActionBarDrawerToggle setupDrawerToggle() {
    return new ActionBarDrawerToggle(this, mDrawer, toolbar, R.string.drawer_open,  R.string.drawer_close);
}
private void setupDrawerContent(NavigationView navigationView) {
    navigationView.setNavigationItemSelectedListener(
            new NavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(MenuItem menuItem) {
                    selectDrawerItem(menuItem);
                    return true;
                }
            });
}
public void selectDrawerItem(MenuItem menuItem) {
    // Create a new fragment and specify the planet to show based on
    // position
    Fragment fragment = null;
    Class fragmentClass;
    switch(menuItem.getItemId()) {
        case R.id.nav_first_fragment:
            fragmentClass = MyFeedFragment.class;
            break;
        case R.id.nav_second_fragment:
            fragmentClass = SurpriseMeFragment.class;
            break;
        case R.id.nav_third_fragment:
            fragmentClass = GalleriesFragment.class;
            break;
        case R.id.nav_fourth_fragment:
            fragmentClass = MyProfileFragment.class;
            break;
        case R.id.nav_fifth_fragment:
            fragmentClass = MessagesFragment.class;
            break;
        case R.id.nav_settings:
            fragmentClass = SettingsFragment.class;
            break;
        case R.id.nav_logout:
            fragmentClass = LogoutFragment.class;
            break;
        default:
            fragmentClass = MyFeedFragment.class;
    }
    try {
        fragment = (Fragment) fragmentClass.newInstance();
    } catch (Exception e) {
        e.printStackTrace();
    }
    // Insert the fragment by replacing any existing fragment
    FragmentManager fragmentManager = this.getSupportFragmentManager();
    fragmentManager.beginTransaction().replace(R.id.flContent, fragment).commit();
    // Highlight the selected item, update the title, and close the drawer
    menuItem.setChecked(true);
    setTitle(menuItem.getTitle());
    mDrawer.closeDrawers();
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    //getMenuInflater().inflate(R.menu.menu_home, menu);
    return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
//        switch (item.getItemId()) {
//            case android.R.id.home:
//                mDrawer.openDrawer(GravityCompat.START);
//                return true;
//        }
    if (drawerToggle.onOptionsItemSelected(item)) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}
@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    // Sync the toggle state after onRestoreInstanceState has occurred.
    drawerToggle.syncState();
}
@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    // Pass any configuration change to the drawer toggles
    drawerToggle.onConfigurationChanged(newConfig);
}
}

Answer 1

最后，我自己想出了一个办法，所以把它贴在这里。

主活动布局:

<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"
    android:fitsSystemWindows="true">
    <include layout="@layout/viewpager_layout" />
    <FrameLayout
        android:id="@+id/flContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <android.support.design.widget.NavigationView
        android:id="@+id/nvView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#F6F8F9"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>

viewpager_layout.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_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <include layout="@layout/toolbar2" />
    <com.pipipzz.simpleapp.SlidingTabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#231F20" />
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" />
        <View
            android:layout_width="match_parent"
            android:layout_height="5dp"
            android:background="@drawable/drop_shadows" />
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/ddd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="24dp"
            android:layout_marginBottom="10dp"
            android:src="@drawable/fab_icons"
            app:borderWidth="@null"
            app:elevation="4dp"
            app:fabSize="normal" />

    </FrameLayout>
</LinearLayout>

希望能有所帮助。