Comment déplacer le contenu principal avec le côté gauche du tiroir

Juste vérifié comment faire un menu avec DrawerLayout ici . Mais le menu de gauche avance sur le contenu principal. Comment puis-je définir le menu et le contenu principal se déplacer côte à côte (le menu pousse le contenu vers la droite)?

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

Exemple avec le code:

     

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.ssortingng.acc_drawer_open, R.ssortingng.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 } } 

Depuis que setTranslationX n’est pas disponible dans les versions Android pré-Honeycomb, je l’ai géré en utilisant TranslateAnimation pour les appareils de version inférieure.

J’espère que cela aide!

Vous voudrez peut-être utiliser cette bibliothèque de Toggle Drawer Toggles que j’ai écrite.

Je suis sûr que vous trouverez ContentDisplaceDrawerToggle scope de main:

 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 de contenu lorsque vous glissez / sortez le DrawerLayout .

Exemple d'image

Si vous voulez combiner différentes options, vous pouvez utiliser ActionBarToggleWrapper ou DrawerToggleWrapper

Les options d’utilisation sont indiquées dans le fichier lisez-moi.

Voici le code de travail …

 ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.ssortingng.navigation_drawer_open, R.ssortingng.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 }; 

OP a eu la réponse. Mais pour quelqu’un qui veut cet effet, peut utiliser SlidingPaneLayout . Il est conçu à cet effet.

En fichier XML:

                    

Il y a deux vitres, à droite et à gauche, collées entre elles et se déplaçant ainsi ensemble. Pour moi, le volet de gauche est le volet principal et le droit est masqué avec une icône de bascule pour l’afficher. (Une vue avec id appBarSearchIcon ).

Rappelez-vous qu’il existe un groupe de vues nommé SlidingPaneLayout qui n’a que deux enfants, The Left et The Right .

Et une 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 droit est effectuée par l’API, tout comme le tiroir de navigation.

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

     

Ouvrez ensuite app_bar_main.layout et atsortingbuez un identifiant à la mise en page parente.

Disons que vous avez donné Android: id = “@ + id / appBarMain”

Déclarez simplement le groupe de visualisation parent dans MainActivity.class avec l’id respectif:

et append un auditeur de tiroir au 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 dans la méthode OnDrawerSlide () comme ci-dessus et c’est tout.

Dans le deuxième jeu de mise en page

 android:layout_gravity="start"