🧱 CoordinatorLayout Nedir? – Android Geliştirmede Davranışsal UI Yapısı
🎯 Giriş
Android’de gelişmiş ve etkileşimli kullanıcı arayüzleri (UI) oluşturmak isteyen her geliştirici mutlaka Coordinator Layout ile tanışmalıdır. Özellikle Material Design prensipleri doğrultusunda kaydırma, üst üste binen öğeler, animasyonlar ve etkileşimli davranışlar yaratmak için kullanılır.
Coordinator Layout, Android’in support.design (şimdi androidx.coordinatorlayout) kütüphanesinin bir parçasıdır ve temel amacı, alt bileşenler (child views) arasında koordinasyon sağlamaktır.
⚙️ CoordinatorLayout’un Temel Mantığı
Coordinator Layout, bir container (kapsayıcı) ViewGroup’tur. İçine yerleştirilen öğeler (örneğin AppBarLayout, FloatingActionButton, RecyclerView) arasında davranışsal etkileşim (Behavior) kurulmasına olanak tanır.
Her bileşen, layout_behavior özelliği kullanılarak bir davranış (behavior class) ile ilişkilendirilebilir. Bu sayede scroll, drag, fling gibi hareketlere otomatik tepki verdirilebilir.
📌 Kullanım Senaryoları
Toolbar‘ın yukarı kaydırıldıkça gizlenmesiFloatingActionButton’ınSnackbargöründüğünde yukarı kaymasıAppBarLayout+TabLayout+ViewPagerkombinasyonlarıBottomSheetBehaviorile kaydırılabilir alt menüler- ScrollView ile etkileşimli parallax efektleri
🧪 Örnek Kullanım (XML)
xmlKopyalaDüzenle<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_height="200dp"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/header_image"
app:layout_collapseMode="parallax" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
🧠 Behavior Mantığı
Coordinator Layout.Behavior sınıfı kullanılarak özel davranışlar tanımlanabilir. Örneğin:
javaKopyalaDüzenlepublic class HideFABOnScrollBehavior extends FloatingActionButton.Behavior {
@Override
public boolean onStartNestedScroll(CoordinatorLayout parent,
FloatingActionButton child, View directTargetChild, View target, int axes, int type) {
return axes == ViewCompat.SCROLL_AXIS_VERTICAL;
}
@Override
public void onNestedScroll(CoordinatorLayout parent, FloatingActionButton child,
View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed, int type) {
if (dyConsumed > 0) {
child.hide();
} else if (dyConsumed < 0) {
child.show();
}
}
}
🔄 AndroidX ve Coordinator Layout
Coordinator Layout, artık androidx.coordinatorlayout.widget.CoordinatorLayout olarak kullanılmaktadır. AndroidX yapısıyla birlikte modülerlik kazanmıştır ve material kütüphanesi ile tam uyumludur.
🎯 Avantajları
- Etkin ve animasyonlu UI öğeleri oluşturur.
- Material Design ile uyumludur.
AppBarLayout,BottomSheet,FloatingActionButtongibi öğeleri birbirine dinamik olarak bağlar.- Davranışları override ederek kendi UI etkileşimlerinizi yaratmanıza olanak tanır.
🚫 Dezavantajları
- Başlangıçta karmaşık görünebilir.
- Tüm davranışlar kodla yazılmak zorundadır (özellikle özel Behavior).
- Nested Scroll gibi bazı hatalar dikkat gerektirir.
🔚 Sonuç
Coordinator Layout, gelişmiş Android arayüzleri geliştirmek için güçlü bir araçtır. Modern Android uygulamalarının neredeyse tamamında arka planda bu yapı kullanılır. Geliştiricilere sadece görsel değil, kullanıcı etkileşimi açısından da büyük esneklik sağlar.
CoordinatorLayout ile Float ve Snackbar
Coordinator Layout, Android Tasarım Destek Kütüphanesi ile tanıtılan yeni bir düzendir. Bu , süper güçlü bir FrameLayout’tur ( resmi belgelere göre ). Daha önce bir FrameLayout kullandıysanız, Coordinator Layout’u kullanırken çok rahat olmalısınız. FrameLayout kullanmadıysanız, endişelenmeyin, oldukça kolay.
Varsayılan olarak, bir FrameLayout’a birden fazla çocuk eklerseniz birbirleriyle örtüşürler. Bir FrameLayout, en sık tek bir çocuk görüntüsü elde etmek için kullanılmalıdır.
Coordinator Layout’un ana çekiciliği, içerisindeki görüşlerin animasyonlarını ve geçişlerini koordine edebilmesidir. Yalnızca xml kullanarak, örneğin bir FAB’ın gelen bir Snackbar’ın dışına çıktığını, ya da görünüşe göre başka bir widget’a eklenmiş ve ekranda görünen bir FAB’ın (ya da gerçekten başka herhangi bir Görünümün) bulunduğu bir düzen tanımlayabilirsiniz. widget.
Bu makale için, Coordinator Layout’u kullanmanın, görünümlerin diğer görünümlerin düzenindeki veya konumundaki değişikliklere yanıt vermesini sağlayarak kodunuzu basitleştirebileceği üç farklı yol göstereceğiz. Daha sonra, bu davranışın kodda nasıl elde edildiğini tartışacağız ve kendi özel davranışlarınızı görünümler arasında nasıl uygulayacağınızı öğrendiğiniz dördüncü bir yöntemi göstereceğiz. Özel davranışlar uygulayarak, yalnızca hayal gücünüzle (ve kodlama yeteneğinizle: D) sınırlandırılan kolayca birbirine bağlı inanılmaz animasyonlar, geçişler ve efektler oluşturabilirsiniz.
Uygulamanızda Coordinator Layout’u kullanmadan önce, uygulamanızın aşağıdaki bağımlılığını ekleyerek Android Destek Tasarım Kitaplığını projenize içe aktarmanız gerekir.
Module kısmında app ye ait build.gradle
apply plugin: 'com.android.application'
android {
compileSdkVersion 28
buildToolsVersion '28.0.3'
defaultConfig {
applicationId "com.mobilprogramlar.floatbutton1"
minSdkVersion 21
targetSdkVersion 28
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(include: ['*.jar'], dir: 'libs')
testİmplementation 'junit:junit:4.13-beta-3'
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'
}
Snackbar ve FAB
İlk aktivite için, Snackbar görüntülendiğinde otomatik olarak kaybolan bir FAB ile düzen oluşturmak istiyoruz. Bu, Coordinator Layout için bir “HelloWorld” programı ve iyi bir sebeple. İşlevsellik tamamen basit bir düzen olan xml dosyasında uygulanmıştır ve sadece çalışır.
Düzen oldukça basittir. Coordinator Layout, kök düzendir. İçinde, ekran üzerinde ortalanmış bir düğmeye ve malzeme tasarım kurallarına uymamızı sağlamak için ekranın sağ alt köşesine yerleştirilmiş bir FAB’a sahibiz.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.mobilprogramlar.floatbutton1.MainActivity">
<Button
android:id="@+id/showSnackbarButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/show_snackbar"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="@dimen/activity_vertical_margin"
android:layout_marginEnd="@dimen/activity_horizontal_margin"
android:src="@drawable/ic_done"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Activity sınıfına yaptığımız tek ekleme, Snackbar’ı göstermek için Düğmeye OnClickListener uygulamaktır. Snackbar’ın kök Görünümünü Coordinator Layout olarak ayarladık. Bu şekilde, Coordinator Layout Snackbar ve FAB hakkında bilgi sahibi olur ve her iki widget’in çakışmadığından emin olmak için geçiş animasyonu otomatik olarak yürütülür.
package com.mobilprogramlar.floatbutton1;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
import com.google.android.material.snackbar.Snackbar;
public class MainActivity extends AppCompatActivity {
private Button mShowSnackbarButton;
private CoordinatorLayout mCoordinatorLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mCoordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorLayout);
mShowSnackbarButton = (Button) findViewById(R.id.showSnackbarButton);
mShowSnackbarButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(mCoordinatorLayout,
"Bu basit bir Snackbar", Snackbar.LENGTH_LONG)
.setAction("KAPAT", new View.OnClickListener() {
@Override
public void onClick(View v) {
// Custom action
}
}).show();
}
});
}
}
Aktiviteyi yürütün ve FAB’nin, gösterildiğinde, snackbar için otomatik olarak yukarı ve dışarı kaydığını ve snackbar görünümden çıkarken konumuna aşağı doğru kaydığını gözlemleyin.
String.xml
<resources>
<string name="app_name">Float ve Snackbar</string>
<string name="show_snackbar">Snackbarı Göster</string>
</resources>
dimens.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dimen> </resources>
Sonuç:
Kodların tam çalışır halini Github hesabımdan indirebilirsinz.
Proudly powered by OssMatematik