webentwicklung-frage-antwort-db.com.de

Inhalt in der Symbolleiste anzeigen

Hallo, ich versuche, meinen Inhalt einfach unterhalb der Symbolleiste zu platzieren, aber in dem Moment, in dem ich meine Anwendung ausführe, ist etwas von dem Inhalt verborgen, wenn er darunter liegt.

Ich habe mich mit der Verwendung eines Rahmenlayouts vertraut gemacht, um zu versuchen, es zu trennen, aber ich bin ein wenig festgefahren. Ich verwende derzeit eine grundlegende Schablone für Android-Studio-Navigationsschubladen, die mit der Software geliefert wurde, und fragte mich, welche Änderungen ich vornehmen muss.

Mein Koordinatorlayout

<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:id="@+id/fragment_container"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"/>

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

Mein Schubladenlayout

<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>

Welche Änderungen muss ich vornehmen?

13
james

In vielen Ansichtsgruppen können sich ihre Kinder überschneiden. Dazu gehören FrameLayout, RelativeLayout, CoordinatorLayout und DrawerLayout. LinearLayout ist eines, bei dem sich die untergeordneten Elemente nicht überlappen können.

Die Antwort auf Ihre Frage hängt wirklich davon ab, wie das Endergebnis aussehen soll. Wenn Sie versuchen, eine Symbolleiste zu haben, die immer auf dem Bildschirm angezeigt wird und Inhalte darunter, dann brauchen Sie überhaupt kein CoordinatorLayout und AppBarLayout. Sie können einfach ein vertikales LinearLayout mit zwei Kindern verwenden:

<LinearLayout Android:orientation="vertical" ...>
    <Android.support.v7.widget.Toolbar
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        ... />

    <FrameLayout 
        Android:id="@+id/fragment_container"
        Android:layout_width="match_parent"
        Android:layout_height="0dp"
        Android:layout_weight="1"
        ... />
</LinearLayout>

Beachten Sie die Layoutattribute des FrameLayout.

Wenn Sie die fantastischen Dinge erledigen möchten, bei denen die Symbolleiste beim Scrollen des Inhalts auf dem Bildschirm angezeigt wird, benötigen Sie ein AppBarLayout, und Sie müssen Ihrem Inhaltsbereich ein besonderes Attribut wie folgt zuweisen:

<Android.support.design.widget.CoordinatorLayout>
    <Android.support.design.widget.AppBarLayout
       Android:layout_width="match_parent"
       Android:layout_height="wrap_content"
       ... >

        <Android.support.v7.widget.Toolbar
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll"
            ... />
    </Android.support.design.widget.AppBarLayout>

    <FrameLayout 
        Android:id="@+id/fragment_container"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        ... />
</Android.support.design.widget.CoordinatorLayout>
25
Karakuri
app:layout_behavior="@string/appbar_scrolling_view_behavior"

Fügen Sie diesen Code Ihrem Frame-Tag hinzu

13
Brian Hoang

Als @ Brian Hoang und @ Karakuri die Eigenschaft layout_behaviour sagten:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

scheint eine sehr gute Lösung zu sein. Auch wenn Sie derzeit keine Animationen haben, Sie jedoch in Zukunft planen, können Sie das CoordinatorLayout und ein AppBarLayout beibehalten, falls Sie in Zukunft Animationen hinzufügen möchten.


Was die Eigenschaft im Allgemeinen aus meinem Verständnis zu tun scheint, ist die Berechnung der Höhe der gesamten AppBarLayout-UI-Komponente. Die UI-Komponente, die die Eigenschaft layout_behaviour mit @ string/appbar_scrolling_view_behaviour verwendet, wird automatisch genau unter dem AppBarLayout angezeigt, unabhängig von der Höhe.

Auf diese Weise müssen keine oberen Ränder in der Benutzeroberfläche fest programmiert werden, die unter dem AppBarLayout stehen sollen.

In dem folgenden Code hat include_app_bar_with_tabs_layout (AppBarLayout) eine feste Höhe von 200dp (es kann sich um wrap_content oder etwas anderes handeln). Dann verwendet das RelativeLayout, das den Inhalt des Bildschirms enthält, die Eigenschaft layout_behaviour.


Schauen Sie sich den Code und das UI-Bild unten an:

<?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">

    <include
        layout="@layout/include_app_bar_with_tabs_layout"
        Android:layout_width="match_parent"
        <!-- this can be anything, even wrap_content -->
        Android:layout_height="200dp" />

    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:background="@color/Green"
        <!-- this tells it to be below the include_app_bar_with_tabs_layout (AppBarLayout) -->
        app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

        <Android.support.v4.view.ViewPager
            Android:id="@+id/view_pager"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:layout_above="@+id/adView" />

        <com.google.Android.gms.ads.AdView
            Android:id="@id/adView"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_alignParentBottom="true"
            Android:layout_centerHorizontal="true"
            app:adSize="BANNER"
            app:adUnitId="@string/banner_ad_unit_id"
            tools:background="@color/green"
            tools:layout_height="50dp" />
    </RelativeLayout>
</Android.support.design.widget.CoordinatorLayout>

 enter image description here

1
PrograMonks