Ich habe im neuen Material Design Side Nav Spec gesehen, dass du die Schublade über die Aktionsleiste und hinter der Statusleiste anzeigen kannst. Wie kann ich das umsetzen?
Antworten
Zu viele Anzeigen?Die neue Funktionalität im Framework und in den Support-Bibliotheken ermöglicht genau das. Es gibt drei 'Puzzlestücke':
- Verwenden von Toolbar, damit Sie Ihre Aktionsleiste in Ihre Ansichtshierarchie einbetten können.
- Machen Sie DrawerLayout
fitsSystemWindows
, so dass es hinter den Systemleisten angeordnet wird. - Deaktivieren der normalen Statusleistenfärbung von
Theme.Material
, damit DrawerLayout stattdessen dort zeichnen kann.
Ich gehe davon aus, dass Sie das neue Appcompat verwenden werden.
Zunächst sollte Ihr Layout so aussehen:
Dann in Ihrer Activity/Fragment:
public void onCreate(Bundled savedInstanceState) {
super.onCreate(savedInstanceState);
// Ihre normale Einrichtung. Blah blah ...
// Da wir eine Toolbar verwenden, sollten wir sie abrufen und als ActionBar festlegen
Toolbar toolbar = (...) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
// Nun rufen wir das DrawerLayout ab, damit wir die Statusleistenfarbe setzen können.
// Dies hat nur Auswirkungen auf Lollipop oder wenn Sie translucentStatusBar auf KitKat verwenden.
DrawerLayout drawerLayout = (...) findViewById(R.id.my_drawer_layout);
drawerLayout.setStatusBarBackgroundColor(IhreausgewählteFarbe);
}
Dann müssen Sie sicherstellen, dass das DrawerLayout hinter der Statusleiste sichtbar ist. Das machen Sie, indem Sie Ihr values-v21-Theme ändern:
values-v21/themes.xml
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
Hinweis: Wenn anstelle eines verwendet wird
das tatsächliche Layout erzielt wird, wird der gewünschte Effekt erzielt, wenn Sie fitsSystemWindows(bool)
für eine Ansicht aufrufen, die Sie aus der Methode onCreateView
zurückgeben.
@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container,
Bundle savedInstanceState) {
View mDrawerListView = inflater.inflate(
R.layout.fragment_navigation_drawer, container, false);
mDrawerListView.setFitsSystemWindows(true);
return mDrawerListView;
}
Mit der Veröffentlichung der neuesten Android Support Library (rev 22.2.0) haben wir eine Design Support Library erhalten, zu der auch eine neue Ansicht namens NavigationView gehört. Anstatt alles selbst mit dem ScrimInsetsFrameLayout
und all dem anderen Zeug zu machen, verwenden wir einfach diese Ansicht und alles wird für uns erledigt.
Beispiel
Schritt 1
Fügen Sie die Design Support Library
Ihrer build.gradle
-Datei hinzu
dependencies {
// Andere Abhängigkeiten wie appcompat
compile 'com.android.support:design:22.2.0'
}
Schritt 2
Fügen Sie die NavigationView
Ihrem DrawerLayout
hinzu:
Schritt 3
Erstellen Sie eine neue Menüressource in /res/menu
und fügen Sie die Elemente und Symbole hinzu, die Sie anzeigen möchten:
Schritt 4
Initialisieren Sie die NavigationView und behandeln Sie Klick-Ereignisse:
public class MainActivity extends AppCompatActivity {
NavigationView mNavigationView;
DrawerLayout mDrawerLayout;
// Anderes Zeug
private void init() {
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
mDrawerLayout.closeDrawers();
menuItem.setChecked(true);
switch (menuItem.getItemId()) {
case R.id.nav_home:
// TODO - Etwas tun
break;
// TODO - Andere Elemente behandeln
}
return true;
}
});
}
}
Schritt 5
Vergewissern Sie sich, dass Sie android:windowDrawsSystemBarBackgrounds
und android:statusBarColor
in values-v21
setzen, sonst wird Ihr Drawer nicht unter dem StatusBar angezeigt.
<!-- Andere Attribute wie colorPrimary, colorAccent usw. -->
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
Optionaler Schritt
Fügen Sie dem NavigationView einen Header hinzu. Erstellen Sie dazu einfach ein neues Layout und fügen Sie app:headerLayout="@layout/my_header_layout"
zum NavigationView hinzu.
Ergebnis
Notizen
- Die hervorgehobene Farbe verwendet die über das
colorPrimary
-Attribut definierte Farbe - Die Listenelemente verwenden die über das
textColorPrimary
-Attribut definierte Farbe - Die Icons verwenden die über das
textColorSecondary
-Attribut definierte Farbe
Sie können auch die Beispiel-App von Chris Banes überprüfen, die die NavigationView zusammen mit den anderen neuen Ansichten, die Teil der Design Support Library sind (wie der FloatingActionButton, TextInputLayout, Snackbar, TabLayout usw.), hervorhebt.
Alle oben genannten Ansätze sind korrekt und könnten funktionieren. Ich habe eine funktionierende Demo erstellt, die dem obigen Leitfaden folgt und auf Versionen 2.x bis 5.x getestet wurde.
Sie können von Github klonen
Das Wichtige zum Ausprobieren ist in der Hauptaktivität
toolbar = (Toolbar) findViewById(R.id.toolbar);
res = this.getResources();
this.setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeButtonEnabled(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
ScrimInsetsFrameLayout scrimInsetsFrameLayout = (ScrimInsetsFrameLayout)
findViewById(R.id.linearLayout);
scrimInsetsFrameLayout.setOnInsetsCallback(this);
}
und der Rückruf
@Override
public void onInsetsChanged(Rect insets) {
Toolbar toolbar = this.toolbar;
ViewGroup.MarginLayoutParams lp = (ViewGroup.MarginLayoutParams)
toolbar.getLayoutParams();
lp.topMargin = insets.top;
int top = insets.top;
insets.top += toolbar.getHeight();
toolbar.setLayoutParams(lp);
insets.top = top; // zurücksetzen
}
Absolut das Theme für V21 vollbringt das Wunder
<!-- Anpassungen des Themes für API 21 können hier vorgenommen werden. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/accent_material_light</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
und das ScrimInsetsFrameLayout
Jetzt wird dies mit der neuen Design Support Library noch einfacher
compile 'com.android.support:design:22.2.0'
geklont von @Chris Banes https://github.com/chrisbanes/cheesesquare
Ich verwende das Design-Support-Bibliothek. Und nur durch Verwendung eines benutzerdefinierten Themas habe ich eine transparente Statusleiste erreicht, wenn die Navigationsleiste geöffnet ist.
<!-- Passen Sie Ihr Thema hier an. -->
<item name="colorPrimary">@color/primaryColor</item>
<item name="colorPrimaryDark">@color/primaryColorDark</item>
<!-- Um die Navigationsleiste auszufüllen und ebenfalls transparent zu machen -->
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
Fügen Sie schließlich das Thema der Manifest-Datei hinzu
Vergessen Sie nicht, die Eigenschaft android:fitsSystemWindows="true"
im "DrawerLayout" zu verwenden
- See previous answers
- Weitere Antworten anzeigen