12/08/2018, 17:10

Tạo Animation với ConstraintLayout trong Android

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. Tạo file activity_main.xml như sau : <?xml version="1.0" ...

  • 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.
  • 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_awidth="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/root"
    tools:context="com.framgia.MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_awidth="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_awidth="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/root">

    <ImageView
        android:id="@+id/imageView"
        android:layout_awidth="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>
  • 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
            }
        }
    }
}

0