如何使用片段主细节实现导航抽屉

Question

我从这个站点获得了示例导航抽屉： http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/

和这里的主要细节： http://wptrafficanalyzer.in/blog/itemclick-handler-for-listfragment-in-android/

错误 LogCat oncreateview(inflac....) 视图 无法创建

我试过了

    //the main activiry as Activity:

    package in.wptrafficanalyzer.listfragmentitemclick;

import in.wptrafficanalyzer.listfragmentitemclick.adapter.NavDrawerListAdapter;
import in.wptrafficanalyzer.listfragmentitemclick.model.NavDrawerItem;

import java.util.ArrayList;

import in.wptrafficanalyzer.listfragmentitemclick.R;

import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.app.ListFragment;
import android.content.Intent;
import android.content.res.Configuration;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;

public class MainActivity extends Activity implements CountryListFragment.ListFragmentItemClickListener {



    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    private ActionBarDrawerToggle mDrawerToggle;

    // nav drawer title
    private CharSequence mDrawerTitle;

    // used to store app title
    private CharSequence mTitle;

    // slide menu items
    private String[] navMenuTitles;
    private TypedArray navMenuIcons;

    private ArrayList<NavDrawerItem> navDrawerItems;
    private NavDrawerListAdapter adapter;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mTitle = mDrawerTitle = getTitle();

        // load slide menu items
        navMenuTitles = getResources().getStringArray(R.array.nav_drawer_items);

        // nav drawer icons from resources
        navMenuIcons = getResources()
                .obtainTypedArray(R.array.nav_drawer_icons);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.list_slidermenu);

        navDrawerItems = new ArrayList<NavDrawerItem>();

        // adding nav drawer items to array
        // Home
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[0], navMenuIcons.getResourceId(0, -1)));
        // Find People
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[1], navMenuIcons.getResourceId(1, -1)));
        // Photos
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[2], navMenuIcons.getResourceId(2, -1)));
        // Communities, Will add a counter here
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[3], navMenuIcons.getResourceId(3, -1), true, "22"));
        // Pages
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[4], navMenuIcons.getResourceId(4, -1)));
        // What's hot, We  will add a counter here
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[5], navMenuIcons.getResourceId(5, -1), true, "50+"));


        // Recycle the typed array
        navMenuIcons.recycle();

        mDrawerList.setOnItemClickListener(new SlideMenuClickListener());

        // setting the nav drawer list adapter
        adapter = new NavDrawerListAdapter(getApplicationContext(),
                navDrawerItems);
        mDrawerList.setAdapter(adapter);

        // enabling action bar app icon and behaving it as toggle button
        getActionBar().setDisplayHomeAsUpEnabled(true);
        getActionBar().setHomeButtonEnabled(true);

        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.drawable.ic_drawer, //nav menu toggle icon
                R.string.app_name, // nav drawer open - description for accessibility
                R.string.app_name // nav drawer close - description for accessibility
        ) {
            public void onDrawerClosed(View view) {
                getActionBar().setTitle(mTitle);
                // calling onPrepareOptionsMenu() to show action bar icons
                invalidateOptionsMenu();
            }

            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mDrawerTitle);
                // calling onPrepareOptionsMenu() to hide action bar icons
                invalidateOptionsMenu();
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        if (savedInstanceState == null) {
            // on first time display view for first nav item
            displayView(0);
        }
    }

    /**
     * Slide menu item click listener
     * */
    private class SlideMenuClickListener implements
            ListView.OnItemClickListener {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position,
                long id) {
            // display view for selected nav drawer item
            displayView(position);
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // toggle nav drawer on selecting action bar app icon/title
        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        // Handle action bar actions click
        switch (item.getItemId()) {
        case R.id.action_settings:
            return true;
        default:
            return super.onOptionsItemSelected(item);
        }
    }

    /***
     * Called when invalidateOptionsMenu() is triggered
     */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        // if nav drawer is opened, hide the action items
        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
        menu.findItem(R.id.action_settings).setVisible(!drawerOpen);
        return super.onPrepareOptionsMenu(menu);
    }

    /**
     * Diplaying fragment view for selected nav drawer list item
     * */
    private void displayView(int position) {
        // update the main content by replacing fragments
        ListFragment fragment = null;
        switch (position) {
        case 0:
            //fragment = new HomeFragment();
            break;
        case 1:
            fragment = new CountryListFragment();
            break;
        case 2:
            //fragment = new PhotosFragment();
            break;
        case 3:
           // fragment = new CommunityFragment();
            break;
        case 4:
            //fragment = new PagesFragment();
            break;
        case 5:
            //fragment = new WhatsHotFragment();
            break;

        default:
            break;
        }

        if (fragment != null) {
            FragmentManager fragmentManager = getFragmentManager();
            fragmentManager.beginTransaction()
                    .replace(R.id.country_list_fragment, fragment).commit();

            // update selected item and title, then close the drawer
            mDrawerList.setItemChecked(position, true);
            mDrawerList.setSelection(position);
            setTitle(navMenuTitles[position]);
            mDrawerLayout.closeDrawer(mDrawerList);
        } else {
            // error in creating fragment
            Log.e("MainActivity", "Error in creating fragment");
        }
    }

    @Override
    public void setTitle(CharSequence title) {
        mTitle = title;
        getActionBar().setTitle(mTitle);
    }

    /**
     * When using the ActionBarDrawerToggle, you must call it during
     * onPostCreate() and onConfigurationChanged()...
     */

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        mDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        // Pass any configuration change to the drawer toggls
        mDrawerToggle.onConfigurationChanged(newConfig);
    }
    /** Called when the activity is first created. */


    @Override
    public void onListFragmentItemClick(int position) {

        /** Getting the orientation ( Landscape or Portrait ) of the screen */
        int orientation = getResources().getConfiguration().orientation;


        /** Landscape Mode */
        if(orientation == Configuration.ORIENTATION_LANDSCAPE ){
            /** Getting the fragment manager for fragment related operations */
            FragmentManager fragmentManager = getFragmentManager();

            /** Getting the fragmenttransaction object, which can be used to add, remove or replace a fragment */
            FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

            /** Getting the existing detailed fragment object, if it already exists. 
             *  The fragment object is retrieved by its tag name 
             * */
            Fragment prevFrag = fragmentManager.findFragmentByTag("in.wptrafficanalyzer.country.details");

            /** Remove the existing detailed fragment object if it exists */
            if(prevFrag!=null)
                fragmentTransaction.remove(prevFrag);           

            /** Instantiating the fragment CountryDetailsFragment */
            CountryDetailsFragment fragment = new CountryDetailsFragment();

            /** Creating a bundle object to pass the data(the clicked item's position) from the activity to the fragment */ 
            Bundle b = new Bundle();

            /** Setting the data to the bundle object */
            b.putInt("position", position);

            /** Setting the bundle object to the fragment */
            fragment.setArguments(b);           

            /** Adding the fragment to the fragment transaction */
            fragmentTransaction.add(R.id.detail_fragment_container, fragment,"in.wptrafficanalyzer.country.details");

            /** Adding this transaction to backstack */
            fragmentTransaction.addToBackStack(null);

            /** Making this transaction in effect */
            fragmentTransaction.commit();

        }else{          /** Portrait Mode or Square mode */
            /** Creating an intent object to start the CountryDetailsActivity */
            Intent intent = new Intent("in.wptrafficanalyzer.CountryDetailsActivity");

            /** Setting data ( the clicked item's position ) to this intent */
            intent.putExtra("position", position);

            /** Starting the activity by passing the implicit intent */
            startActivity(intent);          
        }
    }
}

将 CountryListFragment 作为 listfragment ：

package in.wptrafficanalyzer.listfragmentitemclick;

import android.app.Activity;
import android.app.ListFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class CountryListFragment extends ListFragment{

    /** List of countries to be displayed in the ListFragment */

    ListFragmentItemClickListener ifaceItemClickListener;   

    /** An interface for defining the callback method */
    public interface ListFragmentItemClickListener {
        /** This method will be invoked when an item in the ListFragment is clicked */
        void onListFragmentItemClick(int position);
    }   

    /** A callback function, executed when this fragment is attached to an activity */  
    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);

        try{
            /** This statement ensures that the hosting activity implements ListFragmentItemClickListener */
            ifaceItemClickListener = (ListFragmentItemClickListener) activity;          
        }catch(Exception e){
            Toast.makeText(activity.getBaseContext(), "Exception",Toast.LENGTH_SHORT).show();
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        /** Data source for the ListFragment */
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(inflater.getContext(), android.R.layout.simple_list_item_1, Country.name);

        /** Setting the data source to the ListFragment */
        setListAdapter(adapter);    



        return super.onCreateView(inflater, container, savedInstanceState);
    }

    @Override
    public void onListItemClick(ListView l, View v, int position, long id) {    

        /** Invokes the implementation of the method istFragmentItemClick          in     the hosting activity */
        ifaceItemClickListener.onListFragmentItemClick(position);

    }

}

文件夹布局中的主布局

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




<FrameLayout
    android:id="@+id/country_list_fragment"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:name="in.wptrafficanalyzer.listfragmentitemclick.CountryListFragment"
    />


<!-- Listview to display slider menu -->
<ListView
    android:id="@+id/list_slidermenu"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:choiceMode="singleChoice"
    android:divider="@color/list_divider"
    android:dividerHeight="1dp"       
    android:listSelector="@drawable/list_selector"
    android:background="@color/list_background"/>
   > </android.support.v4.widget.DrawerLayout>

文件夹layout-land中的layout main

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



<FrameLayout
    android:id="@+id/country_list_fragment"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:name="in.wptrafficanalyzer.listfragmentitemclick.CountryListFragment"

    />

<FrameLayout
    android:id="@+id/detail_fragment_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_gravity="center"
    />


<!-- Listview to display slider menu -->
<ListView
    android:id="@+id/list_slidermenu"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:choiceMode="singleChoice"
    android:divider="@color/list_divider"
    android:dividerHeight="1dp"       
    android:listSelector="@drawable/list_selector"
    android:background="@color/list_background"/>
   ></android.support.v4.widget.DrawerLayout>

Answer 1

我也对此感到困惑。我设置了导航抽屉以在我的应用程序的主要部分之间导航。然后，我希望将这些主要部分之一设置为 Master/Detail。我知道这是可能的，因为这基本上就是 Gmail 的样子，但是很难将我已经构建的内容与 Eclipse 在生成 Master/Detail Activity 时吐出的内容放在一起。

我不能只从 MainActivity（导航抽屉）启动 ItemListFragment（Master/Detail），因为 ItemListFragment 想要附加到 ItemListActivity，而不是 MainActivity，并且一个片段不能有两个活动。

我终于找到了一个关于它的教程，实际上使用了两种设计思想： http://blog.evizija.si/android-layout/

我只是按照他们的示例，在大约 5 分钟内让我的 UI 正常工作。它实际上非常简单。你让 MasterActivity 看起来更像是生成的 ItemListActivity（即实现 TaskListFragment.Callbacks，复制 onItemSelected 方法，然后加上一点 onCreate），你就完成了！

我希望这有助于解决您的问题！快乐编码！

---

更新：根据 cmets 中关于改进我的答案的反馈，详细说明所涉及的步骤（来自链接的信息）。

(1) 制作您的抽屉活动和片段，我们将它们称为 MainActivity 和一些我们在这里不关心的片段。就我个人而言，我会创建一个空的 Fragment，例如 ItemFragment，在我启动并运行 Drawer 时作为 Master/Detail 的占位符。然后，一旦抽屉按需要工作，处理主/详细信息并链接它们。

(2) 使用 IDE 向导（我正在运行 Eclipse）来制作主/从流的活动和片段。我将使用它们的默认名称来引用它们：ItemListActivity、ItemListFragment、ItemDetailActivity、ItemDetailFragment。

(3) 如果您以前使用过 Master/Detail，那么您知道您的大部分逻辑都进入了片段。将 Master/Detail 与 Drawer 结合使用时仍然如此。请注意，此时 MainActivity 和 Master/Detail 流之间没有任何联系，并且后者甚至可能无法在 UI 中访问。

(4) 关键概念： 为了将 Drawer 与 List 连接起来，我们的 MainActivity 将成为 ItemListFragment 的宿主 Activity（而不是当前的 ItemListActivity）。为了完成这项工作，我们只需将向导创建的一些 Master/Detail 魔法从 ItemListActivity 复制到 MainActivity。

(5) 具体：

(5A) MainActivity 实现 ItemListFragment.Callbacks（或 EmployeeListFragment.Callbacks、AlbumListFragment.Callbacks，无论您列出什么）并实现 onItemSelected 方法

public class MainActivity extends Activity 
                          implements OnItemClickListener, ItemListFragment.Callbacks {

(5B) 从ItemListActivity的onCreate复制部分代码，粘贴到MainActivity的onCreate。这部分：

if (findViewById(R.id.item_detail_container) != null) {
    // The detail container view will be present only in the
    // large-screen layouts (res/values-large and
    // res/values-sw600dp). If this view is present, then the
    // activity should be in two-pane mode.
    mTwoPane = true;

    // In two-pane mode, list items should be given the
    // 'activated' state when touched.
    ((ItemListFragment) getFragmentManager()
            .findFragmentById(R.id.item_list))
            .setActivateOnItemClick(true);
}

(5C) 同样从 ItemListActivity 复制 onItemSelected 方法并将其粘贴到 MainActivity。如果您告诉 Eclipse “添加未实现的方法”以响应在步骤 5A 之后引发的错误，那么您将已经有了一个 onItemSelected 方法。如果不这样做，请复制整个方法。 （根据 cmets 中的问题编辑此步骤）代码：

if (mTwoPane) {
    // In two-pane mode, show the detail view in this activity by
    // adding or replacing the detail fragment using a
    // fragment transaction.
    Bundle arguments = new Bundle();
    arguments.putString(ItemDetailFragment.ARG_ITEM_ID, id);
    ItemDetailFragment fragment = new ItemDetailFragment();
    fragment.setArguments(arguments);
    getFragmentManager().beginTransaction()
            .replace(R.id.item_detail_container, fragment)
            .commit();

} else {
    // In single-pane mode, simply start the detail activity
    // for the selected item ID.
    Intent detailIntent = new Intent(this, ItemDetailActivity.class);
    detailIntent.putExtra(ItemDetailFragment.ARG_ITEM_ID, id);
    startActivity(detailIntent);
}

(6) 然后最后一步是让MainActivity（抽屉）打开ItemListFragment。如果您已经启动了占位符 Fragment（如步骤 1 中建议的 ItemFragment），只需在 onNavigationDrawerItemSelected 方法中将 ItemFragment 替换为 ItemListFragment 即可。

希望这很清楚。如果没有，原始链接可能会比我做得更好。只需浏览到博主谈论将列表活动添加到其抽屉活动的底部即可。

干杯。

---

更新：

在被版主要求这样做后，我正在标记这个和另一个类似的问题（重复）。

那些问题：
https://stackoverflow.com/questions/25403377/combine-navigation-drawer-and-master-detail-layout
Navigation Drawer and master/detail flow

---