Android 如何从导航抽屉中打开一个新片段？

How to open a new fragment from the navigation drawer?

提问by johgru

I'm using developer.android.com guides to build an app. I choosed "Navigation: Navigation Drawer" when I made a new project in Android Studio. I have searched the internet for answers to my questions but I can't find any that works. Sorry about this, I'm new to programming.

我正在使用 developer.android.com 指南来构建应用程序。我在 Android Studio 中创建一个新项目时选择了“导航：导航抽屉”。我在互联网上搜索了我的问题的答案，但找不到任何有效的答案。抱歉，我是编程新手。

1. How do I make my app open a new fragment in the main view when clicking in the navigation drawer?
2. Is it possible to open multiple swipeable fragments with tabs when clicking in the navigation drawer?
3. How do I make a "title" expandable/collapsible?

1. 单击导航抽屉时，如何让我的应用程序在主视图中打开一个新片段？
2. 单击导航抽屉时，是否可以使用选项卡打开多个可滑动片段？
3. 如何使“标题”可展开/可折叠？

http://developer.android.com/design/patterns/navigation-drawer.htmlhttp://developer.android.com/training/implementing-navigation/nav-drawer.html

http://developer.android.com/design/patterns/navigation-drawer.html http://developer.android.com/training/implementing-navigation/nav-drawer.html

This is how I want the layout to be like:

这就是我希望布局的样子：

title_section* not section_title ;)

title_section* 不是 section_title ;)

回答by Aman Mundra

Navigation Drawer is a new and trending design these days. We use two layouts: main content layout and the drawer list layout while designing the xml.layout(layout) for the navigation drawer activity. Here I'm answering all your silly questions.

导航抽屉是当今一种新的趋势设计。我们使用两种布局：主要内容布局和抽屉列表布局，同时为导航抽屉活动设计 xml.layout(layout)。我在这里回答你所有愚蠢的问题。

How do I make my app open a new fragment in the main view when clicking in the navigation drawer?

单击导航抽屉时，如何让我的应用程序在主视图中打开一个新片段？

simply add clicklistener on the drawer list items and replace fragments in the main content depending upon the position of the list item clicked.

只需在抽屉列表项上添加 clicklistener 并根据单击的列表项的位置替换主要内容中的片段。

Sample code:

示例代码：

    // The click listener for ListView in the navigation drawer
    @SuppressWarnings("unused")
    private class DrawerItemClickListener implements ListView.OnItemClickListener {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            selectItem(position);
        }
    }

    private void selectItem(int position) {

        Fragment newFragment;
        FragmentTransaction transaction = getFragmentManager().beginTransaction();

        switch (position) {
        case 0:
            newFragment = new f1();
            transaction.replace(R.id.content_frame, newFragment);
            transaction.addToBackStack(null);
            transaction.commit();
            break;

        case 1:
            newFragment = new f2();
            transaction.replace(R.id.content_frame, newFragment);
            transaction.addToBackStack(null);
            transaction.commit();
            break;

        case 2:
            newFragment = new f3();
            transaction.replace(R.id.content_frame, newFragment);
            transaction.addToBackStack(null);
            transaction.commit();
            break;

        case 3:
            newFragment = new f4();
            transaction.replace(R.id.content_frame, newFragment);
            transaction.addToBackStack(null);
            transaction.commit();
            break;  


        }
        //DrawerList.setItemChecked(position, true);
        setTitle(ListTitles[position]);
        DrawerLayout.closeDrawer(DrawerList);   
    }

Here f1, f2. f3 and f4 are different fragments each having its own layout. you have to create separate java classes for them by inheriting the fragment class.

这里 f1，f2。f3 和 f4 是不同的片段，每个片段都有自己的布局。您必须通过继承片段类为它们创建单独的 Java 类。

Is it possible to open multiple swipeable fragments with tabs when clicking in the navigation drawer?

单击导航抽屉时，是否可以使用选项卡打开多个可滑动片段？

In order implement tabs within a fragment you can use a tabhost inside that particular fragment. Suppose you want to add tabs in fragment f_main.

为了在片段中实现选项卡，您可以在该特定片段中使用 tabhost。假设您要在片段 f_main 中添加选项卡。

layout for F_main.xml

F_main.xml 的布局

<TabHost 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:orientation="horizontal" />

        <FrameLayout
            android:id="@+id/tabFrameLayout"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>

</TabHost>

Then make other fragments f_tab1 and f_tab2 with their corresponding layouts and java classes. Layouts for the two tab fragments can be same or different. here I'm taking them same or a common layout.

然后用它们对应的布局和java类制作其他片段f_tab1和f_tab2。两个选项卡片段的布局可以相同或不同。在这里，我采用相同或通用的布局。

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TextView android:id="@+id/google_map"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:text="MAP"/>

    </LinearLayout>

Code for F_tab1.java fragment

F_tab1.java 片段的代码

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class F_tab1 extends Fragment {

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

        View view=inflater.inflate(R.layout.friends_list, container,false);


        return view;
    }

}

Code for another fragment. i.e F_tab2.java

另一个片段的代码。即 F_tab2.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class F_tab2 extends Fragment {

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

        View view=inflater.inflate(R.layout.friends_list, container,false);


        return view;
    }

}

Now simply use clicklistener in the drawer list as mentioned earlier to load F_main on item click in the drawer list which will further load the tabs in the F_main fragmnet in the main content view.

现在只需使用前面提到的抽屉列表中的 clicklistener 在抽屉列表中的项目单击时加载 F_main，这将进一步加载主内容视图中 F_main fragmnet 中的选项卡。

How do I make a "title" expandable/collapsible?

如何使“标题”可展开/可折叠？

Well I don't know wheather the NV drawer provides this feature or not. But it provides a feature to toggle the action bar title depending upon the drawer item selected or the main content fragment loaded.

好吧，我不知道 NV 抽屉是否提供此功能。但它提供了一个功能，可以根据选择的抽屉项目或加载的主要内容片段来切换操作栏标题。

As discussed in the Navigation Drawer design guide, you should modify the contents of the action bar when the drawer is visible, such as to change the title and remove action items that are contextual to the main content. The following code shows how you can do so by overriding DrawerLayout.DrawerListener callback methods with an instance of the ActionBarDrawerToggle class as follows

正如导航抽屉设计指南中所讨论的，当抽屉可见时，您应该修改操作栏的内容，例如更改标题并删除与主要内容相关的操作项。以下代码显示了如何通过使用 ActionBarDrawerToggle 类的实例覆盖 DrawerLayout.DrawerListener 回调方法来实现此目的，如下所示

 public class MainActivity extends Activity {
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    private CharSequence mDrawerTitle;
    private CharSequence mTitle;
    ...

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ...

        mTitle = mDrawerTitle = getTitle();
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {

            /** Called when a drawer has settled in a completely closed state. */
            public void onDrawerClosed(View view) {
                getActionBar().setTitle(mTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }

            /** Called when a drawer has settled in a completely open state. */
            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mDrawerTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }
        };

        // Set the drawer toggle as the DrawerListener
        mDrawerLayout.setDrawerListener(mDrawerToggle);
    }

    /* Called whenever we call invalidateOptionsMenu() */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        // If the nav drawer is open, hide action items related to the content view
        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
        menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
        return super.onPrepareOptionsMenu(menu);
    }
    }