👋 Здравейте разработчици,
В тази статия ще научим как да създаваме анимирани екрани за вход, които ще подобрят потребителското изживяване и красотата на вашето приложение,
Предпоставки
- Познаване на Kotlin
- Познаване на XML
- Android Studio
- Основи на разработката на Android.
Следват стъпките за създаване наанимиран екран за влизане
Стъпка 1: - Добавете зависимостта на Rive
Добавете следните зависимости към вашия build.gradle файл във вашия проект:
dependencies {
implementation 'app.rive:rive-android:5.0.0'
implementation "androidx.startup:startup-runtime:1.1.1"
}
Забележка:Ако изграждането на Gradle е неуспешно поради конфликтв зависимостите, тогава намалете androidx.core:core-ktx до 1.7.0
implementation 'androidx.core:core-ktx:1.7.0'
Стъпка 2: - Инициализиране на Rive
Rive трябва да инициализира своето време за изпълнение, когато приложението ви стартира.
<application>
:
:
<provider
android:name="androidx.startup.InitializationProvider"
android:authorities="${applicationId}.androidx-startup"
android:exported="false"
tools:node="merge">
<meta-data android:name="app.rive.runtime.kotlin.RiveInitializer"
android:value="androidx.startup" />
</provider>
:
:
</application>
Стъпка 3:- Добавете RiveAnimation към вашето оформление
Изтеглете файла riveResource от туки го преместете в нова директория raw
Забележка: Следвайте тези стъпки, за да създадете нова директория
Щракнете с десния бутон върхуres→ нов→Директория→ и дайте име суров
добавете следния код към вашето xml оформление
<app.rive.runtime.kotlin.RiveAnimationView
android:id="@+id/loginCharacter"
android:paddingHorizontal="24dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:riveResource="@raw/login_screen_character" />
Забележка: Можете да създадете екран за влизане според вашите нужди, ако в случай, че искате изходен код за моето оформление, можете да го проверите тук
- празен
- проверка
- виж
- успех
- провалят се
- hand_up
Има четири действия, които потребителят може да извърши: -
- Когато потребителят за първи път отвори екрана за вход, нашият герой ще бъде в неактивно състояние
- Когато потребителят щракне върху (имейл идентификатор или идентификатор за вход), нашият герой ще бъде в Състояние на проверка.
Икогато потребителят въведе своя имейл, нашият герой ще се премести окото му, за да види какво пише потребителят, това е Състояние на поглед - Когато потребителят въведе своята парола, тогава нашият герой ще затвори очи, това е състояние на вдигнати ръце
- И накрая, ако идентификационните данни са правилни, нашият герой ще бъде в състояние на успех в противен случай в състояние на неуспех
Стъпка 4: - Внедряване на код
Има 3 различни метода за промяна на състоянието на нашия герой.
setBooleanState(stateMachineName: String, inputName: String, value: Boolean)fireState(stateMachineName: String, inputName: String)setNumberState(stateMachineName: String, inputName: String, value: Float)
Първо, глобално ще декларираме името на нашата машина.
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
class SimpleActivity : AppCompatActivity() {
// name of our state machine
private val stateMachineName = "State Machine 1"
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.simple)
}
}
Сега ще внедрим нашите 6 различни състояния, инициализираме нашия герой, ако сме в неактивно състояние, не е нужно да правим нищо за това.
Нека внедрим Състояние на проверката, което означава, че ще щракнем върху имейл идентификатора, за да въведем идентификатора за вход
private fun onEmailFoucus() {
// we are using focus listner to capture the currently focued input field
binding!!.email.setOnFocusChangeListener { v, hasFocus ->
// when user click on email to enter email id then our character will look it
if (hasFocus) {
// setBoolen will take 3 arguments machine name, state name and value
binding!!.loginCharacter.controller.setBooleanState(
stateMachineName = stateMachineName,
inputName = "Check",
value = true
)
}
// else character will changes its focus
else {
binding!!.loginCharacter.controller.setBooleanState(
stateMachineName = stateMachineName,
inputName = "Check",
value = false
)
}
}
}
След Проверка на състоянието искаме, когато потребителят напише нещо, нашият герой и окото му ще променят позицията си, когато низът стане дълъг. Това е Състояние на поглед
private fun eyePostionChange() {
// we are using text changed listner to change position of eyes whenever user type new character
binding!!.email.addTextChangedListener(object : TextWatcher {
override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
}
override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
try {
// setNumber will take 3 input
// machine name, state name, and value
binding!!.loginCharacter.controller.setNumberState(stateMachineName, "Look", 2*p0!!.length.toFloat())
} catch (_: Exception) {
}
}
override fun afterTextChanged(p0: Editable?) {
}
})
}
Сега ще внедрим състояние, когато потребител въведе парола, което е състояние hands_up
private fun onPasswordFoucus() {
// we are using focus listner to capture the currently focued input field
binding!!.password.setOnFocusChangeListener { v, hasFocus ->
// if focus is on password text field then close eyes
if (hasFocus) {
// setBoolen will take 3 arguments machine name, state name and value
binding!!.loginCharacter.controller.setBooleanState(stateMachineName, "hands_up", true)
}
// if focus is not on password text field then open eyes
else {
binding!!.loginCharacter.controller.setBooleanState(stateMachineName, "hands_up", false)
}
}
}
И последното ни състояние е успех и провал
private fun LoginAccount(email: String, password: String) {
// if credentials matches the show success state
if (email == "[email protected]" && password == "123456"){
// using looper to use animation multiple times for 2s
Handler(mainLooper).postDelayed({
// fireState will take two input machine name and state
binding!!.loginCharacter.controller.fireState(stateMachineName, "success")
}, 2000)
Toast.makeText(this, "Welcome", Toast.LENGTH_SHORT).show()
}
// if credentials mismatches then show failure state
else{
// using looper to use animation multiple times for 2s
Handler(mainLooper).postDelayed({
// fireState will take two input machine name and state
binding!!.loginCharacter.controller.fireState(stateMachineName, "fail")
},2000)
Toast.makeText(this, "Invalid Id or Password", Toast.LENGTH_SHORT).show()
}
}
можете да проверите пълния код за тази дейност тук
Най-накрая създадохме красив изглеждащ екран за вход.
Ако има някакъв въпрос или объркване относно урока. Чувствайте се свободни да задавате въпросите си в коментарите по-долу.
Благодарим ви, че прочетохте тази статия. Ако сте намерили това за полезно и интересно, моля, пляскайте и ме последвайте за още такова съдържание.
можете също да разгледате моето ново приложение в playstore тук
Ако съм объркал нещо, споменете го в коментарите. Бих искал да се подобря.
