En este artículo, aprenderemos a voltear una imagen a otra imagen como el anverso de la tarjeta y el reverso de la tarjeta como vemos la tarjeta virtual en Paytm. Para ello, utilizaremos ScaleAnimation de Android . A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Kotlin .
Implementación paso a paso
Paso 1: Crear un nuevo proyecto
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.
Paso 2: establece la orientación en modo vertical
Debido a que esta es una aplicación con uso intensivo de gráficos, esperamos que la orientación se mantenga en todo momento, navegue hasta el archivo AndroidManifest.xml y agregue el android:screenOrientation=”retrato” .
<aplicación
…
Android: orientación de pantalla = «retrato»
…
</actividad>…</actividad>
</aplicación>
Paso 3: crea una nueva carpeta anim en la carpeta res
Aquí incluiremos dos archivos XML que representan nuestras dos animaciones de transición. Vaya a la aplicación > res > anim > to_middle.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo to_middle.xml .
XML
<?xml version="1.0" encoding="utf-8"?> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="1.0" android:toXScale="0.0" android:pivotX="50%" android:fromYScale="1.0" android:toYScale="1.0" android:pivotY="50%" android:duration="250" />
Ahora, navegue a la aplicación > res > anim > from_middle.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo from_middle.xml .
XML
<?xml version="1.0" encoding="utf-8"?> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="0.0" android:toXScale="1.0" android:pivotX="50%" android:fromYScale="1.0" android:toYScale="1.0" android:pivotY="50%" android:duration="250" />
Paso 4: Configure cualquier objeto de imagen (anverso de la tarjeta) en el diseño
Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:orientation="vertical" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dip" android:text="Simulate a 3D Flip" android:textColor="#000" android:textSize="26sp" android:textStyle="bold" /> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="300dp" android:layout_margin="10dp" android:gravity="center" android:src="@drawable/card_front" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dip" android:padding="10dip" android:text="Hit Me!" /> </LinearLayout> </androidx.constraintlayout.widget.ConstraintLayout>
Paso 5: trabajar con el archivo MainActivity.kt
Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt. Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
import android.os.Bundle
import android.view.animation.Animation
import android.view.animation.AnimationUtils
import android.widget.Button
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity(), Animation.AnimationListener {
private lateinit var animation1: Animation
private lateinit var animation2: Animation
private var isFrontOfCardShowing = true
private lateinit var image: ImageView
private lateinit var clickBtn: Button
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// apply animation from to_middle
animation1 = AnimationUtils.loadAnimation(this, R.anim.to_middle)
animation1.setAnimationListener(this)
// apply animation from to_middle
animation2 = AnimationUtils.loadAnimation(this, R.anim.from_middle)
animation2.setAnimationListener(this)
clickBtn = findViewById(R.id.button1)
image = findViewById(R.id.imageView1)
clickBtn.setOnClickListener {
it.isEnabled = false
// stop animation
image.clearAnimation()
image.animation = animation1
// start the animation
image.startAnimation(animation1)
}
}
override fun onAnimationEnd(animation: Animation) {
if (animation === animation1) {
// check whether the front of the card is showing
if (isFrontOfCardShowing) {
// set image from card_front to card_back
image.setImageResource(R.drawable.card_back)
} else {
// set image from card_back to card_front
image.setImageResource(R.drawable.card_front)
}
// stop the animation of the ImageView
image.clearAnimation()
image.animation = animation2
// allow fine-grained control
// over the start time and invalidation
image.startAnimation(animation2)
} else {
isFrontOfCardShowing = !isFrontOfCardShowing
clickBtn.isEnabled = true
}
}
override fun onAnimationRepeat(animation: Animation?) {
// TODO Auto-generated method stub
}
override fun onAnimationStart(animation: Animation?) {
// TODO Auto-generated method stub
}
}
Ahora, ejecuta la aplicación
Producción:
Código fuente: Haga clic aquí