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