Android Toolbar Tutorial: XML, Kotlin & Tilpasning

Innledning

Verktøylinjen, også kjent som Toolbar, er en grunnleggende byggeblokk i Android-applikasjoner. Den tilbyr en konsekvent måte å vise applikasjonstittel, relevante handlinger og navigasjonselementer på tvers av ulike enheter og skjermstørrelser. Denne veiledningen vil føre deg gjennom prosessen med å implementere verktøylinjen i Android-prosjekter ved å bruke både XML-layout og programmeringsspråket Kotlin.

XML-layout: Verktøylinjeimplementering

Opprettelse av verktøylinje

Å integrere en verktøylinje i din XML-layout er en enkel prosess. Legg til følgende kode i din activity_main.xml-fil:

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

Dette vil definere en verktøylinje med en bakgrunnsfarge basert på din colorPrimary-farge og et mørkt tema.

Konfigurering av verktøylinje

Etter opprettelsen kan verktøylinjen konfigureres ytterligere gjennom setSupportActionBar()-funksjonen i aktivitetsklassen din:

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

    // Aktiver verktøylinjen som applikasjonens handlingslinje
    setSupportActionBar(toolbar)
}

Dette vil etablere verktøylinjen som hovedlinjen for navigasjon og visning av tittel i applikasjonen din.

Kotlin: Verktøylinjeintegrering

Bruk av Kotlin Android Extensions

Kotlin Android Extensions forenkler tilgangen til visningselementer definert i XML-layout fra Kotlin-koden. For å aktivere dette, legg til følgende importlinje i toppen av aktivitetsklassen:

import kotlinx.android.synthetic.main.activity_main.*

Dette vil generere utvidelsesfunksjoner som gir deg direkte tilgang til visningene, som for eksempel toolbar, deklarert i XML-layouten.

Konfigurering av verktøylinje

Med Kotlin Android Extensions kan verktøylinjen konfigureres som følger:

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

    // Aktiver verktøylinjen som applikasjonens handlingslinje
    toolbar.setSupportActionBar(this)
}

Dette oppnår samme funksjonalitet som å bruke setSupportActionBar()-funksjonen, men med en mer direkte tilgang til verktøylinjeelementet.

Tittel og undertittel

Angi tittel

Bruk setTitle()-funksjonen for å definere hovedtittelen som vises i verktøylinjen:

toolbar.setTitle("Min applikasjon")

Angi undertittel

Bruk setSubtitle()-funksjonen for å legge til en undertittel under hovedtittelen i verktøylinjen:

toolbar.setSubtitle("En enkel Android-app")

Handlinger

Legge til handlingselementer

Handlinger representerer menyvalg som kan vises i verktøylinjen. For å legge til slike handlingselementer, bruk inflateMenu()-funksjonen:

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    menuInflater.inflate(R.menu.main_menu, menu)
    return true
}

Dette vil laste inn definisjonene fra main_menu.xml-filen til menyobjektet.

Håndtering av klikk på handlingselementer

For å håndtere brukernes interaksjon med handlingselementene, bruk onOptionsItemSelected()-funksjonen:

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    when (item.itemId) {
        R.id.action_settings -> {
            // Håndter klikk på innstillinger
            return true
        }
        else -> {
            return super.onOptionsItemSelected(item)
        }
    }
}

Handlinger med ikoner

For å vise ikoner ved siden av handlingselementene, spesifiser android:icon-attributtet i menu.xml-filen:

<item
    android:id="@+id/action_settings"
    android:icon="@drawable/ic_settings"
    android:title="@string/settings" />

Navigasjon

Opprette en Tilbake-knapp

Verktøylinjen kan også inkludere en Tilbake-knapp, som muliggjør navigasjon tilbake til den forrige aktiviteten. Bruk setDisplayHomeAsUpEnabled()-funksjonen for å legge til denne knappen:

supportActionBar?.setDisplayHomeAsUpEnabled(true)

Håndtering av Tilbake-klikk

Når en Tilbake-knapp er lagt til, må klikk på denne håndteres i onOptionsItemSelected()-funksjonen:

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    when (item.itemId) {
        android.R.id.home -> {
            // Håndter klikk på Tilbake-knappen
            finish()
            return true
        }
        else -> {
            return super.onOptionsItemSelected(item)
        }
    }
}

Tilpasning

Endring av bakgrunnsfarge

Bruk setBackgroundColor()-funksjonen for å endre bakgrunnsfargen til verktøylinjen:

toolbar.setBackgroundColor(Color.BLUE)

Endring av tekstfarge

Bruk setTextColor()-funksjonen for å endre fargen på teksten i verktøylinjen:

toolbar.setTextColor(Color.WHITE)

Endring av størrelse

Bruk setMinimumHeight()-funksjonen for å justere høyden på verktøylinjen:

toolbar.setMinimumHeight(100)

Konklusjon

Verktøylinjen er en fleksibel og kraftfull komponent som sikrer et konsistent grensesnitt i Android-applikasjoner. Ved å utnytte XML-layout og Kotlin kan du effektivt implementere og konfigurere verktøylinjen slik at den passer dine behov. Enten det dreier seg om å vise en tittel, tilby handlinger eller gi navigasjonsmuligheter, vil verktøylinjen være et verdifullt element i applikasjonen din.

Ofte stilte spørsmål (FAQ)

Hva er forskjellen mellom ActionBar og en Toolbar?

ActionBar er en eldre komponent som er erstattet av Toolbar i nyere Android-versjoner. Toolbar tilbyr større fleksibilitet og tilpasningsmuligheter.

Hvordan legger jeg til en menyknapp i verktøylinjen?

Legg til en menyknapp ved å laste inn en menyressursfil i onCreateOptionsMenu()-funksjonen.

Hvordan endrer jeg ikonet for en handling?

Endre ikonet for en handling ved å spesifisere android:icon-attributtet i menu.xml-filen.

Hvordan oppretter jeg en Tilbake-knapp som navigerer tilbake?

Bruk setDisplayHomeAsUpEnabled()-funksjonen for å legge til en Tilbake-knapp og håndter klikk i onOptionsItemSelected()-funksjonen.

Hvordan endrer jeg bakgrunnsfargen på verktøylinjen?

Bruk setBackgroundColor()-funksjonen for å tilpasse bakgrunnsfargen.

Hvordan legger jeg til en logo i verktøylinjen?

Legg til en logo ved å bruke setLogo()-funksjonen og angi en bilderesurss.

Hvordan legger jeg til en undertittel til verktøylinjen?

Bruk setSubtitle()-funksjonen for å vise en undertittel under hovedtittelen.

Hvordan endrer jeg størrelsen på verktøylinjen?

Bruk setMinimumHeight()-funksjonen for å justere høyden på verktøylinjen.

Hvordan tilpasser jeg stilen til verktøylinjen?

Tilpass stilen ved å bruke setTheme()-funksjonen og angi en egen temastil.