如何一起实现Navigation Drawer和SlidingTabLayout?

时间:2015-03-23 19:41:06

标签: android android-fragments android-viewpager navigation-drawer material-design

我已经实现了导航抽屉。这是activity_nav_drawer:

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

<FrameLayout android:id="@+id/container" android:layout_width="match_parent"
    android:layout_height="match_parent" />

<fragment android:id="@+id/navigation_drawer"
    android:layout_width="@dimen/navigation_drawer_width" android:layout_height="match_parent"
    android:layout_gravity="start"
    android:name="com.example.jyot.advanceparking.NavigationDrawerFragment"
    tools:layout="@layout/fragment_navigation_drawer" />

这是NavDrawer.java:

    public class NavDrawer extends ActionBarActivity
    implements NavigationDrawerFragment.NavigationDrawerCallbacks {

/**
 * Fragment managing the behaviors, interactions and presentation of the navigation drawer.
 */
private NavigationDrawerFragment mNavigationDrawerFragment;

/**
 * Used to store the last screen title. For use in {@link #restoreActionBar()}.
 */
private CharSequence mTitle;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_nav_drawer);

    mNavigationDrawerFragment = (NavigationDrawerFragment)
            getSupportFragmentManager().findFragmentById(R.id.navigation_drawer);
    mTitle = getTitle();

    // Set up the drawer.
    mNavigationDrawerFragment.setUp(
            R.id.navigation_drawer,
            (DrawerLayout) findViewById(R.id.drawer_layout));
}


@Override
public void onNavigationDrawerItemSelected(int position) {

    Fragment objFragment = null;

    switch(position){
        case 0:
            objFragment = new Menu1_Fragment();
            break;
        case 1:
            objFragment = new Menu2_Fragment();
            break;
        case 2:
            objFragment = new Menu3_Fragment();
            break;
    }

    // update the main content by replacing fragments
    FragmentManager fragmentManager = getSupportFragmentManager();
    fragmentManager.beginTransaction()
            .replace(R.id.container, objFragment)
            .commit();
}

public void onSectionAttached(int number) {
    switch (number) {
        case 1:
            mTitle = getString(R.string.title_section1);
            break;
        case 2:
            mTitle = getString(R.string.title_section2);
            break;
        case 3:
            mTitle = getString(R.string.title_section3);
            break;
    }
}

public void restoreActionBar() {
    ActionBar actionBar = getSupportActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
    actionBar.setDisplayShowTitleEnabled(true);
    actionBar.setTitle(mTitle);
}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
    if (!mNavigationDrawerFragment.isDrawerOpen()) {
        // Only show items in the action bar relevant to this screen
        // if the drawer is not showing. Otherwise, let the drawer
        // decide what to show in the action bar.
        getMenuInflater().inflate(R.menu.nav_drawer, menu);
        restoreActionBar();
        return true;
    }
    return super.onCreateOptionsMenu(menu);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}

/**
 * A placeholder fragment containing a simple view.
 */
public static class PlaceholderFragment extends Fragment {
    /**
     * The fragment argument representing the section number for this
     * fragment.
     */
    private static final String ARG_SECTION_NUMBER = "section_number";

    /**
     * Returns a new instance of this fragment for the given section
     * number.
     */
    public static PlaceholderFragment newInstance(int sectionNumber) {
        PlaceholderFragment fragment = new PlaceholderFragment();
        Bundle args = new Bundle();
        args.putInt(ARG_SECTION_NUMBER, sectionNumber);
        fragment.setArguments(args);
        return fragment;
    }

    public PlaceholderFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_nav_drawer, container, false);
        return rootView;
    }

    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        ((NavDrawer) activity).onSectionAttached(
                getArguments().getInt(ARG_SECTION_NUMBER));
    }
}

}

导航抽屉中的每个项目都对应一个片段,即Menu1_Fragment,Menu2_Fragment,Menu3_Fragment,每个片段都有自己的布局文件。

现在我想在导航抽屉的第一项(即Menu1_Fragment)中实现SlidingTabLayout。

我该怎么做?我已经看了很多教程但是所有这些教程都在单独的Activity中实现了SlidingTabLayout,但是我想在导航抽屉的片段中实现它。 (或者它可以在导航抽屉活动中实现,只是第一个片段,我不知道)。

我已经复制了SlidingTabLayout.java和SlidingTabStrip.java的java源文件。请建议我如何继续这个。

2 个答案:

答案 0 :(得分:2)

想出来。遵循本教程:

http://www.android4devs.com/2015/01/how-to-make-material-design-sliding-tabs.html

我在片段而不是活动上实现了本教程。该片段是我的导航抽屉的第一部分或片段。唯一的区别是我在Fragment的布局和Java文件中编写了代码,而不是我的NavDrawer Activity的文件。 Java代码需要用 onCreateView()而不是 onCreate()来编写,因为它是一个片段。其次在Fragment的Java代码中,我们需要在 ViewPagerAdapter 的构造函数调用中传递参数 getChildFragmentManager 而不是 getSupportFragmentManager

这是Java代码:

    package com.example.jyot.advanceparking;

    public class Menu1_Fragment extends Fragment {

ViewPager pager;
ViewPagerAdapter adapter;
SlidingTabLayout tabs;
CharSequence Titles[]={"Home","Events"};
int Numboftabs =2;

View rootView;

@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    rootView = inflater.inflate(R.layout.menu1_layout, container, false);

    // Creating The ViewPagerAdapter and Passing Fragment Manager, Titles fot the Tabs and Number Of Tabs.
    adapter =  new ViewPagerAdapter(getChildFragmentManager(), Titles, Numboftabs);

    // Assigning ViewPager View and setting the adapter
    pager = (ViewPager) rootView.findViewById(R.id.pager);
    pager.setAdapter(adapter);

    // Assiging the Sliding Tab Layout View
    tabs = (SlidingTabLayout) rootView.findViewById(R.id.tabs);
    tabs.setDistributeEvenly(true); // To make the Tabs Fixed set this true, This makes the tabs Space Evenly in Available width

    // Setting the ViewPager For the SlidingTabsLayout
    tabs.setViewPager(pager);

    return rootView;
}

}

在此之后,按照教程原样进行操作。

答案 1 :(得分:0)

这是一个很长的答案,但这样做的方法是使用RelativeLayout代替FrameLayout并使用FrameLayout中的RelativeLayout

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<FrameLayout android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<!-- Sliding Tabs Go here -->

</RelativeLayout>

以下是使用Material Design支持的好教程

How To Make Material Design Sliding Tabs

不要担心ToolBar(如果您没有使用)并根据需要进行更改!

希望能帮助您,如果您收到任何错误,请告诉我们! 干杯