Android L - Kayan Eylem Düğmesi (FAB)

SORU

27 HAZİRAN 2014, Cuma

Android L - Kayan Eylem Düğmesi (FAB)

Google zaten piyasaya yeni genelge bu FAB düğmesi için tanımlanmış bir stil veya bir bileşen ya da kendi başıma tasarımı uygulamak gerekir mi?

Burada açıklanan düğmesi: http://www.google.com/design/spec/components/buttons.html#

DÜZENLE (kW, Muayene 05/2015): Lukas' answer Google'dan yeni tasarım kütüphanesinde uygulanmasını gösteren bir bak.

Beklerken, kendim için oluşturdum:

layout.xml

    <Button
    style="?android:attr/buttonStyleSmall"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text=" "
    android:textSize="40sp"
    android:background="@drawable/ripple"
    android:id="@ id/fabbutton"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:elevation="3dp"
    android:paddingBottom="16dp"
    android:fontFamily="sans-serif-light"
    android:layout_alignParentEnd="true"
    android:layout_gravity="right|bottom" />

ripple.xml

<?xml version="1.0" encoding="utf-8"?>
 <ripple android:color="#ffb300" xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@drawable/fab"></item>
</ripple>

fab.xml

<?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <solid android:color="@color/accentColor" />
</shape>

Activity.java

    import android.graphics.Outline;
    ...
    Button fab = (Button) rootView.findViewById(R.id.fabbutton);

    Outline mOutlineCircle;
    int shapeSize = getResources().getDimensionPixelSize(R.dimen.shape_size);
    mOutlineCircle = new Outline();
    mOutlineCircle.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);

    fab.setOutline(mOutlineCircle);
    fab.setClipToOutline(true);

Bu kodu android studio v0 hata olarak gösterilir.8.1, diğer l bileşenleri android. Bir sonraki sürümünde sabit olacaktır.

Sonuç:

enter image description here

CEVAP

3 Temmuz 2014, PERŞEMBE

GÜNCELLEME: resmi Tasarım Destek Kitaplığı ile 30/05/2015

Orada bir resmi şimdi widget.

Eklemek senin için bu bağımlılık build.gradle sadece

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

Düzen: bu görünüm ekleyin

<android.support.design.widget.FloatingActionButton
    android:id="@ id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:src="@drawable/ic_done" />

Ve bunu kullanın:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
               //TODO
            }
        });

Daha fazla bilgi here.

GÜNCELLEME: Android 5 kodu ile 02/12/2014

Ayrıca ekleyebilirsinizstateListAnimatordüğmeniz için:

<Button
 android:stateListAnimator="@anim/anim"
/>

Nerede anim.xml :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:state_pressed="true">
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueFrom="@dimen/button_elevation"
            android:valueTo="@dimen/button_press_elevation"
            android:valueType="floatType" />
    </item>
    <item>
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueFrom="@dimen/button_press_elevation"
            android:valueTo="@dimen/button_elevation"
            android:valueType="floatType" />
    </item>
</selector>

Dimens.xml

<resources>
    <dimen name="fab_size">56dp</dimen>

    <dimen name="button_elevation">2dp</dimen>
    <dimen name="button_press_elevation">4dp</dimen>
</resources>

Bu Daniele cevabı kontrol edin.

Anahat Daniele tarafından söz hakkında. EkleyinyükseklikDüğme için öznitelik ve ayarlayınAnahatüzerinden kodu:

   <ImageButton
        android:background="@drawable/ripple"
        android:stateListAnimator="@anim/anim"
        android:src="@drawable/ic_action_add"
        android:elevation="4dp"
        />

Anahat Hakkında:

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layoutfab);

        //Outline: OLD METHOD IN L-PREVIEW
        //int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
        //Outline outline = new Outline();
        //outline.setOval(0, 0, size, size);
        //findViewById(R.id.fab).setOutline(outline);

        Button fab = (Button) findViewById(R.id.fab);
        ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
           @Override
           public void getOutline(View view, Outline outline) {
              // Or read size directly from the view's width/height
              int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
              outline.setOval(0, 0, size, size);
           }
        };
        fab.setOutlineProvider(viewOutlineProvider);
    }

}

enter image description here