天天看點
傳回

Android自定義的FloatingActionButton效果Android自定義的FloatingActionButton效果使用說明：共勉：

Android自定義的FloatingActionButton效果

現在Android的ActionBar功能已經很少人app使用了。但是有些頁面還是需要這種按鈕的操作（比如執行一些資料重新整理或頁面跳轉的功能），就有了現在的懸浮效果的按鈕，并且這個懸浮按鈕可以設定在頁面的任意位置！其實就是一個ImageButton，經過各種封裝和處理後得到一個比較好看的效果。

現在谷歌官方的Design包，已經右有FloatingActionButton這個類了，但是要求版本較高，所有現在很多編譯器沒法使用，我的也是，這裡使用的是自定義的類。具體代碼可以看源碼，隻有幾個類，但是要添加一些資源檔案。很多具體的屬性可以自己修改。

效果（上下左右四種效果）：

Android自定義的FloatingActionButton效果Android自定義的FloatingActionButton效果使用說明：共勉：

使用說明：

（一）包含的自定義類

1.FloatingActionButton懸浮按鈕的類

是一個繼承了IamgeButton的類，可以在布局中設定懸浮按鈕的圖檔、文字、附帶的文字等等資料

2.FloatingActionsMenu懸浮菜單，裡面可以放多個懸浮按鈕

是一個繼承了ViewGroup的容器類，裡面可以放置多個懸浮按鈕，可以指定按鈕的方向，預設已經設定好了點選一次顯示裡面的懸浮按鈕，第二次隐藏。

懸浮菜單預設已經有一個懸浮按鈕，即使裡面不添加懸浮，按鈕也是會預設顯示一個。

3.繼承了懸浮按鈕的類，就加了一個mPlusColor屬性，用來設定懸浮按鈕的顔色，是用來擴充的吧？

（二）布局檔案，及屬性的詳解

使用的時候包名記得更改

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:fab="http://schemas.android.com/apk/res-auto"  //命名空間的進入
                android:background="@color/background"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
   <!--一組懸浮按鈕，裡面可以有多個懸浮按鈕-->
    <com.example.FloatingActionButton.floatingactionbutton.FloatingActionsMenu //懸浮菜單
            android:id="@+id/multiple_actions_down"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentTop="true"
            fab:fab_addButtonColorNormal="@color/white"             //菜單按鈕正常的背景顔色   
            fab:fab_addButtonColorPressed="@color/white_pressed"    //菜單按鈕按下的背景顔色
            fab:fab_addButtonSize="mini"                            //菜單按鈕的大小，normal表示56dp，mini表示40dp
            fab:fab_addButtonPlusIconColor="@color/half_black"      //圖像的顔色，區分背景，圖像旁邊空白的地方就是背景  
            fab:fab_expandDirection="down"                          //顯示懸浮按鈕的方向，up表示向上（預設），down表示向下，left表示向左，right表示向右
            fab:fab_labelStyle="@style/menu_labels_style"           //設定标簽文本的風格，預設是灰色背景，白色字型
            android:layout_marginTop="16dp"                         //android的屬性就不解釋了！！
            android:layout_marginRight="16dp"
            android:layout_marginEnd="16dp">

        <com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton     //懸浮按鈕
                android:id="@+id/action_enable"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"            
                fab:fab_colorNormal="@color/white"                  //正常的顔色
                fab:fab_title="Set bottom menu enabled/disabled"    //标簽文本顯示的内容
                fab:fab_icon="@drawable/icon_add"                   //顯示的圖示
                fab:fab_colorPressed="@color/white_pressed"         //懸浮按鈕按下時顯示的顔色
        />

        <com.example.FloatingActionButton.floatingactionbutton.AddFloatingActionButton  //另一種懸浮按鈕
                android:id="@+id/semi_transparent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                fab:fab_plusIconColor="@color/red"                              //圖像的顔色 
                fab:fab_colorNormal="@color/blue_transparent"                   //懸浮按鈕正常的顔色
                fab:fab_colorPressed="@color/blue_transparent_pressed"          //懸浮按鈕按下的顔色
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="16dp"/>

    </com.example.FloatingActionButton.floatingactionbutton.FloatingActionsMenu>


</RelativeLayout>

（三）java代碼調用

其實就是設定ImageButton的事件，單擊事件就是onClick

這裡展示下，右上角部分的邏輯代碼： 

package com.example.FloatingActionButton.activity;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import com.example.FloatingActionButton.R;
import com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton;
import com.example.FloatingActionButton.floatingactionbutton.FloatingActionsMenu;

/**
 * 右上角的邏輯
 */
public class RightTopActivity extends Activity {

    FloatingActionsMenu multiple_actions_down;
    FloatingActionButton removeAction;
    FloatingActionButton button_gone;
    FloatingActionButton action_enable;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_right_top);
        initView();
        initData();
        initEvent();
    }

    private void initView() {
        multiple_actions_down = (FloatingActionsMenu) findViewById(R.id.multiple_actions_down);
        removeAction = (FloatingActionButton) findViewById(R.id.button_remove);
        button_gone = (FloatingActionButton) findViewById(R.id.button_gone);
        action_enable = (FloatingActionButton) findViewById(R.id.action_enable);
    }

    private void initData() {
        button_gone.setVisibility(View.GONE);

    }

    private void initEvent() {
        //監聽點選事件
        removeAction.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //删除某個對象，可以是自己
                multiple_actions_down.removeButton(removeAction);
                button_gone.setVisibility(View.VISIBLE);//剛開始隐藏的顯示出來
            }
        });

        action_enable.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                Toast.makeText(RightTopActivity.this, "右邊第二個按鈕", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

它的布局檔案： 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:fab="http://schemas.android.com/apk/res-auto"
                android:background="@color/background"
                android:layout_width="match_parent"
                android:layout_height="match_parent">


    <!--右上角那組按鈕-->
    <com.example.FloatingActionButton.floatingactionbutton.FloatingActionsMenu
            android:id="@+id/multiple_actions_down"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentTop="true"
            fab:fab_addButtonColorNormal="@color/red"
            fab:fab_addButtonColorPressed="@color/red_pressed"
            fab:fab_addButtonSize="mini"
            fab:fab_addButtonPlusIconColor="@color/menu_plus"
            fab:fab_expandDirection="down"
            fab:fab_labelStyle="@style/labels_style_orange"
            android:layout_marginTop="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginEnd="16dp">
        <!--沒有任何操作的按鈕，右邊那組最下面那個-->
        <com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                fab:fab_colorNormal="@color/white"
                fab:fab_colorPressed="@color/red_pressed"
                fab:fab_size="mini"/>
        <!--右上角第三個（倒數第二個），單擊可消失的！-->
        <com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton
                android:id="@+id/button_remove"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                fab:fab_colorNormal="@color/white"
                fab:fab_colorPressed="@color/white_pressed"
                fab:fab_icon="@drawable/ic_fab_star"
                fab:fab_title="Click to remove"/>
        <!--一開始就消失的按鈕-->
        <com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton
                android:id="@+id/button_gone"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                fab:fab_colorNormal="@color/white"
                fab:fab_icon="@drawable/icon_delete"
                fab:fab_colorPressed="@color/white_pressed"/>
        <!--右上角第二個-->
        <com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton
                android:id="@+id/action_enable"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                fab:fab_colorNormal="@color/white"
                fab:fab_title="Set bottom menu enabled/disabled"
                fab:fab_icon="@drawable/icon_add"
                fab:fab_colorPressed="@color/white_pressed"/>

    </com.example.FloatingActionButton.floatingactionbutton.FloatingActionsMenu>


</RelativeLayout>

上下左右四種效果，分開展示：

Android自定義的FloatingActionButton效果Android自定義的FloatingActionButton效果使用說明：共勉：

後期，我對右上角部分頁面資源檔案進行了一點修改，效果：

Android自定義的FloatingActionButton效果Android自定義的FloatingActionButton效果使用說明：共勉：

你也可以根據自己的需求，重新寫一個style設定樣式

像下面圖檔的樣式，還是不錯的，寫起來也不難，效果：

Android自定義的FloatingActionButton效果Android自定義的FloatingActionButton效果使用說明：共勉：

項目的源碼：https://github.com/liwenzhi/FloatingActionButton

大家包幾個類和一些資源檔案複制或下載下傳下來就可以用了！

共勉：

我們要學會狠忍靜（很冷靜）

狠：男人對自己狠一點才能有作為。

忍：适當忍住一下欲望，你才能得到更多。

靜：靜下心來才能好好想事情和做事情。

Android自定義的FloatingActionButton效果Android自定義的FloatingActionButton效果使用說明：共勉：
android ui 谷歌 設計 floating
上一篇: 如今中國在電池制造業占主導地位，未來五年中國電池制造地位如何？随着世界加速進入電動汽車時代，電池制造已成為許多國家的優先
下一篇: floating輸入 高阻輸入_STM32 GPIO八種輸入輸出模式

繼續閱讀