Android Toolbar Tutorial – XML Layout og Kotlin

Introduksjon

Toolbar er en viktig komponent i Android-applikasjoner. Den gir en enhetlig måte å vise tittelen på appen, handlinger og navigasjonsknapper på tvers av forskjellige enheter og skjermstørrelser. Denne opplæringen vil guide deg gjennom å bruke Toolbar i Android-applikasjoner, både med XML-layout og Kotlin.

XML-layout

Opprette en Toolbar

Legge til en Toolbar i XML-layouten din er enkelt. Legg til følgende kode i activity_main.xml-filen din:

xml
<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 opprette en Toolbar med en bakgrunnsfarge som samsvarer med colorPrimary-fargen din og en mørk tematil.

Konfigurere Toolbar

Etter at du har opprettet en Toolbar, kan du konfigurere den videre ved å bruke setSupportActionBar()-metoden i aktivitetsklassen din:

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

// Konfigurer Toolbar som handlingslinje
setSupportActionBar(toolbar)
}


Dette vil angi Toolbar som handlingslinjen for aktiviteten din, noe som vil gjøre den til den primære navigasjons- og tittellinjen.

Kotlin

Bruke Kotlin Android Extensions

Kotlin Android Extensions gir en mer praktisk måte å få tilgang til Android-visninger fra Kotlin-koden din på. For å bruke Kotlin Android Extensions, legg til følgende linje øverst i aktivitetsklassen din:

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


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

Konfigurere Toolbar

Ved å bruke Kotlin Android Extensions kan du konfigurere Toolbar som følger:

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

// Konfigurer Toolbar som handlingslinje
toolbar.setSupportActionBar(this)
}


Dette har samme effekt som å bruke setSupportActionBar()-metoden i XML-layouten.

Tittel og undertittel

Sette tittel

For å angi tittelen på Toolbar, bruk setTitle()-metoden:

kotlin
toolbar.setTitle("Min app")


Sette undertittel

For å angi undertittelen til Toolbar, bruk setSubtitle()-metoden:

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


Handlinger

Legge til handlinger

Handlinger er menyelementer som kan vises i Toolbar. For å legge til en handling, bruk inflateMenu()-metoden:

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


Dette vil blåse opp main_menu.xml-filen til menyobjektet.

Håndtere klikk på handlinger

For å håndtere klikk på handlinger, bruk onOptionsItemSelected()-metoden:

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


Handlinger med ikoner

For å legge til ikoner til handlinger, angi android:icon-attributtet i menu.xml-filen:

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


Navigasjon

Opprette en Tilbake-knapp

Toolbar kan også brukes til å legge til en Tilbake-knapp som gjør at brukere kan navigere tilbake til forrige aktivitet. For å legge til en Tilbake-knapp, bruk setDisplayHomeAsUpEnabled()-metoden:

kotlin
supportActionBar?.setDisplayHomeAsUpEnabled(true)


Håndtere Tilbake-klikk

Hvis du har lagt til en Tilbake-knapp, må du håndtere klikk på den i onOptionsItemSelected()-metoden:

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


Tilpasning

Endre bakgrunnsfarge

For å endre bakgrunnsfargen til Toolbar, bruk setBackgroundColor()-metoden:

kotlin
toolbar.setBackgroundColor(Color.BLUE)


Endre tekstfarge

For å endre tekstfargen til Toolbar, bruk setTextColor()-metoden:

kotlin
toolbar.setTextColor(Color.WHITE)


Endre størrelse

For å endre størrelsen på Toolbar, bruk setMinimumHeight()-metoden:

kotlin
toolbar.setMinimumHeight(100)


Konklusjon

Toolbar er en allsidig komponent som gir et enhetlig utseende og følelse for Android-applikasjoner. Ved å bruke XML-layout og Kotlin kan du enkelt legge til og konfigurere Toolbar for å passe behovene til appen din. Enten du trenger å vise en tittel, handlinger eller navigasjonsknapper, kan Toolbar hjelpe deg med å oppnå det.

Vanlige spørsmål (FAQs)

Hva er forskjellen mellom en ActionBar og en Toolbar?

ActionBar er en eldre komponent som har blitt erstattet av Toolbar i nyere versjoner av Android. Toolbar er mer tilpassbar og gir flere funksjoner.

Hvordan kan jeg legge til en menyknapp til verktøylinjen min?

Legg til en menyknapp ved å oppblåse en menyressursfil i onCreateOptionsMenu()-metoden.

Hvordan endrer jeg ikonet til en handling?

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

Hvordan kan jeg legge til en Tilbake-knapp som navigerer tilbake til den forrige aktiviteten?

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

Hvordan kan jeg endre bakgrunnsfargen til Toolbar?

Bruk setBackgroundColor()-metoden for å endre bakgrunnsfargen til Toolbar.

Hvordan kan jeg legge til en logo til Toolbar?

Legg til en logo til Toolbar ved å bruke setLogo()-metoden og angi en bilderessurs.

Hvordan kan jeg legge til en undertittel til Toolbar?

Bruk setSubtitle()-metoden for å legge til en undertittel til Toolbar.

Hvordan kan jeg endre størrelsen på Toolbar?

Bruk setMinimumHeight()-metoden for å endre størrelsen på Toolbar.

Hvordan kan jeg tilpasse stilen til Toolbar?

Tilpass stilen til Toolbar ved å bruke setTheme()-metoden og angi et tilpasset temastilressurs.