CoordinatorLayout ile Float ve Snackbar

CoordinatorLayout, Android Tasarım Destek Kütüphanesi ile tanıtılan yeni bir düzendir. CoordinatorLayout, süper güçlü bir FrameLayout’tur ( resmi belgelere göre ). Daha önce bir FrameLayout kullandıysanız, CoordinatorLayout’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. CoordinatorLayout’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, CoordinatorLayout’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 CoordinatorLayout’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, CoordinatorLayout 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. CoordinatorLayout, 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ü CoordinatorLayout olarak ayarladık. Bu şekilde, CoordinatorLayout 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.