Android ConstraintLayout PlaceHolder & Animasyon
Android’de responsive tasarımlar yapabilmek klasik olan layoutlarla çok zor ( Relative,Linear,FrameLayout vb. ..) . Ancak ConstraintLayout ile çok komplex layoutlar ve responsive arayüzler tasarlamak mümkün hatta animasyonları bile kolayca hazırlamak mümkün. Bu yazıda PlaceHolder kullanarak bir animasyon yapacağız.
Projemizin adımları :
1 . Yeni bir proje oluşturma
2. ConstraintLayout’u gradleye eklemek
3. Yeni bir aktivite oluşturup bunun layout’unu düzenlemek.
uygulamamız bittiğindeki görüntüsü bu sistemde olacak.
burada yapacaklarımız şunlar önce 4 tane Imageview ekleyeceğiz ve birde placeholder eklenecek. layout tamam. Tabi bunların hepsine bir id vermelisiniz. Sonra java tarafından bütün idlere ulaşıp aktivitemizede View.setOnClickListener ‘i implemente edeceğiz. sonrası kodlarda…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<?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:id="@+id/mainLayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <androidx.constraintlayout.widget.Placeholder android:id="@+id/placeholder" android:layout_width="96dp" android:layout_height="96dp" android:maxWidth="96dp" android:maxHeight="96dp" app:layout_constraintBottom_toTopOf="@+id/imageView2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.554"> </androidx.constraintlayout.widget.Placeholder> <ImageView android:id="@+id/imageView" android:layout_width="48dp" android:layout_height="48dp" android:layout_marginBottom="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@+id/imageView2" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" android:src="@drawable/library" /> <ImageView android:id="@+id/imageView2" android:layout_width="48dp" android:layout_height="48dp" app:layout_constraintBottom_toBottomOf="@+id/imageView" app:layout_constraintEnd_toStartOf="@+id/imageView4" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/imageView" android:src="@drawable/music" /> <ImageView android:id="@+id/imageView3" android:layout_width="48dp" android:layout_height="48dp" app:layout_constraintBottom_toBottomOf="@+id/imageView4" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/imageView4" android:src="@drawable/queue" /> <ImageView android:id="@+id/imageView4" android:layout_width="48dp" android:layout_height="48dp" app:layout_constraintBottom_toBottomOf="@+id/imageView2" app:layout_constraintEnd_toStartOf="@+id/imageView3" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/imageView2" android:src="@drawable/senkron" android:contentDescription="TODO" /> <androidx.constraintlayout.widget.Group android:id="@+id/group" android:layout_width="wrap_content" android:layout_height="wrap_content" app:constraint_referenced_ids="imageView4,imageView3,imageView,imageView2" app:layout_constraintBottom_toTopOf="parent" app:layout_constraintEnd_toStartOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
package com.vsofttech.myapplication; import androidx.appcompat.app.AppCompatActivity; import androidx.constraintlayout.widget.ConstraintLayout; import androidx.constraintlayout.widget.Placeholder; import android.os.Bundle; import android.transition.TransitionManager; import android.view.View; import android.widget.ImageView; public class MainActivity extends AppCompatActivity implements View.OnClickListener { Placeholder placeholder; ConstraintLayout mainLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ImageView ımageView=findViewById(R.id.imageView); ımageView.setOnClickListener(this); ImageView ımageView1=findViewById(R.id.imageView2); ımageView1.setOnClickListener(this); ImageView ımageView2=findViewById(R.id.imageView3); ımageView2.setOnClickListener(this); ImageView ımageView3=findViewById(R.id.imageView4); ımageView3.setOnClickListener(this); placeholder=findViewById(R.id.placeholder); mainLayout=findViewById(R.id.mainLayout); } @Override public void onClick(View v) { TransitionManager.beginDelayedTransition(mainLayout); placeholder.setContentId(v.getId()); } } |