So implementieren Sie MiniDrawer mit mikepenz/MaterialDrawer

Question

Ich versuche, MiniDrawer mit mikepenz/MaterialDrawer Github-Bibliothek zu implementieren. Ich könnte etwas Ergebnis als unteres Bild bekommen. aber der obere Teil von MiniDrawer wird von der Toolbar ausgeblendet. Wie kann ich dieses Problem lösen?

Dies ist MainActivity.Java

public class MainActivity extends AppCompatActivity { 

    private Drawer result = null; 
    private MiniDrawer miniResult = null; 
    private Crossfader crossFader; 

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

     Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
     setSupportActionBar(toolbar); 

     FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); 
     fab.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View view) { 
       Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) 
         .setAction("Action", null).show(); 
      } 
     }); 

     result = new DrawerBuilder() 
       .withActivity(this) 
       .withToolbar(toolbar) 
       .withTranslucentNavigationBar(false) 
       .addDrawerItems(
         new PrimaryDrawerItem().withName(R.string.drawer_item_compact_header).withIcon(GoogleMaterial.Icon.gmd_wb_sunny).withIdentifier(1), 
         new PrimaryDrawerItem().withName(R.string.drawer_item_action_bar_drawer).withIcon(FontAwesome.Icon.faw_home).withBadge("22").withBadgeStyle(new BadgeStyle(Color.RED, Color.RED)).withIdentifier(2).withSelectable(false), 
         new PrimaryDrawerItem().withName(R.string.drawer_item_multi_drawer).withIcon(FontAwesome.Icon.faw_gamepad).withIdentifier(3), 
         new PrimaryDrawerItem().withName(R.string.drawer_item_non_translucent_status_drawer).withIcon(FontAwesome.Icon.faw_eye).withIdentifier(4), 
         new PrimaryDrawerItem().withDescription("A more complex sample").withName(R.string.drawer_item_advanced_drawer).withIcon(GoogleMaterial.Icon.gmd_adb).withIdentifier(5), 
         new SectionDrawerItem().withName(R.string.drawer_item_section_header), 
         new SecondaryDrawerItem().withName(R.string.drawer_item_open_source).withIcon(FontAwesome.Icon.faw_github), 
         new SecondaryDrawerItem().withName(R.string.drawer_item_contact).withIcon(GoogleMaterial.Icon.gmd_format_color_fill).withTag("Bullhorn"), 
         new DividerDrawerItem(), 
         new SwitchDrawerItem().withName("Switch").withIcon(Octicons.Icon.oct_tools).withChecked(true).withOnCheckedChangeListener(onCheckedChangeListener), 
         new ToggleDrawerItem().withName("Toggle").withIcon(Octicons.Icon.oct_tools).withChecked(true).withOnCheckedChangeListener(onCheckedChangeListener) 
       ) // add the items we want to use with our Drawer 
       .withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() { 
        @Override 
        public boolean onItemClick(View view, int position, IDrawerItem drawerItem) { 
         if (drawerItem instanceof Nameable) { 
          Toast.makeText(MainActivity.this, ((Nameable) drawerItem).getName().getText(MainActivity.this), Toast.LENGTH_SHORT).show(); 
         } 
         return false; 
        } 
       }) 
       .withGenerateMiniDrawer(true) 
       .withSavedInstance(savedInstanceState) 
       .buildView(); 

     miniResult = result.getMiniDrawer(); 

     int firstWidth = (int) UIUtils.convertDpToPixel(300, this); 
     int secondWidth = (int) UIUtils.convertDpToPixel(72, this); 

     crossFader = new Crossfader() 
       .withContent(findViewById(R.id.main_content)) 
       .withFirst(result.getSlider(), firstWidth) 
       .withSecond(miniResult.build(this), secondWidth) 
       .withSavedInstance(savedInstanceState) 
       .build(); 

     miniResult.withCrossFader(new CrossfadeWrapper(crossFader)); 

     //define a shadow (this is only for normal LTR layouts if you have a RTL app you need to define the other one 
     crossFader.getCrossFadeSlidingPaneLayout().setShadowResourceLeft(R.drawable.material_drawer_shadow_left); 
    } 

    private OnCheckedChangeListener onCheckedChangeListener = new OnCheckedChangeListener() { 
     @Override 
     public void onCheckedChanged(IDrawerItem drawerItem, CompoundButton buttonView, boolean isChecked) { 
      if (drawerItem instanceof Nameable) { 
       Log.i("material-drawer", "DrawerItem: " + ((Nameable) drawerItem).getName() + " - toggleChecked: " + isChecked); 
      } else { 
       Log.i("material-drawer", "toggleChecked: " + isChecked); 
      } 
     } 
    }; 

    @Override 
    protected void onSaveInstanceState(Bundle outState) { 
     //add the values which need to be saved from the drawer to the bundle 
     outState = result.saveInstanceState(outState); 
     //add the values which need to be saved from the crossFader to the bundle 
     outState = crossFader.saveInstanceState(outState); 
     super.onSaveInstanceState(outState); 
    } 

    @Override 
    public void onBackPressed() { 
     //handle the back press :D close the drawer first and if the drawer is closed close the activity 
     if (crossFader != null && crossFader.isCrossFaded()) { 
      crossFader.crossFade(); 
     } else { 
      super.onBackPressed(); 
     } 
    } 

    @Override 
    public boolean onCreateOptionsMenu(Menu menu) { 
     // Inflate the menu; this adds items to the action bar if it is present. 
     getMenuInflater().inflate(R.menu.menu_main, menu); 
     menu.findItem(R.id.menu_1) 
       .setIcon(new IconicsDrawable(this, FontAwesome.Icon.faw_repeat) 
       .color(Color.WHITE).actionBar()); 
     return true; 
    } 

    @Override 
    public boolean onOptionsItemSelected(MenuItem item) { 

     switch (item.getItemId()){ 
      case R.id.menu_1: 
       crossFader.crossFade(); 
       return true; 
      case R.id.act_settings: 
       return true; 
      default: 
     } 

     return super.onOptionsItemSelected(item); 
    } 
} 

Diese activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout 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" 
    android:fitsSystemWindows="true" 
    tools:context="com.sldroids.minidrawer_v3.MainActivity"> 

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

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

    </android.support.design.widget.AppBarLayout> 

    <include layout="@layout/content_main" /> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="bottom|end" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@android:drawable/ic_dialog_email" /> 

</android.support.design.widget.CoordinatorLayout> 

Answer 1

ist @sendtodilanka das Problem ist, dass Sie die Crosssfader als Mutter der main_content Ansicht hinzufügen , die ein direktes Kind Ihrer CoordinatorLayout ist.

Als CoordinatorLayout ist ähnlich der FrameLayout und Ansichten überlappt Ihre Crossfader wird einfach unter dem AppBarLayout angezeigt werden, die Sie definiert haben, über die main_content zu sein.

Um die Crossfader unter dem Toolbar erhalten Sie eine neue View um Ihre main_content hinzufügen sollten, lassen Sie uns einen FrameLayout wählen, die das Attribut hat (nicht zu vergessen die appBarLayout ID Ihre AppBarLayout zu definieren) xml app:layout_behavior="@string/appbar_scrolling_view_behavior"

Nach Dies wird die Crossfader wird als Kind der FrameLayout wir oben hinzugefügt, die unter der AppBarLayout angezeigt wird aufgeblasen.

Eine detailliertere Information hierzu finden Sie unter here.

---

Also Ihr Layout wird wie folgt aussehen:

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout 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" 
    android:fitsSystemWindows="true" 
    tools:context="com.sldroids.minidrawer_v3.MainActivity"> 

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

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

    </android.support.design.widget.AppBarLayout> 


    <FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <include layout="@layout/content_main" /> 
    </FrameLayout> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="bottom|end" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@android:drawable/ic_dialog_email" /> 

</android.support.design.widget.CoordinatorLayout>