Android SearchView példa oktatóanyag DataBinding használatával

Android SearchView példa oktatóanyag DataBinding használatával

A SearchView* egy erős Android widget, amely lehetővé teszi a felhasználók számára, hogy gyorsan és egyszerűen keressenek az alkalmazás tartalmában. A *DataBinding egy erőteljes eszköz az Android-alkalmazásokban az adatkötés és az UI-komponensek közötti összeköttetés létrehozásához. Ebben az oktatóanyagban bemutatjuk, hogyan használhatja a DataBinding-et a SearchView-vel Android-alkalmazásokban.

Bevezetés

A DataBinding egy Android Jetpack könyvtár, amely lehetővé teszi a fejlesztők számára, hogy az xml-elrendezéseiket közvetlenül az alkalmazásuk modelljeihez kössék. Ez leegyszerűsíti a nézetfrissítéseket és kiküszöböli a kazánház kódolás szükségességét. Összekapcsolva a SearchView-vel a DataBinding nagy rugalmasságot és ellenőrzést biztosít az alkalmazás keresési felhasználói felületének felett.

Előfeltételek

Az oktatóanyag elkezdése előtt szüksége lesz:

* Android Studio 4.1 vagy újabb
* Egy Android-eszköz vagy emulátor
* Alapvető Android-fejlesztési ismeretek

lépésről lépésre

1. lépés: Új projekt létrehozása

Nyissa meg az Android Studio-t, és hozzon létre egy új Android-projektet. Adjon nevet a projektnek, és válassza a „Üres tevékenység” sablont.

2. lépés: A DataBinding engedélyezése

A DataBinding alapértelmezés szerint nincs engedélyezve az új Android-projektekben. Engedélyezéséhez nyissa meg a build.gradle fájlt az alkalmazásmodulban, és adja hozzá a következő függőséget:

gradle
dependencies {
implementation 'androidx.databinding:databinding-compiler:4.2.0'
}

3. lépés: Az adatmodell létrehozása

Hozzon létre egy új Kotlin-osztályt az „Adatok” névvel az alkalmazáscsomagjában. Ez az osztály tárolja az alkalmazás kereshető adatait.

kotlin
class Adatok(val nev: String)

4. lépés: A tevékenység XML elrendezésének létrehozása

Nyissa meg az activity_main.xml fájlt, és adja hozzá a következő kódot a keresősáv létrehozásához:

xml
<androidx.appcompat.widget.SearchView
android:id="@+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:queryHint="Keresés..." />

5. lépés: A DataBinding elrendezés létrehozása

Hozzon létre egy új xml fájlt az „activity_main_binding.xml” névvel a res/layout mappában. Ez a fájl a DataBinding-et használja a SearchView-hez való csatlakozáshoz.

xml
<layout xmlns:android="http://schemas.android.com/apk/res/android">

<data>
<import type="java.util.List" />
<variable
name="adatok"
type="List&lt;com.example.androidsearchviewdatabinding.Adatok&gt;" />
</data>

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.appcompat.widget.SearchView
android:id="@+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:queryHint="Keresés..."
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:queryTextChanged="@{viewModel.onQueryTextChanged}" />

</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

6. lépés: A viewModel létrehozása

Hozzon létre egy új Kotlin-osztályt az „ViewModel” névvel az alkalmazáscsomagjában. Ez az osztály kezeli az alkalmazás logikáját, beleértve a keresést is.

kotlin
class ViewModel(private val adatok: List<Adatok>) {
private var keresesiSzoveg: ObservableField<String> = ObservableField("")

fun onQueryTextChanged(newText: String) {
keresesiSzoveg.set(newText)
}

val keresettAdatok: LiveData<List<Adatok>> = Transformations.switchMap(keresesiSzoveg) { query ->
filterResults(query)
}

private fun filterResults(query: String): LiveData<List<Adatok>> {
return MutableLiveData(adatok.filter { it.nev.contains(query) })
}
}

7. lépés: Az aktivitás létrehozása

Hozzon létre egy új Kotlin-osztályt az „MainActivity” névvel az alkalmazáscsomagjában. Ez az osztály a tevékenység logikáját kezeli.

kotlin
class MainActivity : AppCompatActivity() {

private val viewModel by lazy { ViewModel(loadData()) }
private val searchView by lazy { findViewById<SearchView>(R.id.searchView) }

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

private fun loadData(): List<Adatok> {
return listOf(
Adatok("Alma"),
Adatok("Körte"),
Adatok("Szőlő"),
Adatok("Eper")
)
}

private fun setupSearchView() {
searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
override fun onQueryTextSubmit(query: String): Boolean {
return false
}

override fun onQueryTextChange(newText: String): Boolean {
viewModel.onQueryTextChanged(newText)
return false
}
})
}

private fun setupObservers() {
viewModel.keresettAdatok.observe(this) { adatok ->
// Frissítse az UI-t a keresési eredményekkel
}
}
}

8. lépés: A projekt összeállítása és futtatása

Miután létrehozta az összes szükséges fájlt, állítsa össze a projektet, és futtassa azt egy emulátorban vagy egy valódi eszközön. A keresősávnak most meg kell jelennie a tevékenységben, és a keresési lekérdezések megadásakor meg kell szűrnie az alkalmazás adatait.

Következtetés

A DataBinding használata a SearchView-vel egy hatékony módja annak, hogy erős és testreszabható keresési felhasználói felületeket hozzon létre Android-alkalmazásokban. A DataBinding és a LiveData kombinációja lehetővé teszi a fejlesztők számára, hogy zökkenőmentesen frissítsék az UI-t, amikor a keresési lekérdezések változnak, ami reszponzív és felhasználóbarát élményt eredményez.

Gyakran ismételt kérdések

1. Szükséges-e a DataBinding engedélyezése egy Android-projektben a SearchView használatához?

Nem, a DataBinding nem szükséges a SearchView használatához. Azonban a DataBinding használata jelentős előnyöket kínál az adatkötés és a nézetfrissítések kezelése terén.

2. Hogyan lehet a DataBinding-et használni a SearchView-vel?

Használja az app:queryTextChange attribútumot a SearchView xml elrendezésében, és kösse össze egy ViewModel metódussal, amely a keresési lekérdezések változásaira reagál.

3. Hogyan lehet szűrni az alkalmazás adatait a keresési lekérdezések alapján?

Hozzon létre egy ViewModel metódust, amely szűri az adatokat a keresési lekérdezés alapján, majd LiveData-objektumként teszi elérhetővé a szűrt eredményeket.

4. Hogyan lehet a keresési eredményeket megjeleníteni az UI-ban?

Használja az LiveData observereket a keresési eredmények megfigyeléséhez és a UI-frissítések kezeléséhez az eredmények változásakor.

5. Hogyan lehet az automatikus kiegészítést engedélyezni a SearchView-ben?

Adjon hozzá egy ArrayAdaptert az alkalmazásához