Freigegebenes ViewModel in Android
In Android können wir ViewModel verwenden , um Daten zwischen verschiedenen Fragmenten oder Aktivitäten auszutauschen, indem wir dasselbe ViewModel für alle Fragmente freigeben, und sie können auf alles zugreifen, was im ViewModel definiert ist. Dies ist eine Möglichkeit zur Kommunikation zwischen Fragmenten oder Aktivitäten. Fast jede Anwendung hat eine gewisse Kommunikation zwischen verschiedenen Aktivitäten oder Fragmenten.
Was werden wir in diesem Artikel bauen?
In diesem Artikel erfahren wir mehr über Shared ViewModel in Android, um mit anderen Fragmenten zu kommunizieren. Wir werden eine Anwendung entwickeln, die zwei Fragmente enthält, in denen ein Fragment die Daten innerhalb des ViewModel aktualisiert, das von beiden Fragmenten gemeinsam genutzt wird, und ein anderes Fragment die Änderungen an diesen Daten beobachtet und die aktualisierten auf dem Bildschirm anzeigt. Die Arbeit der Anwendung besteht darin, eine Nachricht zu senden -> zu empfangen -> anzuzeigen. Ein Beispiel-GIF ist unten angegeben, um eine Vorstellung davon zu bekommen, was wir in diesem Artikel tun werden.
Schritt für Schritt Umsetzung
Schritt 1: Erstellen Sie ein neues Projekt
Informationen zum Erstellen eines neuen Projekts in Android Studio finden Sie unter So erstellen/starten Sie ein neues Projekt in Android Studio . Beachten Sie, dass Sie Kotlin als Programmiersprache auswählen.
Schritt 2: Erstellen Sie eine SharedViewModel-Klasse
Wechseln Sie zur Datei SharedViewModel.kt und beziehen Sie sich auf den folgenden Code. Unten ist der Code für die SharedViewModel.kt-Datei. Kommentare werden innerhalb des Codes hinzugefügt, um den Code genauer zu verstehen.
Kotlin
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
class SharedViewModel : ViewModel() {
// variable to contain message whenever
// it gets changed/modified(mutable)
val message = MutableLiveData<String>()
// function to send message
fun sendMessage(text: String) {
message.value = text
}
}
Schritt 3: Erstellen Sie zwei Fragmente und sie sind – MessageSenderFragment & MessageReceiverFragment
MessageSenderFragment – Zum Senden der Nachricht, die von MessageReceiverFragment empfangen wird . Es wird eine Schaltfläche haben, um die Nachricht zu senden, nachdem Sie darauf geklickt haben. Wechseln Sie zur Datei MessageSenderFragment.kt und beziehen Sie sich auf den folgenden Code. Unten ist der Code für die MessageSenderFragment.kt-Datei. Kommentare werden innerhalb des Codes hinzugefügt, um den Code genauer zu verstehen.
Kotlin
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import android.widget.EditText
import androidx.lifecycle.ViewModelProvider
class MessageSenderFragment : Fragment() {
// to send message
lateinit var btn: Button
// to write message
lateinit var writeMSg: EditText
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_message_sender, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
// reference for button and EditText
btn = view.findViewById(R.id.button)
writeMSg = view.findViewById(R.id.writeMessage)
// create object of SharedViewModel
val model = ViewModelProvider(requireActivity()).get(SharedViewModel::class.java)
// call function "sendMessage" defined in SharedVieModel
// to store the value in message.
btn.setOnClickListener { model.sendMessage(writeMSg.text.toString()) }
}
}
Navigieren Sie zu app > res > fragment_message_sender.xml und fügen Sie den folgenden Code zu dieser Datei hinzu. Unten ist der Code für die Datei fragment_message_sender.xml .
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <EditText android:id="@+id/writeMessage" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Write your message" android:textAlignment="center" app:layout_constraintBottom_toTopOf="@+id/button" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="100dp" android:text="Share Your Message" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
MessageReceiverFragment – Zum Empfangen der von MessageSenderFragment gesendeten Nachricht. Es wird eine TextView haben, um die aktualisierte Nachricht auf dem Bildschirm anzuzeigen. Wechseln Sie zur Datei MessageReceiverFragment.kt und beziehen Sie sich auf den folgenden Code. Unten ist der Code für die MessageReceiverFragment.kt-Datei. Kommentare werden innerhalb des Codes hinzugefügt, um den Code genauer zu verstehen.
Kotlin
class MessageReceiverFragment : Fragment() {
// to contain and display shared message
lateinit var displayMsg: TextView
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// inflate the fragment layout
return inflater.inflate(R.layout.fragment_message_receiver, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
// reference for the container declared above
displayMsg = view.findViewById(R.id.textViewReceiver)
// create object of SharedViewModel
val model = ViewModelProvider(requireActivity()).get(SharedViewModel::class.java)
// observing the change in the message declared in SharedViewModel
model.message.observe(viewLifecycleOwner, Observer {
// updating data in displayMsg
displayMsg.text = it
})
}
}
Navigieren Sie zu app > res > fragment_message_receiver.xml und fügen Sie den folgenden Code zu dieser Datei hinzu. Unten ist der Code für die Datei fragment_message_receiver.xml .
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/textViewReceiver" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20sp" android:textColor="@color/black" android:textAlignment="center" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
Wir haben das Objekt von SharedViewModel erstellt , das dasselbe Objekt ist, da wir dieselbe einzelne Aktivität als Eigentümer verwenden. Aus diesem Grund wird es geteilt . Beachten Sie, dass wir in beiden Fragmenten requireActivity() verwendet haben.
. . .
ViewModelProvider (requireActivity()).get(SharedViewModel::class.java)
. . .
Schritt 3: Aktualisieren Sie die activity_main.xml
Die Aktivität besteht aus zwei Fragmenten und ist der Host für beide Fragmente.
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <fragment android:id="@+id/receiverFragment" android:name="com.gfg.article.sharedviewmodel.MessageReceiverFragment" android:layout_width="match_parent" android:layout_height="0dp" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:layout_marginEnd="8dp" android:layout_marginBottom="8dp" app:layout_constraintBottom_toTopOf="@+id/senderFragment" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <fragment android:id="@+id/senderFragment" android:name="com.gfg.article.sharedviewmodel.MessageSenderFragment" android:layout_width="match_parent" android:layout_height="0dp" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:layout_marginEnd="8dp" android:layout_marginBottom="8dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/receiverFragment" /> </androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.kt bleibt wie es ist.
Kotlin
mport androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
}
Führen Sie jetzt die App aus.
Ausgabe:
Quellcode: Klicken Sie hier