web-dev-qa-db-fra.com

Comment déplacer le contenu principal avec la disposition du tiroir à gauche

Je viens de vérifier comment faire un menu avec DrawerLayout ici . Mais le menu de gauche se déplace à l'avant du contenu principal. Comment puis-je le régler sur le menu et le contenu principal bouger côte à côte (le menu pousse le contenu vers la droite)?

androidandroid-ui
59
Mr. Cat

Si vous ne voulez pas utiliser de bibliothèques tierces, vous pouvez l'implémenter vous-même en remplaçant simplement onDrawerSlide à partir de ActionBarDrawerToggle. Là, vous pouvez traduire votre vue framelayout en fonction du pourcentage d’ouverture de votre tiroir.

Exemple avec code:

<?xml version="1.0" encoding="utf-8"?>
<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/content_frame"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"/>    

    <ListView Android:id="@+id/left_drawer"
    Android:layout_width="240dp"
    Android:layout_height="match_parent"
    Android:layout_gravity="start"
    Android:choiceMode="singleChoice"
    Android:divider="@Android:color/transparent"
    Android:dividerHeight="0dp"/>

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

Et ici, remplacez onDrawerSlide:

public class ConfigurerActivity extends ActionBarActivity 
{
    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    private ActionBarDrawerToggle mDrawerToggle;
    private FrameLayout frame;
    private float lastTranslate = 0.0f;

    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.left_drawer);
        frame = (FrameLayout) findViewById(R.id.content_frame);

        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, R.string.acc_drawer_open, R.string.acc_drawer_close) 
        {            
            @SuppressLint("NewApi")
            public void onDrawerSlide(View drawerView, float slideOffset)
            {
                super.onDrawerSlide(drawerView, slideOffset);
                float moveFactor = (mDrawerList.getWidth() * slideOffset);

                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) 
                {
                    frame.setTranslationX(moveFactor);
                }
                else
                {
                    TranslateAnimation anim = new TranslateAnimation(lastTranslate, moveFactor, 0.0f, 0.0f);
                    anim.setDuration(0);
                    anim.setFillAfter(true);
                    frame.startAnimation(anim);

                    lastTranslate = moveFactor;
                }
            }
        };

        mDrawerLayout.setDrawerListener(mDrawerToggle);

        // ... more of your code
    }
}

Comme setTranslationX n'est pas disponible dans les versions Android pré-nid d'abeilles, je l'ai géré à l'aide de TranslateAnimation pour les appareils de version inférieure.

J'espère que ça aide!

164
nsL

Vous voudrez peut-être utiliser cette bibliothèque de Drawer Toggles j'ai écrit. 

Je suis sûr que vous trouverez ContentDisplaceDrawerToggle pratique:

ContentDisplaceDrawerToggle mContentDisplaceToggle = new ContentDisplaceDrawerToggle(this, mDrawerLayout, R.id.content_frame);    
mDrawerLayout.setDrawerListener(mContentDisplaceToggle);

ContentDisplaceDrawerToggle fait exactement ce que vous dites. Il déplace la vue du contenu lorsque vous glissez/glissez la DrawerLayout.

Example image

Si vous souhaitez combiner différentes bascules, vous pouvez utiliser les variables ActionBarToggleWrapper ou DrawerToggleWrapper.

Les options d'utilisation sont données dans le fichier lisez-moi. 

8
Nikola Despotoski

Voici le code de travail ...

ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {
 @Override
 public void onDrawerSlide(View drawerView, float slideOffset) {
    super.onDrawerSlide(drawerView, slideOffset);
    mContainerFrame.setTranslationX(slideOffset * drawerView.getWidth());
    mDrawerLayout.bringChildToFront(drawerView);
    mDrawerLayout.requestLayout();
    //below line used to remove shadow of drawer
    mDrawerLayout.setScrimColor(Color.TRANSPARENT);
  }//this method helps you to aside menu drawer
 };
0
Ness Tyagi

La réponse est assez simple: Créez d’abord une activité NavigationDrawer.

<Android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent" />

    <Android.support.design.widget.NavigationView
        Android:id="@+id/nav_view"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_gravity="start"
        Android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

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

Ensuite, ouvrez app_bar_main.layout et attribuez un identifiant à la mise en page parent.

Disons que vous avez donné à Android: id = "@ + id/appBarMain"

Il suffit de déclarer le groupe de vues parent dans MainActivity.class avec son identifiant respectif:

et ajoutez un auditeur de tiroir à la structure de tiroir comme ci-dessous:

drawer.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                float moveFactor = 0;
                moveFactor = (drawerView.getWidth() * slideOffset);

                appBarMain.setTranslationX(moveFactor);
            }

            @Override
            public void onDrawerOpened(View drawerView) {

            }

            @Override
            public void onDrawerClosed(View drawerView) {

            }

            @Override
            public void onDrawerStateChanged(int newState) {

            }
        });

Ajoutez un code de traduction à la méthode OnDrawerSlide () comme ci-dessus et c'est tout. 

0
DalveerSinghDaiya

OP a eu la réponse. Mais pour quelqu'un d'autre qui veut cet effet, vous pouvez utiliser SlidingPaneLayout . C'est conçu à cet effet. 

En fichier XML:

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v4.widget.SlidingPaneLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@id/mainFrame"
    style="@style/MP.mainFrame" >


    <!--****************************Right Pane ****************************-->
    <LinearLayout style="@style/searchLayout">
        <Android.support.v4.widget.NestedScrollView style="@style/MP">
            <LinearLayout style="@style/MP.verticalLinearLayout">


            </LinearLayout>
        </Android.support.v4.widget.NestedScrollView>
    </LinearLayout>
    <!--****************************Right Pane ****************************-->

    <!--****************************Left Pane ****************************-->
<FrameLayout style="@style/MP.mainLayout">
    <LinearLayout Android:id="@id/fragmentContainer" style="@style/MP.fragmentContainer"/>

    <Android.support.v7.widget.Toolbar style="@style/toolbar">
        <ir.tooskar.excomponents.ExtendedTextView Android:id="@id/appTitle" style="@style/WC.appTitle"/>
        <ir.tooskar.excomponents.ExtendedTextView Android:id="@id/appBarSearchIcon" style="@style/WC.appBarSearchIcon"/>
    </Android.support.v7.widget.Toolbar>
</FrameLayout>        <!--****************************Left Pane ****************************-->

Il y a deux panneaux, droit et gauche, collent ensemble et bougent donc ensemble. Pour moi, le volet de gauche est le volet principal et la droite est masquée avec une icône en forme de bascule pour l’afficher. (Une vue avec id appBarSearchIcon).

N'oubliez pas qu'il existe un viewgroup nommé, SlidingPaneLayout qui n'a que deux enfants, Left et The Right.

Et partie importante de l'activité:

        slidingPaneLayout = (SlidingPaneLayout) findViewById(R.id.mainFrame);
//        Sets a color for covering left pane(Main Pane)
        slidingPaneLayout.setSliderFadeColor(ContextCompat.getColor(context, R.color.searchPaneFadeColor));

//        The listener for Opening the Right pane(Hidden pane)
        findViewById(R.id.appBarSearchIcon).setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view){
                slidingPaneLayout.openPane();
            }
        });

La fermeture du volet de droite est effectuée par l’API, tout comme le tiroir de navigation.

0
Arash