Tạo Animation với ConstraintLayout trong Android



  • Mở Bài

    • Thường chúng ta hay tạo ra animation bằng cách sử dụng lớp Animation hoặc sử dụng xml.
    • Hôm nay mình xin giới thiệu cách viết khác bằng sử dụng ContraintLayout, nếu các bạn chưa biết về ConstaintLayout có thể vào đây để xem.

    B1: Tạo Layout

    • Tạo file activity_main.xml như sau :
    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.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"
        android:id="@+id/root"
        tools:context="com.framgia.MainActivity">
    
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:src="@mipmap/ic_launcher"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
            
    </android.support.constraint.ConstraintLayout>
    
    • Tạo thêm file activity_image.xml như sau :
    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.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"
        android:id="@+id/root">
    
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:src="@mipmap/ic_launcher"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
            
    </android.support.constraint.ConstraintLayout>
    

    B2: Tạo Animation

    • Trong class MainActivity chúng ta code như sau :
    class MainActivity : AppCompatActivity() {
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.main_activity)
            addAnimation()
        }
    
        private fun addAnimation() {
            var set = false
            val constraint1 = ConstraintSet()
            constraint1.clone(root)
            val constraint2 = ConstraintSet()
            constraint2.clone(this, R.layout.activity_image)
    
            findViewById<ImageView>(R.id.imageView).setOnClickListener{
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                    TransitionManager.beginDelayedTransition(root)
                    val constraint = if(set) constraint1 else constraint2
                    constraint.applyTo(root)
                    set = !set
                }
            }
        }
    }
    

    Kết quả

    Nguồn: Viblo


Hãy đăng nhập để trả lời
 

Có vẻ như bạn đã mất kết nối tới LaptrinhX, vui lòng đợi một lúc để chúng tôi thử kết nối lại.