FloatingActionButton Destek Kütüphanesi ile örnek

SORU

1 HAZİRAN 2015, PAZARTESİ

FloatingActionButton Destek Kütüphanesi ile örnek

Son zamanlarda, bu mesajları okudum:

Android Support Library, revision 22.2.0

Ama bunların hiçbiri bana FloatingActionButton yeni bir detay oluşturma hakkında bir örnek vereyim. Anlamak çok zor, bu soruyu soruyorum.

Kimse bana bu konuda bir örnek verebilir mi?

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

EDİT

Ben sadece FloatingActionButton (FAB) bazı sorunlar bulundu, ve başka bir cevap geliştirmek istiyorum. Cevabımı aşağıya bakınız.

CEVAP

1 HAZİRAN 2015, PAZARTESİ

Yani build.gradle dosyanıza şunu ekleyin:

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

Senin themes.xml styles.xml ya da her neyse, emin olun bu - uygulama tema rengini ve renk sizin FAB sürece geçersiz (aşağıya bakınız):

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

Düzeni XML:

<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>

22.2.0, app:borderWidth="0dp" de gölge olmadan Lolipop/M görünür olmayan bir hata adresi için gerekli sürüm. (not: Düzeltme için açıklama here için teşekkürler. Bu hata sürümünde giderilmiştir 22.2.1.)

docs daha fazla seçenek (setRippleColor, vb.) görebilirsiniz ama not biri

    app:fabSize="mini"

Başka ilginç bir arka plan rengini değiştirmek için renk ... sadece bir FAB, ekleyin:

    app:backgroundTint="#FF0000"

örneğin kırmızı için bunu değiştirmek için yukarıdaki XML.

Faaliyet/Parçanın görünümü şişirilmiş sonra neyse, kodu, ....

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

Gözlemler:

Eğer bir "" bölme iki görüş dikiş üzerinde şu düğmelerden birine sahipseniz (bir RelativeLayout, örneğin kullanarak), söylemek, olumsuz bir alt sınır, üst üste düzeni marjı, bir sorunu fark edeceksiniz: FAB boyutu aslında çokfarklılolipop vs hakkında pre-lolipop. Aslında GİBİ görsel düzeni editörü görebilirsiniz. ne zaman API arasında flip birden "puf" ne zaman senin geçin pre-lolipop. Ekstra boyutu nedeni bu gibi görünüyor gölge her yöne boyutuna genişletir. O yüzden eğer yakın eğer FAB kenar boşluklarını ayarlarken bu hesaba şeyler.

Burada veya kaldırmak için bir yol var eğer çok fazla varsa dolgu değiştirin:

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, gidiyordum programlı olarak "dikiş"yerine FAB FAB yüksekliği kapma tarafından bir RelativeLayout içinde iki bölge arasında iki bölme ve kenar olarak kullanarak ofset. Ama myFab.() getHeight görünümü şişirildi sonra bile sıfır döndü, görünüyordu. Bunun yerine ben bir ViewTreeObserver yüksekliği sadece almak için kullanılan düzenlendiği ve konumunu ayarlamak sonra. Bu ipucu bakın here. Bu gibi 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);
            }
        });
    }

Bu bunu yapmak için doğru yoldur, ama iş gibi görünüyor, emin değilim.

Gölge-space tuşu küçük yapabilirsiniz gibi görünüyor yükseklik azalıyor.

Eğer bir "" layout_anchor layout_anchorGravity işte bir örnek kullanabilirsiniz: . dikiş üzerinde FAB isterseniz

<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"/>

Otomatik olarak Snackbar CoordinatorLayout a sararak geldiğinde yoldan düğme atlamak zorunda unutmayın.

Daha fazla: