Destek Kitaplığı ile FloatingActionButton örneği


129

Son zamanlarda şu yazıları okudum:

Android Tasarım Destek Kitaplığı

Android Destek Kitaplığı, revizyon 22.2.0

FloatingActionButton

Ama hiçbiri bana yenisini yaratma konusunda ayrıntılı bir örnek vermiyor FloatingActionButton. Anlaması çok zor, bu soruyu soruyorum.

Birisi bana bunun hakkında bir örnek verebilir mi?

Herhangi bir yardım çok takdir edilecektir. Şimdiden teşekkürler.

DÜZENLE

FloatingActionButton(FAB) ile ilgili bazı sorunlar buldum ve başka bir cevabı geliştirmek istiyorum. Aşağıdaki cevabıma bakın.


Yanıtlar:


274

Senin Yani build.gradledosyada, bu ekleyin:

compile 'com.android.support:design:27.1.1'

AndroidX Notu: Google, eski Destek Kitaplıklarının yerini alacak yeni AndroidX uzantı kitaplıkları sunuyor. AndroidX kullanmak için ilk marka emin size güncelledik gradle.propertiesdosyayı düzenlenebilir, build.gradlesete compileSdkVersioniçin 28(veya üstü) ve önceki yerine aşağıdaki satırını kullanın compilebiri.

implementation 'com.google.android.material:material:1.0.0'

Sonra, sizin themes.xmlveya styles.xmlher neyse, bunu ayarladığınızdan emin olun - bu, uygulamanızın vurgu rengidir - ve siz onu geçersiz kılmadığınız sürece FAB'nizin rengidir (aşağıya bakın):

        <item name="colorAccent">@color/floating_action_button_color</item>

Düzenin XML'inde:

<RelativeLayout
 ...
 xmlns:app="http://schemas.android.com/apk/res-auto">

       <android.support.design.widget.FloatingActionButton
            android:id="@+id/myFAB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

Veya yukarıdaki AndroidX materyal kitaplığını kullanıyorsanız, bunun yerine şunu kullanırsınız:

<RelativeLayout
 ...
 xmlns:app="http://schemas.android.com/apk/res-auto">

       <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/myFAB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:srcCompat="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

Dokümanlarda daha fazla seçenek görebilirsiniz (malzeme dokümanları burada) ( setRippleColorvb.), Ancak notlardan biri:

    app:fabSize="mini"

Bir başka ilginç olanı - sadece bir FAB'ın arka plan rengini değiştirmek için şunu ekleyin:

    app:backgroundTint="#FF0000"

(örneğin kırmızıya çevirmek için) yukarıdaki XML'e.

Her neyse, kodda, Etkinlik / Parçanın görünümü şişirildikten sonra ....

    FloatingActionButton myFab = (FloatingActionButton)  myView.findViewById(R.id.myFAB);
    myFab.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            doMyThing();
        }
    });

Gözlemler:

  • Eğer iki görünümü ayıran (örneğin bir RelativeLayout kullanarak) bir "dikiş" üzerinde olan bu düğmelerden birine sahipseniz, örneğin, kenarlığı örtmek için negatif bir alt düzen marjı ile, bir sorun fark edeceksiniz: FAB'ın boyutu aslında lolipop öncesi lolipoptan çok farklı . API'ler arasında geçiş yaptığınızda bunu AS'nin görsel düzen düzenleyicisinde görebilirsiniz - pre-lolipop'a geçtiğinizde aniden "patlar". Ekstra boyutun nedeni, gölgenin görüşün boyutunu her yönde genişletmesi gibi görünüyor. Öyleyse, diğer şeylere yakınsa FAB'ın marjlarını ayarlarken bunu hesaba katmalısınız.
  • Çok fazlaysa dolguyu kaldırmanın veya değiştirmenin bir yolu:

    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
        RelativeLayout.LayoutParams p = (RelativeLayout.LayoutParams) myFab.getLayoutParams();
        p.setMargins(0, 0, 0, 0); // get rid of margins since shadow area is now the margin
        myFab.setLayoutParams(p);
    }
  • Ayrıca, FAB'ın yüksekliğini alarak, ikiye bölerek ve bunu marj ofseti olarak kullanarak bir RelativeLayout'ta iki alan arasındaki "dikiş" üzerine FAB'yi programlı olarak yerleştirecektim. Ancak myFab.getHeight (), görünüm şişirildikten sonra bile sıfır döndürdü, öyle görünüyordu. Bunun yerine yüksekliği yalnızca yerleştirildikten sonra almak için bir ViewTreeObserver kullandım ve ardından konumu belirledim. Bu ipucuna buradan bakın . Şöyle görünüyordu:

        ViewTreeObserver viewTreeObserver = closeButton.getViewTreeObserver();
        if (viewTreeObserver.isAlive()) {
            viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                        closeButton.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                    } else {
                        closeButton.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                    }
                    // not sure the above is equivalent, but that's beside the point for this example...
                    RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) closeButton.getLayoutParams();
                    params.setMargins(0, 0, 16, -closeButton.getHeight() / 2); // (int left, int top, int right, int bottom)
                    closeButton.setLayoutParams(params);
                }
            });
        }

    Bunu yapmanın doğru yolu olup olmadığından emin değilim, ama işe yarıyor gibi görünüyor.

  • Görünüşe göre yüksekliği azaltarak düğmenin gölge alanını küçültebilirsiniz.
  • FAB'ın bir "dikiş" üzerinde olmasını istiyorsanız, kullanabilirsiniz layout_anchorve layout_anchorGravityişte bir örnek:

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_discuss"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"/>

Bir Snackbar geldiğinde, onu bir Koordinatör Düzenine sararak otomatik olarak düğmenin yoldan çıkmasını sağlayabileceğinizi unutmayın .

Daha:


1
Elbette. android:backgroundTint="#FF0000"Örneğin XML'deki FloatingActionBar'a ekleyin . (yanıta ekleniyor)
fattire

1
Hmm. Tamam o zaman yukarıda değiştireceğim. Teşekkürler! Dark Leonhart - Yerleşik hızlı geri dönüş hakkında hiçbir şey görmedim, ancak yine de çalışacağını düşündüğüm stackoverflow üzerinde başka bir yerde bunu yapmanın örnekleri var. Ayrıca bunu yapan bazı kütüphaneler de mevcuttur.
fattire

1
Bence bu bileşen 22.2.0 itibariyle üretime hazır değil. Btw, bir yazım hatası olabilir, ancak spevelation özelliğinde kullanmayın. O olmalıapp:elevation="4dp"
Joao Sousa

1
Not Eğer bir ekliyorsanız FloatingActionButtonbir karşı CoordinatorLayoutkullanabileceğiniz app:layout_anchor="element_with_seam"ve app:layout_anchorGravity="bottom|right|end"bir dikiş üzerinde doğru FAB konumlandırmak için - bkz cheesesquare gelen activity_detail düzeni
ianhanniballake

2
@DarkLeonhart - davranışını genişleterek kaydırmada FAB'ı gösterme / gizleme örneğime bakın .
ianhanniballake

49

FAB ile ilgili bazı sorunlar buldum ve başka bir cevabı geliştirmek istiyorum.


setRippleColor sorunu

Dolayısıyla, dalgalanma rengini (basıldığında FAB rengi) programlı olarak ayarladığınızda sorun ortaya çıkacaktır setRippleColor. Ancak, onu ayarlamak için hala alternatif bir yolumuz var, yani arayarak:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
ColorStateList rippleColor = ContextCompat.getColorStateList(context, R.color.fab_ripple_color);
fab.setBackgroundTintList(rippleColor);

Projenizin şu yapıya sahip olması gerekiyor:

/res/color/fab_ripple_color.xml

görüntü açıklamasını buraya girin

Ve gelen kod fab_ripple_color.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/fab_color_pressed" />
    <item android:state_focused="true" android:color="@color/fab_color_pressed" />
    <item android:color="@color/fab_color_normal"/>
</selector>

Son olarak, FAB'nizi biraz değiştirin:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_add"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    app:fabSize="normal"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:rippleColor="@android:color/transparent"/> <!-- set to transparent color -->

API seviyesi 21 ve üstü için, sağ ve alt kenar boşluğunu 24 dp olarak ayarlayın:

...
android:layout_marginRight="24dp"
android:layout_marginBottom="24dp" />

FloatingActionButton tasarım kılavuzları

Yukarıdaki FAB xml kodumda görebileceğiniz gibi, şunları ayarladım:

        ...
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        ...
  • Bu öznitelikleri ayarlayarak layout_marginTop, layout_marginRighttekrar ayarlamanıza gerek yoktur (yalnızca Lollipop öncesi). Android, bunu Android Lollipop'taki normal FAB ile aynı şekilde ekranın sağ tarafına otomatik olarak yerleştirecektir.

        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"

Veya bunu şurada kullanabilirsiniz CoordinatorLayout:

        android:layout_gravity="end|bottom"
  • Google'ın bu kılavuzuna göre 6dp elevationve 12dp'ye sahip olmanız gerekir .pressedTranslationZ

FAB kuralları


5
ilgili araştırma için yaşasın. artı 1 için pressedTranslationZ. Bunu bilmiyordum.
Joao Sousa

app: elevation = "6dp" app: pressedTranslationZ = "12dp" lolipop öncesi hile yapıyor, ancak benim fab'ım tam anlamıyla Lollipop'ta ekranın köşesinde
Thiago

1
"PressedTranslationZ" için yanlış bir değer kullanıyorsunuz. Preslenmiş durumda yükselmenin değeri değil. PressedElevation = yükseklik + pressedTranslationZ. Yani doğru değerler app: elevation = "6dp" app: pressedTranslationZ = "6dp"
e.shishkin

3
Aslında ve değerlerini ayarlamanıza gerek yok . Varsayılan değerleri, Materyal tasarım yönergelerinde tanımlanan değerdir. Her neyse, e.shishkin haklı, değerler ve . Bunu com.android.support.design kaynak kodunda kontrol edebilirsinizapp:elevationapp:pressedTranslationZapp:elevation:6dppressedTranslationZ:6dp
Christian García

12

FloatingActionButtongenişler ImageView. Yani, ImageViewmizanpajınıza bir tane eklemek kadar basit . İşte bir XML örneği.

<android.support.design.widget.FloatingActionButton   xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/somedrawable"
    android:layout_gravity="right|bottom"
    app:borderWidth="0dp"
    app:rippleColor="#ffffff"/>

app:borderWidth="0dp" yükseklik sorunları için geçici çözüm olarak eklenmiştir.


4

AndroidX için aşağıdaki gibi kullanın

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add" />

1

Tüm kitaplıkları zaten eklediyseniz ve hala çalışmıyorsa şunu kullanın:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add" 
/>

onun yerine:

<android.support.design.widget.FloatingActionButton
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:srcCompat="@drawable/ic_add"
 />

Ve hepsi iyi çalışacak :)

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.