2014-06-28 58 views

回答

48

的鍵被稱爲FAB(浮動操作按鈕),這是相當簡單,使。

Activity.java

public class MainActivity extends Activity { 

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

     //Outline 
     int size = getResources().getDimensionPixelSize(R.dimen.fab_size); 
     Outline outline = new Outline(); 
     outline.setOval(0, 0, size, size); 
     findViewById(R.id.fab).setOutline(outline); 
    } 

} 

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> 

和佈局文件來定義FAB按鈕。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context=".MainActivity"> 

    <ImageButton 
     android:id="@+id/fab" 
     android:layout_alignParentRight="true" 
     android:layout_alignParentBottom="true" 
     android:layout_width="@dimen/fab_size" 
     android:layout_height="@dimen/fab_size" 
     android:layout_gravity="bottom|right" 
     android:layout_marginRight="16dp" 
     android:layout_marginBottom="16dp" 
     android:background="@drawable/ripple" 
     android:stateListAnimator="@anim/anim" 
     android:src="@drawable/ic_action_add" 
     android:elevation="4dp" 
     /> 


</RelativeLayout> 

最後,當你按下按鈕時會產生波紋。 ripple.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight"> 
    <item> 
     <shape android:shape="oval"> 
      <solid android:color="?android:colorAccent" /> 
     </shape> 
    </item> 
</ripple> 

享受您的新FAB。請記住這僅適用於Android L!

編輯 這已經在更新:https://stackoverflow.com/a/24548910/4352176

+0

但願會有由谷歌發佈的時候Android L移動將在那裏一個兼容庫! – chteuchteu

+0

有沒有人試用ripple.xml替代drawable,前L版本?當我定義drawable和drawable-v21文件夾時,我遇到了一個問題。在drawable中,我使用shape和drawable-21我使用ripple,但是我的ripple.xml對於L從來沒有出現在L版本中。 – Sandra

+0

Hello Sandra, Google發佈的預覽版SDK絕對不是用於製作的,如果您在之前版本的Android中啓用了Android L主題/功能,它將是非常快速和骯髒/黑客攻擊的方法。當然,如果你想實現未完成的API,這取決於你。當我開始開發我的應用程序時,我非常樂意使用新的API,根據我對應用程序的體驗,我不得不回到較低的API,因爲android L尚未準備好。我建議遵循Google的設計指南[鏈接](http://www.google.com/design/spec/material-design/introduction.html) – M0NKEYRASH

3

您需要爲其定義另一個drawable。實際上這很簡單,但沒有記錄。

<?xml version="1.0" encoding="utf-8"?> 
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight"> 
    <item> 
     <shape android:shape="oval"> 
      <solid android:color="?android:colorAccent" /> 
     </shape> 
    </item> 
</ripple> 

我得到這個從這裏:https://github.com/romainguy/google-io-2014/blob/7c174c7901d8cd2601807dcd17f3df7ed88fbee9/app/src/main/res/drawable/info_background.xml

不要忘記設置高度和輪廓

14

有一個更容易和所有版本(V7)的方式:

<ImageButton style="@style/AppTheme" 
    android:layout_width="60dp" 
    android:layout_height="60dp" 
    android:text="New Button" 
    android:id="@+id/OkBt" 
    android:elevation="10dp" 
    android:src="@drawable/ic_keyboard_return_black_36dp" 
    android:background="@drawable/circle" /> 

看款式= 「@風格/ AppTheme」 我爲老版本設定的風格是:

<style name="AppTheme" parent="AppTheme.Base"/> 

<style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar"> 

對於Android棒棒糖是:

<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar"> 

形狀繪製的圓是:

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="oval"> 
    <solid android:color="#81D4FA"/> 
</shape> 

它工作正常的所有Android版本,使其自動圓陰影棒棒糖。