web-dev-qa-db-fra.com

Tiroir de navigation Android sur les onglets

J'utilise le nouveau tiroir de navigation disponible dans la bibliothèque de support. Lors de l'utilisation du tiroir avec des onglets, le menu du tiroir s'affiche sous les onglets, comme indiqué ci-dessous. Comment puis-je m'assurer que le menu du tiroir est affiché sur les onglets. (Il devrait afficher le menu du tiroir comme s'il n'y avait pas d'onglets) 

Menu Tiroir sans onglets enter image description here

Menu tiroir avec onglets

enter image description here

26

J'ai le même problème et la réponse de Roman Nurik (équipe Android) est que le tiroir de navigation ne doit pas être utilisé avec les onglets de la barre d'action.

La discussion peut être trouvée ici: https://plus.google.com/u/1/116515063230772720916/posts/8dWEkFcbTFX

17
David TA

Créez un fragment séparé, par exemple TabsFragment, puis ajoutez-le à l'intérieur du conteneur de fragments dans votre activité principale.

Les onglets peuvent être ajoutés à l'intérieur du fragment avec le code suivant.

private FragmentTabHost mTabHost;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    mTabHost = new FragmentTabHost(getActivity());
    mTabHost.setup(getActivity(), getChildFragmentManager(), R.id.fragment1);

    mTabHost.addTab(mTabHost.newTabSpec("TabA").setIndicator("TabA"),
           TabA.class, null);
    mTabHost.addTab(mTabHost.newTabSpec("TabB").setIndicator("TabB"),
            TabB.class, null);

    return mTabHost;
}

Ici, TabA et TabB sont des fragments distincts pour les onglets. Vous pouvez implémenter votre fonctionnalité des onglets respectifs dans les fragments respectifs ..__ Référence: http://developer.Android.com/reference/Android/support/v4/app/FragmentTabHost.html

11
andinrajesh

Je ne suis pas sûr des onglets de la barre d'action, mais vous pouvez utiliser la bande d'onglets du pageur en combinaison avec le tiroir de navigation pour obtenir un modèle de navigation similaire à Google Play Musique, consultez mon message

4
Balaji

Voici la solution que j'utilise ressemble (fonctionne parfaitement): J'utilise une disposition de cadre pour pouvoir échanger des fragments et la disposition à onglets correspond aux onglets du fragment de base.

activity_main.xml

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

    <!--<include-->
    <!--Android:id="@+id/toolbar"-->
    <!--layout="@layout/toolbar"/>-->
    <FrameLayout
        Android:id="@+id/content_frame"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">

        <LinearLayout

            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:orientation="vertical">

            <Android.support.design.widget.TabLayout
                Android:id="@+id/sliding_tabs"
                Android:layout_width="match_parent"
                scrol
                Android:layout_height="wrap_content"/>

            <Android.support.v4.view.ViewPager
                Android:id="@+id/viewpager"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"/>
        </LinearLayout>
    </FrameLayout>

    <ListView
        Android:id="@+id/navList"
        Android:layout_width="200dp"
        Android:layout_height="match_parent"
        Android:layout_gravity="left|start"
        Android:background="#ffeeeeee"/>

</Android.support.v4.widget.DrawerLayout>
1
nuhbye

Je pense que c'est trop tard depuis que la question a été posée, mais quand même… .. Si vous utilisez déjà le tiroir de navigation et voulez des onglets de navigation, incluez les deux fichiers dans votre dossier de projet:

1) SlidingTabLayout.Java http://developer.Android.com/samples/SlidingTabsBasic/src/com.example.Android.common/view/SlidingTabLayout.html

2) SlidingTabStrip.Java http://developer.Android.com/samples/SlidingTabsBasic/src/com.example.Android.common/view/SlidingTabStrip.html

Dans le fragment du tiroir de navigation, incluez les éléments suivants:

private SlidingTabLayout mSlidingTabLayout;
    private  SamplePagerAdapter_tasks mPagerAdapter;
    private ViewPager mViewPager;

    public void onViewCreated(View view, Bundle savedInstanceState) {
        // BEGIN_INCLUDE (setup_viewpager)
        // Get the ViewPager and set it's PagerAdapter so that it can display items
        //fragment manager of a fragment,Return a private FragmentManager for placing and managing Fragments inside of this Fragment.

        mPagerAdapter = new SamplePagerAdapter_tasks(getChildFragmentManager(),Titles of Tabs(array of string),Numboftabs (integer));
        mViewPager = (ViewPager) view.findViewById(R.id.viewpager);
        mViewPager.setAdapter(mPagerAdapter);

        // Give the SlidingTabLayout the ViewPager, this must be done AFTER the ViewPager has had
        // it's PagerAdapter set.
        mSlidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);
        mSlidingTabLayout.setDistributeEvenly(true); // this helps to all the tabs on screen to take equal spaces (eg. if 3 tabs each would take one-third of the total space on the screen)

        mSlidingTabLayout.setViewPager(mViewPager);

        // END_INCLUDE (setup_slidingtablayout)
    }

J'espère que ça aide!!

0
zenith1234

Dans mon AppCompatActivity, j'ajoute ceci:

DrawerLayout drawerLayoutMenu =(DrawerLayout) findViewById(R.id.drawer_layout_menu);
RelativeLayout mDrawerPane =(RelativeLayout) findViewById(R.id.drawerPane);

Et j'appelle cela sur l'icône du menu de la barre d'outils

if (drawerLayoutMenu.isDrawerOpen(mDrawerPane)) {
    drawerLayoutMenu.closeDrawer(mDrawerPane);
} else {
        drawerLayoutMenu.openDrawer(mDrawerPane);
}

fichier xml 

<Android.support.v4.widget.DrawerLayout
        Android:id="@+id/drawer_layout_menu"
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        xmlns:app="http://schemas.Android.com/apk/res-auto"
        xmlns:tools="http://schemas.Android.com/tools"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">

        <FrameLayout
            Android:id="@+id/content_frame"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent">

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

                <Android.support.v7.widget.Toolbar
                    Android:id="@+id/toolbar"
                    Android:layout_width="match_parent"
                    Android:layout_height="?attr/actionBarSize"
                    Android:background="?attr/colorPrimary"
                    app:layout_scrollFlags="enterAlways"
                    app:popupTheme="@style/AppTheme.PopupOverlay">

                </Android.support.v7.widget.Toolbar>

                <Android.support.design.widget.TabLayout
                    Android:id="@+id/tabs"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"/>

                <Android.support.v4.view.ViewPager
                    Android:id="@+id/container"
                    Android:layout_width="match_parent"
                    Android:layout_height="match_parent"/>
            </LinearLayout>
        </FrameLayout>

        <!--for menu-->

        <RelativeLayout
            Android:id="@+id/drawerPane"
            Android:layout_width="270dp"
            Android:layout_height="match_parent"
            Android:orientation="vertical"
            Android:background="#fff"
            Android:layout_gravity="left|start">

            <!--you can add a ListView-->

        </RelativeLayout>

    </Android.support.v4.widget.DrawerLayout>

Vous pouvez masquer manuellement la vue responsable du rendu des onglets:

public static void setActionBarNavigationVisibility(Activity activity, boolean visible) {
    // --- If the Tabs are BELOW ActionBar (narrow screens) --- 
    int actionViewResId = Resources.getSystem().getIdentifier("action_bar_container", "id", "Android"); // @see http://stackoverflow.com/questions/20023483/how-to-get-actionbar-view
    View actionBarContainer = activity.findViewById(actionViewResId); // returns instance of com.Android.internal.widget.ActionBarContainer (inaccessible)
    try {
        Field mTabContainerField = actionBarContainer.getClass().getDeclaredField("mTabContainer");
        if (mTabContainerField != null) {
            mTabContainerField.setAccessible(true);
            View mmTabContainer = (View) mTabContainerField.get(actionBarContainer);
            if (mmTabContainer != null)
                mmTabContainer.setVisibility(visible ? View.VISIBLE : View.GONE); // use GONE, so the mTabContainer below ActionBar does not take space in layout
        }
    } catch (Exception e) {
        // TODO handle exception
    }
}

Appelez cette méthode à partir de votre implémentation de ActionBarDrawerToggle comme ceci:

public void onDrawerSlide(View drawerView, float slideOffset) {
        super.onDrawerSlide(drawerView, slideOffset);
        if (slideOffset == 0) { // 0 = drawer is closed             
            setActionBarNavigationVisibility(activity, true); //show Tabs when Drawer is closed             
        }
    }

public void onDrawerStateChanged(int newState) {
        super.onDrawerStateChanged(newState);
        //hides Tabs right after Drawer starts opening
        if (DrawerLayout.STATE_DRAGGING == newState || DrawerLayout.STATE_SETTLING == newState) {
            setActionBarNavigationVisibility(activity, false);
        }
    }

Cette solution fonctionnera parfaitement si vous utilisez ActionBar.Tabs sur un écran étroit (les onglets sont automatiquement affichés au-dessous de ActionBar). Mais si vous souhaitez gérer tous les autres scénarios de navigation (NavigationMode: List, CustomNavigationView ou Les onglets s'affichent directement dans ActionBar), la première méthode doit gérer toutes ces possibilités:

public static void setActionBarNavigationVisibility(Activity activity, boolean visible) {
    try {
        /* 1. --- If the navigation items are showing in ActionBar directly. We have 3 options Spinner, Tabs, and CustomNav ---
         (When Tabs are showing BELOW ActionBar, is handled at the end) */
        int actionViewResId = Resources.getSystem().getIdentifier("action_bar", "id", "Android"); // @see http://stackoverflow.com/questions/20023483/how-to-get-actionbar-view
        View actionBarView = activity.findViewById(actionViewResId); // returns instance of com.Android.internal.widget.ActionBarView (inaccessible)
        if (actionBarView != null) {
            int visibility = visible ? View.VISIBLE : View.INVISIBLE; // not GONE, so it still takes space in ActionBar layout

            // handle tabs navigation
            Field mTabScrollViewField = actionBarView.getClass().getDeclaredField("mTabScrollView");
            if (mTabScrollViewField != null) {
                mTabScrollViewField.setAccessible(true);
                View mTabScrollView = (View) mTabScrollViewField.get(actionBarView); // instance of com.Android.internal.widget.ScrollingTabContainerView (inaccessible)
                if (mTabScrollView != null)
                    mTabScrollView.setVisibility(visibility);
            }

            // handle Spinner navigation
            Field mSpinnerField = actionBarView.getClass().getDeclaredField("mSpinner"); // resp. mListNavLayout
            if (mSpinnerField != null) {
                mSpinnerField.setAccessible(true);
                View mSpinner = (View) mSpinnerField.get(actionBarView); // instance of Android.widget.Spinner
                if (mSpinner != null)
                    mSpinner.setVisibility(visibility);
            }

            // handle Custom navigation
            Field mCustomNavViewField = actionBarView.getClass().getDeclaredField("mCustomNavView"); // resp. mListNavLayout
            if (mCustomNavViewField != null) {
                mCustomNavViewField.setAccessible(true);
                View mCustomNavView = (View) mCustomNavViewField.get(actionBarView);
                if (mCustomNavView != null)
                    mCustomNavView.setVisibility(visibility);
            }
        }
        // 2. --- If the Tabs are BELOW ActionBar (narrow screens) ---          
        ViewParent actionBarContainer = actionBarView.getParent(); // parent of ActionBarView is com.Android.internal.widget.ActionBarContainer (inaccessible)
        Field mTabContainerField = actionBarContainer.getClass().getDeclaredField("mTabContainer");
        if (mTabContainerField != null) {
            mTabContainerField.setAccessible(true);
            View mmTabContainer = (View) mTabContainerField.get(actionBarContainer);
            if (mmTabContainer != null)
                mmTabContainer.setVisibility(visible ? View.VISIBLE : View.GONE); // now use GONE, so the mTabContainer below Actionbar does not take space in layout
        }

    } catch (Exception ex) {
        // TODO Handle exception...         
    }
}
0
Štarke

WordPress version Android ont une implémentation du problème que vous avez déclaré.

Ils ont développé une version synoptique de TabView appelée "HorizontalTabView". Pourquoi ils font cela est exactement la même chose que ce dont vous (et moi aussi) avez besoin.

WordPress github: https://github.com/WordPress/WordPress

Source connexe:

  • HorizontalTabView.Java 
  • WPActionBarActivity.Java
  • res/theme_browser_activity.xml

J'espère que cette astuce aide.

0
kencoder