Linke Menüleiste – Android Kotlin

[ad_1]

In diesem Artikel erstellen wir mit Kotlin eine linke Menüleiste in einer Android-App. Nachfolgend finden Sie den Code Ihrer Aktivität:

package com.adnantech.myapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MenuItem
import androidx.appcompat.app.ActionBarDrawerToggle
import androidx.drawerlayout.widget.DrawerLayout
import com.google.android.material.navigation.NavigationView

class HomeActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {

    lateinit var drawerLayout: DrawerLayout
    lateinit var actionBarDrawerToggle: ActionBarDrawerToggle
    lateinit var navigationView: NavigationView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_home)

        // drawer layout instance to toggle the menu icon to open
        // drawer and back button to close drawer
        drawerLayout = findViewById(R.id.drawer_layout)
        actionBarDrawerToggle =
            ActionBarDrawerToggle(this, drawerLayout, R.string.nav_open, R.string.nav_close)

        // pass the Open and Close toggle for the drawer layout listener
        // to toggle the button
        drawerLayout.addDrawerListener(actionBarDrawerToggle)
        actionBarDrawerToggle.syncState()

        // to make the Navigation drawer icon always appear on the action bar
        supportActionBar?.setDisplayHomeAsUpEnabled(true)

        navigationView = findViewById(R.id.navigationView)
        navigationView.setNavigationItemSelectedListener(this)
    }

    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        val id: Int = item.itemId
        if (id == R.id.nav_logout) {
            // logout action
        }
        return true
    }

    // override the onOptionsItemSelected()
    // function to implement
    // the item click listener callback
    // to open and close the navigation
    // drawer when the icon is clicked
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return if (actionBarDrawerToggle.onOptionsItemSelected(item)) {
            true
        } else super.onOptionsItemSelected(item)
    }
}

Sie müssen „NavigationView.OnNavigationItemSelectedListener“ implementieren und mit Ihrer Aktivität verbinden. Erstellen Sie Instanzen von „DrawerLayout“, „ActionBarDrawerToggle“ und „NavigationView“.

Erstellen Sie die folgenden 2 Attribute in Ihrer „res/values/strings.xml“:

<resources>
    <string name="app_name">My App</string>

    <!-- to toggle the open close button of the navigation drawer -->
    <string name="nav_open">Open</string>
    <string name="nav_close">Close</string>
</resources>

Und Ihre „activity_home.xml“ sollte so aussehen:

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Home content" />
    </RelativeLayout>

    <!-- this the navigation view which draws and shows the navigation drawer -->
    <!-- include the menu created in the menu folder -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/home_drawer_header"
        app:menu="@menu/navigation_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

Danach müssen wir 2 Dateien erstellen. Eine mit dem Namen „home_drawer_header.xml“ im Ordner „res/layout“. Und eine weitere mit dem Namen „navigation_menu.xml“ im Ordner „res/menu“. Es folgt der Code der Datei „res/layout/home_drawer_header.xml“:

<?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="100dp"
    android:padding="20dp">

    <TextView
        android:id="@+id/userName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="adnan" />

    <TextView
        android:id="@+id/userPhone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/userName"
        android:layout_centerVertical="true"
        android:text="12345" />

</RelativeLayout>

Und der Code von „res/menu/navigation_menu.xml“ sollte wie folgt aussehen:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="HardcodedText">

    <item
        android:id="@+id/nav_account"
        android:title="My account" />

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

    <item
        android:id="@+id/nav_logout"
        android:title="Logout" />

</menu>

Wenn Sie die TextView in Navigationsansichten integrieren möchten, können Sie diese mithilfe des folgenden Codes abrufen:

val headerView: View = navigationView.getHeaderView(0)
val userName: TextView = headerView.findViewById(R.id.userName)
val userPhone: TextView = headerView.findViewById(R.id.userPhone)

Führen Sie die App jetzt aus und Sie können die linke Menüleiste wie folgt sehen:

Linke Menüleiste – Android Kotlin
Linke Menüleiste – Android Kotlin

Fühlen Sie sich frei, unten einen Kommentar zu posten, wenn Sie danach auf Probleme stoßen. Folgen Sie weiteren unserer Android-Tutorials Hier.


Beitragsaufrufe: 9

[ad_2]

Schlagwörter: , , ,