android - 如何使用 fragment 主细节实现抽屉导航

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....) View
无法创建

我试过了

    //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 在生成主/详细 Activity 时吐出的内容放在一起。

我不能只从 MainActivity(抽屉导航)启动 ItemListFragment(Master/Detail)，因为 ItemListFragment 想要附加到 ItemListActivity，而不是 MainActivity，并且一个 fragment 不能有两个 Activity 。

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

我只是按照他们的例子，在大约 5 分钟内让我的 UI 按要求工作。它实际上非常简单。您使 MasterActivity 看起来更像生成的 ItemListActivity(即实现 TaskListFragment.Callbacks，复制 onItemSelected 方法，以及 onCreate 的卡盘)，您就完成了!

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

更新 :根据对改进我的答案的评论中的反馈，详细说明所涉及的步骤(来自链接的信息)。

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

(2) 使用IDE 向导(我正在运行Eclipse)来制作主/从流的 Activity 和 fragment 。我将使用它们的默认名称来引用它们:ItemListActivity、ItemListFragment、ItemDetailActivity、ItemDetailFragment。

(3) 如果您以前使用过 Master/Detail，那么您知道您的大部分逻辑都进入了 fragment 。将 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 方法。如果不这样做，请复制整个方法。 (此步骤针对评论中的问题进行了编辑)代码:

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 即可。

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

干杯。

更新:

在被版主要求这样做之后，我标记了这个和另一个类似的问题(重复)。

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