Android Design Unterstützung: NavigationView

Als Google ankündigte, dass Android-Apps den Material Design-Standards folgen sollten, gaben sie den Entwicklern nicht viele Werkzeuge an die Hand, um dieses neue Erscheinungsbild tatsächlich umzusetzen. Natürlich wurden Googles eigene Apps schnell aktualisiert und sahen fantastisch aus, aber der Rest von uns hatte nicht viel mehr als ausgefallene Designrichtlinien und keine wirklichen Komponenten, die wir in unseren Apps verwenden konnten. Daher war die Veröffentlichung der Android Design Support Library in der letzten Woche für viele eine Erleichterung. Sie verspricht, uns dabei zu helfen, schnell gut aussehende Apps zu erstellen, die mit dem Rest der Plattform konsistent sind, ohne dass wir alles selbst entwickeln müssen. Betrachten Sie sie als den UI-zentrierten Begleiter von AppCompat. Die NavigationView ist der Teil dieser Bibliothek, den ich am interessantesten fand. Sie hilft Ihnen, die elegante, über alles gleitende Navigationsschublade zu erstellen, die ein so bekannter Bestandteil von Material Apps ist. Ich werde Ihnen zeigen, wie Sie diese Komponente verwenden und wie Sie einige häufige Fehler vermeiden können. (function(d, t) { var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.src = 'https://assets.gfycat.com/js/gfyajax-0.517d.js'; s.parentNode.insertBefore(g, s); }(document, 'script'));

Grundlegende Einrichtung

Die grundlegende Einrichtung ist ziemlich einfach: Sie fügen ein DrawerLayout und eine NavigationView zu Ihrer Hauptlayout-Ressource hinzu: [xml] <android.support.v4.widget.DrawerLayout android_id="@+id/drawer_layout" xmlns_android="https://schemas.android.com/apk/res/android" xmlns_app="https://schemas.android.com/apk/res-auto" android_layout_width="match_parent" android_layout_height="match_parent" android_fitsSystemWindows="true"> <!-- Die Hauptinhaltsansicht --> <LinearLayout android_layout_width="match_parent" android_layout_height="match_parent" android_orientation="vertical"> <!-- Symbolleiste statt ActionBar, damit die Schublade nach oben gleiten kann --> <android.support.v7.widget.Toolbar android_id="@+id/toolbar" android_layout_width="match_parent" android_layout_height="@dimen/abc_action_bar_default_height_material" android_background="?attr/colorPrimary" android_minHeight="?attr/actionBarSize" android_theme="@style/AppTheme.Toolbar" app_titleTextAppearance="@style/AppTheme.Toolbar.Title"/> <!-- Der echte Inhalt kommt hier hin --> <FrameLayout android_id="@+id/content" android_layout_width="match_parent" android_layout_height="0dp" android_layout_weight="1"/> </LinearLayout> <!-- Die Navigationsschublade --> <android.support.design.widget.NavigationView android_id="@+id/navigation" android_layout_width="wrap_content" android_layout_height="match_parent" android_layout_gravity="start" android_background="@color/ternary" app_headerLayout="@layout/drawer_header" app_itemIconTint="@color/drawer_item_text" app_itemTextColor="@color/drawer_item_text" app_menu="@menu/drawer"/> </android.support.v4.widget.DrawerLayout> [/xml] Und eine drawer.xml-Menüressource für die Navigationselemente: [xml] <menu xmlns_android="https://schemas.android.com/apk/res/android"> <!-- gruppieren mit einem einzelnen ausgewählten Element, so dass nur ein Element im Navigationsmenü hervorgehoben wird --> <group android_checkableBehavior="single"> <item android_id="@+id/drawer_item_1" android_icon="@drawable/ic_info" android_title="@string/item_1"/> <item android_id="@+id/drawer_item_2" android_icon="@drawable/ic_help" android_title="@string/item_2"/> </group> </menu> [/xml] Dann verkabeln Sie es in Ihrer Activity. Beachten Sie den netten onNavigationItemSelected(MenuItem) -Callback: [java] public class MainActivity extends AppCompatActivity implementiert NavigationView.OnNavigationItemSelectedListener { private static final long DRAWER_CLOSE_DELAY_MS = 250; private static final String NAV_ITEM_ID = "navItemId"; private final Handler mDrawerActionHandler = new Handler(); private DrawerLayout mDrawerLayout; private ActionBarDrawerToggle mDrawerToggle; private int mNavItemId; @Override protected void onCreate(final Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(Symbolleiste); // Laden Sie den gespeicherten Navigationsstatus, falls vorhanden if (null == savedInstanceState) { mNavItemId = R.id.drawer_item_1; } sonst { mNavItemId = savedInstanceState.getInt(NAV_ITEM_ID); } // auf Navigationsereignisse warten NavigationView navigationView = (NavigationView) findViewById(R.id.navigation); navigationView.setNavigationItemSelectedListener(this); // Wählen Sie den richtigen Navigationsmenüpunkt navigationView.getMenu().findItem(mNavItemId).setChecked(true); // Einrichten des Hamburger-Symbols zum Öffnen und Schließen der Schublade mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close); mDrawerLayout.setDrawerListener(mDrawerToggle); mDrawerToggle.syncState(); navigate(mNavItemId); } private void navigate(final int itemId) { // die eigentliche Navigationslogik ausführen, das Hauptinhaltsfragment aktualisieren usw. } @Override public boolean onNavigationItemSelected(final MenuItem menuItem) { // Hervorgehobenes Element im Navigationsmenü aktualisieren menuItem.setChecked(true); mNavItemId = menuItem.getItemId(); // Lassen Sie nach dem Schließen der Schublade einige Zeit verstreichen, bevor Sie eine echte Navigation durchführen // damit der Benutzer sehen kann, was passiert mDrawerLayout.closeDrawer(GravityCompat.START); mDrawerActionHandler.postDelayed(new Runnable() { @Override public void run() { navigate(menuItem.getItemId()); } }, DRAWER_CLOSE_DELAY_MS); true zurückgeben; } @Override public void onConfigurationChanged(final Konfiguration newConfig) { super.onConfigurationChanged(newConfig); mDrawerToggle.onConfigurationChanged(newConfig); } @Override public boolean onOptionsItemSelected(final MenuItem item) { if (item.getItemId() == android.support.v7.appcompat.R.id.home) { return mDrawerToggle.onOptionsItemSelected(item); } return super.onOptionsItemSelected(item); } @Override public void onBackPressed() { if (mDrawerLayout.isDrawerOpen(GravityCompat.START)) { mDrawerLayout.closeDrawer(GravityCompat.START); } sonst { super.onBackPressed(); } } @Override protected void onSaveInstanceState(final Bundle outState) { super.onSaveInstanceState(outState); outState.putInt(NAV_ITEM_ID, mNavItemId); } } [/java]

Extra Stil

Mit dieser Einstellung erhalten Sie ein hübsches Menü mit einigen Standarddesigns. Wenn Sie noch ein bisschen weiter gehen möchten, können Sie der Schublade eine Kopfzeilenansicht hinzufügen und dem Navigationsmenü selbst einige Farben hinzufügen: [xml] <android.support.design.widget.NavigationView android_id="@+id/navigation" android_layout_width="wrap_content" android_layout_height="match_parent" android_layout_gravity="start" android_background="@color/drawer_bg" app_headerLayout="@layout/drawer_header" app_itemIconTint="@color/drawer_item" app_itemTextColor="@color/drawer_item" app_menu="@menu/drawer"/> [/xml] Wobei die drawer_item Farbe eigentlich eine ColorStateList ist, wobei der angekreuzte Zustand von dem aktuell aktiven Navigationsobjekt verwendet wird: [xml] <selector xmlns_android="https://schemas.android.com/apk/res/android"> <item android_color="@color/drawer_item_checked" android_state_checked="true" /> <item android_color="@color/drawer_item_default" /> </selector> [/xml]

Offene Fragen

Die aktuelle Version der Bibliothek hat ihre Grenzen. Mein Hauptproblem ist das System, das das aktuelle Element im Navigationsmenü hervorhebt. Das itemBackground-Attribut für die NavigationView behandelt den markierten Status des Elements nicht korrekt: entweder sind alle Elemente hervorgehoben oder keins. Das macht dieses Attribut für die meisten Anwendungen praktisch unbrauchbar. Weitere Probleme traten auf, als ich versuchte, mit Untermenüs in den Navigationselementen zu arbeiten. Auch hier funktionierte die Hervorhebung nicht wie erwartet: Wenn Sie das ausgewählte Element in einem Untermenü aktualisieren, verschwindet das Hervorhebungs-Overlay vollständig. Letztendlich scheint die Verwaltung des ausgewählten Elements immer noch eine Aufgabe zu sein, die manuell in der App selbst gelöst werden muss. Das ist nicht das, was ich von einer Drag-and-Drop-Komponente erwartet habe, die den Entwicklern Arbeit abnehmen soll.

Fazit

Meiner Meinung nach ist die NavigationView-Komponente ein wenig zu kurz gekommen. Mein erster Eindruck war ziemlich positiv: Ich war in der Lage, mit sehr wenig Code schnell ein schön aussehendes Navigationsmenü zu erstellen. Die Probleme mit der Hervorhebung des aktuellen Elements machen die Verwendung schwieriger, als ich es erwartet hätte, aber hoffen wir, dass diese Macken in einer kommenden Version der Design-Bibliothek beseitigt werden. Den vollständigen Quellcode des Demo-Projekts finden Sie auf GitHub: github.com/smuldr/design-support-demo.