[ERLEDIGT] Drawer mit scrollbarem Listview

LayoZz · 2017-03-27T22:00:15+0200

Hallo liebe Leute

Ich versuche einen Drawer zu erstellen, der aussieht wie bei der App Inbox (siehe Bild: Drawer_Inbox.png).
Wir haben also einen Header, einen scrollbares Listview und unten statisch die Menus.

Mein Problem ist es, einen Listview scrollbar dort einzubinden und meine Menu.xml Datei auf dem bottom des Drawers zu setzten. Ich habe viel rumprobiert und hatte sogar mal ne Listview rein bekommen, allerdings war da alles in einer Datei und ich hätte das schon gerne modular.

Ich poste mal hier meinen Code:

mainActivity:

Code:

<android.support.design.widget.NavigationView android:id="@+id/navigation_view"
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/headerlayout"
    app:menu="@menu/navigation_view_menu"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android" />

headerlayout.xml:

Code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:background="@drawable/drawerheader_background"
    android:padding="16dp"
    android:orientation="vertical"
    android:gravity="bottom">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/textUserName"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="@string/app_name"/>
    <TextView
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:layout_width="match_parent"
        android:textColor="@color/textDate"
        android:layout_height="wrap_content"
        android:text="date"/>
</LinearLayout>

navigation_view_menu.xml:

Code:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:checkableBehavior="single">

        <item
            android:id="@+id/drawer_content"
            android:title="New Location"/>

        <item
            android:id="@+id/drawer_about"
            android:title="Settings"/>

        <item
            android:id="@+id/drawer_exit"
            android:title="Impressum"/>

    </group>
</menu>

Zu guter letzt ein Bild, wie es aktuell bei mir aussieht (siehe Bild2: aktueller_stand.png).

Ich hoffe, ich habe alles nötige gepostet und meine Frage klar formulieren können (bin noch ungeübt bezüglich Foren^^).
Besten Dank im voraus!

Liebe Grüße

LayoZz

LayoZz · 2017-03-28T11:55:43+0200

@LayoZz
Hey liebes Forum

Ich war natürlich nicht ganz untätig und habe nun folgenden Stand (siehe neuer_stand.png ).

Die Listview (also die Elemente mit Test1, Test2, etc.) sind scollbar. Allerdings bewegt sich der Header nicht mit. Der soll sich nämlich wie beim großen Vorbild Inbox (Bild im letzen Oist zu finden) mit bewegen und somit mit nach oben verschwienden.

activity_main.xml:

Code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">



    <!-- Layout for Drawer and Fragments -->
    <android.support.v4.widget.DrawerLayout
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:id="@+id/drawerlayout_gesamt">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/activity_layout">


            <!-- Toolbar -->
            <android.support.v7.widget.Toolbar
                android:layout_height="wrap_content"
                android:layout_width="fill_parent"
                android:id="@+id/toolbar"
                android:background="@color/toolbarBackground"
                android:fitsSystemWindows="true">
            </android.support.v7.widget.Toolbar>



            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="activitylayout"
                android:gravity="center"/>
        </RelativeLayout>


        <RelativeLayout
            android:id="@+id/left_drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/drawerbackground"
            android:orientation="vertical"
            android:layout_gravity="start"
            android:scaleType="centerCrop">


            <android.support.design.widget.NavigationView
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:id="@+id/navView"
                android:background="#fff"
                android:layout_alignParentBottom="true"
                app:menu="@menu/navigation_view_menu">
            </android.support.design.widget.NavigationView>


            <ImageView
                android:id="@+id/image_view"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@drawable/drawerheader_background"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/textDate"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="SmallText"
                android:id="@+id/tv_date"
                android:layout_above="@+id/list_view_drawer"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/textUserName"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:text="@string/app_name"
                android:id="@+id/tv_userName"
                android:layout_above="@+id/tv_date"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true" />

            <ListView
                android:id="@+id/list_view_drawer"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/image_view"
                android:layout_above="@id/navView"
                android:choiceMode="singleChoice"/>
        </RelativeLayout>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

Die headerlayout.xml umfasst nur das Bild und die Texte darin und die navigation_view_menu.xml ist der footer des Drawers. Demnach sind sie unverändert (abgesehen von den Titeln der menus).

Persé funktioniert es, allerdings ist die activity_main.xml doch sehr lang und ich kann mir auch vorstellen, dass das ganze gut performance saugt und für erfahrene Entwickler hier ein wahrer Schmerz ist ^^
Kann mir jemand verraten, wie ich die activity_main.xml vielleicht noch etwas modularer hinbekomme? Also vielleicht den Beriech für die Activity, den Bereich für die Toolbar und den Bereich für den Drawer jeweils in eine Datei und diese dann includen oder so?

Und falls generell noch Empfehlungen, Einwände, Verbesserungsvorschläge sind, nehme ich sie auch dankend an

Besten Dank im voraus!

Grüße

Lars

LayoZz · 2017-03-31T14:26:33+0200

Ich habs Leute!

Fleißig weiter probiert und probiert.
Die Lösung ist es ein Listview mit einem statischen Footer zu erstellen.

main_activity.xml

Code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">



    <!-- Layout for Drawer and Fragments -->
    <android.support.v4.widget.DrawerLayout
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:id="@+id/drawerlayout_gesamt">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/activity_layout">


            <!-- Toolbar -->
            <android.support.v7.widget.Toolbar
                android:layout_height="wrap_content"
                android:layout_width="fill_parent"
                android:id="@+id/toolbar"
                android:background="@color/toolbarBackground"
                android:fitsSystemWindows="true">
            </android.support.v7.widget.Toolbar>



            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="activitylayout"
                android:gravity="center"/>
        </RelativeLayout>


        <RelativeLayout
            android:id="@+id/left_drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/drawerbackground"
            android:orientation="vertical"
            android:layout_gravity="start"
            android:scaleType="centerCrop">


            <android.support.design.widget.NavigationView
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:id="@+id/navView"
                android:background="#fff"
                android:layout_alignParentBottom="true"
                app:menu="@menu/drawer_menu">
            </android.support.design.widget.NavigationView>

            <ListView
                android:layout_alignParentTop="true"
                android:id="@+id/list_view_drawer"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_above="@id/navView"
                android:choiceMode="singleChoice"/>
        </RelativeLayout>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

und man benätigt eine Datei als Header

headerlayout.xml

Code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <ImageView
        android:src="@drawable/drawerheader_background"
        android:scaleType="centerCrop"
        android:layout_width="fill_parent"
        android:layout_height="180dp"
        android:id="@+id/imageView"/>

    <TextView
        android:textColor="#fff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Small Text"
        android:id="@+id/tv_date"
        android:layout_alignBottom="@+id/imageView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/AppNameHeader"
        android:text="der Android Pro"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#fff"
        android:layout_alignBottom="@+id/imageView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="16dp" />

</RelativeLayout>

Zu guter letzt muss der header im Code an den Listview hängen.

main_activity.java

Code:

    listView = (ListView) findViewById(R.id.list_view_drawer);
        View header = getLayoutInflater().inflate(R.layout.headerlayout, null);
        listView.addHeaderView(header);

Et Voilá! Da haben wir es auch schon!

Man kann bestimmt noch Code optimieren, aber von mir aus kann dieser Thread geschlossen werden

lordzwieback · 2017-03-31T19:23:00+0200

Hey, vielen Dank fürs Posten deiner Lösung.

Quick results: Click search for more Results…

[ERLEDIGT] Drawer mit scrollbarem Listview

LayoZz

Neues Mitglied

Anhänge

LayoZz

Neues Mitglied

Anhänge

LayoZz

Neues Mitglied

lordzwieback

Erfahrenes Mitglied

Ähnliche Themen