Google inbox風格的FloatingActionButton控件：FloatingActionButtonPlus

jopen 9年前發布 | 19K 次閱讀 Android開發移動開發 FloatingActionButtonPlus

this is a Google Inbox style FloatingActionButton and my english is poor。這是一個Google inbox風格的FloatingActionButton控件。

matters needing attention

該控件理論上最低支持到API版本14也就是Android4.0（minSdkVersion 14），并且由于是官方Support Library中FloatingActionButton的二次封裝，showdown的生成在API21以上和21以下并不太一樣，所以在不同版本的系統中的效果會存在一定的差異。

該控件依賴了以下兩個support library，使用者無需在項目里再次添加（Don't need to add）。

com.android.support:design:23.1.1
com.android.support:cardview-v7:23.1.0

How to use

Gradle

compile 'com.lzp.floatingactionbutton:floatingactionbuttonplus:0.2.3'

Maven

<dependency>
<groupId>com.lzp.floatingactionbutton</groupId>
<artifactId>floatingactionbuttonplus</artifactId>
<version>0.2.3</version>
</dependency>

The effect of the above（如上圖的效果）

btns.xml

<com.lzp.floatingactionbuttonplus.FloatingActionButtonPlus
android:id="@+id/FabPlus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:switchFabColor="#DB4537"
app:switchFabIcon="@mipmap/ic_add_white_48dp"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<com.lzp.floatingactionbuttonplus.FabTagLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:tagText="Download"
    >
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_get_app_white_48dp"
        app:backgroundTint="#468cb7"
        app:fabSize="mini" />
</com.lzp.floatingactionbuttonplus.FabTagLayout>

<com.lzp.floatingactionbuttonplus.FabTagLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:tagText="Favorites"
    >
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_stars_white_48dp"
        app:backgroundTint="#818aa7"
        app:fabSize="mini" />
</com.lzp.floatingactionbuttonplus.FabTagLayout>


<com.lzp.floatingactionbuttonplus.FabTagLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:tagText="Send mail"
    >
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_send_white_48dp"
        app:backgroundTint="#4BB7A7"
        app:fabSize="mini" />
</com.lzp.floatingactionbuttonplus.FabTagLayout>

<com.lzp.floatingactionbuttonplus.FabTagLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:tagText="shopping list"
    >
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_shopping_cart_white_48dp"
        app:backgroundTint="#ff9800"
        app:fabSize="mini" />
</com.lzp.floatingactionbuttonplus.FabTagLayout>

<com.lzp.floatingactionbuttonplus.FabTagLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:tagText="Search this page"
    >

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_search_white_48dp"
        app:backgroundTint="#4284E4"
        app:fabSize="mini" />
</com.lzp.floatingactionbuttonplus.FabTagLayout>

</com.lzp.floatingactionbuttonplus.FloatingActionButtonPlus>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

</android.support.v7.widget.RecyclerView>

<include layout="@layout/btns" />    

</android.support.design.widget.CoordinatorLayout>

這樣就完成了上圖的效果。
最外層的com.lzp.floatingactionbuttonplus.FloatingActionButtonPlus會帶有一個主按鈕。FloatingActionButtonPlus中包含了多個FabTagLayout，而每一個com.lzp.floatingactionbuttonplus.FabTagLayout則就是一個item。FabTagLayout帶有一個lable標簽，你需要在FabTagLayout再添加一個FloatingActionButton。請記住為每個item的FloatingActionButton添加上app:fabSize="mini"，將其設置為mini型。可通過app:backgroundTint="color"更改這些fab的顏色。

position

GIF會掉幀，實際效果很流暢

如圖提供了四種position方式，默認為right_bottom。其他為right_top、left_bottom、left_top。在CoordinatorLayout中建議不要定位到top，會被toolbar擋住。
position可在XML布局中設置，也可在JAVA代碼中設置。

XML

在com.lzp.floatingactionbuttonplus.FloatingActionButtonPlus中添加

app:position="left_top"

value還可以是right_bottom、left_bottom、left_top

Java Code

首先有四個常量分別為

public static final int POS_LEFT_TOP = 0;  
  public static final int POS_LEFT_BOTTOM = 1;
  public static final int POS_RIGHT_TOP = 2;
  public static final int POS_RIGHT_BOTTOM = 3;

通過FloatingActionButtonPlus對象設置

mActionButtonPlus = (FloatingActionButtonPlus) findViewById(R.id.FabPlus);
  mActionButtonPlus.setPosition(FloatingActionButtonPlus.POS_LEFT_TOP);

Animation

Animation暫時給了三種，分別為fade、scale、bounce，默認為scale。后續會可能會提供接口供使用者擴展。Animation同樣可以在XML中或Java中設置。

XML

在com.lzp.floatingactionbuttonplus.FloatingActionButtonPlus中添加 fade、scale、bounce三個值中的一個。如：

app:animationMode = "scale"

另可設置動畫持續時間，單位為毫秒，默認為150毫秒

app:animationDuration = "300"

Java code

首先有四個常量分別為

public static final int ANIM_FADE = 0;
public static final int ANIM_SCALE = 1;
public static final int ANIM_BOUNCE = 2;

通過FloatingActionButtonPlus對象設置

mActionButtonPlus.setPosition(FloatingActionButtonPlus.POS_LEFT_TOP);
mActionButtonPlus.setAnimation(FloatingActionButtonPlus.ANIM_SCALE);

動畫持續時間可通過

mActionButtonPlus.setAnimationDuration(300);

Events

暫時只給出了item的點擊事件，如果有更多類型事件的需求，歡迎Email聯系我。

mActionButtonPlus.setOnItemClickListener(new FloatingActionButtonPlus.OnItemClickListener() {
        @Override
        public void onItemClick(FabTagLayout tagView, int position) {
            Toast.makeText(MainActivity.this, "Click btn" + position, Toast.LENGTH_SHORT).show();
        }
    });

Scroll show or hide

關于滑動顯示隱藏，由于我還沒有弄明白CoordinatorLayout的擴展該怎么做，所以我沒有能集成在這之中。但是我給出了兩個 public method。分別為showFab() 和 hideFab()。通過FloatingActionButtonPlus對象去調用。所以你如果想要實現通過這個效果，需要你去獲取當前Scroll 的距離。例如在RecyclerView中你可以這么寫：

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);
            if (recyclerView.getScrollState() == RecyclerView.SCROLL_STATE_DRAGGING) {
                if (dy > 0) {
                    mActionButtonPlus.hideFab();
                } else {
                    mActionButtonPlus.showFab();
                }
            }
        }
    });

More settings

XML

com.lzp.floatingactionbuttonplus.FloatingActionButtonPlus

app:switchFabIcon="@mipmap/ic_add_white_48dp"   <!--設置主Fab的icon圖標-->    
 app:switchFabColor="#DB4537"                    <!--設置主Fab的顏色-->  
 app:mBackgroundColor="#99ffffff"                <!--設置item展開后的背景顏色，默認為alpha99的白色-->

com.lzp.floatingactionbuttonplus.FabTagLayout

app:tagText="text"                          <!--設置item中lable中顯示的文字-->

Java Code

com.lzp.floatingactionbuttonplus.FloatingActionButtonPlus

mActionButtonPlus.setContentIcon(getResources().getDrawable(R.mipmap.ic_add_white_48dp)); //設置主Fab的icon圖標
mActionButtonPlus.setRotateValues(405); //設置主Fab被點擊時旋轉的度數，默認為405度
boolean state = mActionButtonPlus.getSwitchFabDisplayState();  //獲取當前Fab的顯示狀態，顯示時返回true，隱藏返回false

com.lzp.floatingactionbuttonplus.FabTagLayout

tagView.setTagText("text");  //設置label中顯示的文字

Other

關于為什么不直接在FabTagLayout里集成FloatingActionButton

主要是因為Google并沒有給出用java代碼設置FloatingActionButton的size的方法，所以沒辦法設置成mini型。我試過用放射去更改FloatingActionButton中的mSize這個private變量，在api21之后，可行，但21以下就會出現很多問題，例如icon不會跟著變小，陰影會變成矩形。這是因為在FloatingActionButton中是根據mSize的值去繪制陰影和決定icon大小的。而這一切操作都是在它的constructor中完成，所以我選擇了讓使用者來指定每一個FloatingActionButton。當然日后也許我會試著制作一個獨立的FloatingActionButton來解決這個問題。

項目主頁：http://www.baiduhome.net/lib/view/home/1449328504108

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1449328504108.html

Android開發移動開發 FloatingActionButtonPlus

Google inbox風格的FloatingActionButton控件：FloatingActionButtonPlus

matters needing attention

該控件依賴了以下兩個support library，使用者無需在項目里再次添加（Don't need to add）。

How to use

Gradle

Maven

The effect of the above（如上圖的效果）

btns.xml

activity_main.xml

position

XML

Java Code

Animation

XML

Java code

Events

Scroll show or hide

More settings

XML

com.lzp.floatingactionbuttonplus.FloatingActionButtonPlus

com.lzp.floatingactionbuttonplus.FabTagLayout

Java Code

com.lzp.floatingactionbuttonplus.FloatingActionButtonPlus

com.lzp.floatingactionbuttonplus.FabTagLayout

Other

關于為什么不直接在FabTagLayout里集成FloatingActionButton

相關經驗

相關資訊

相關文檔

目錄

Google inbox風格的FloatingActionButton控件：FloatingActionButtonPlus

matters needing attention

該控件依賴了以下兩個support library，使用者無需在項目里再次添加 （Don't need to add）。

How to use

Gradle

Maven

The effect of the above（如上圖的效果）

btns.xml

activity_main.xml

position

XML

Java Code

Animation

XML

Java code

Events

Scroll show or hide

More settings

XML

com.lzp.floatingactionbuttonplus.FloatingActionButtonPlus

com.lzp.floatingactionbuttonplus.FabTagLayout

Java Code

com.lzp.floatingactionbuttonplus.FloatingActionButtonPlus

com.lzp.floatingactionbuttonplus.FabTagLayout

Other

關于為什么不直接在FabTagLayout里集成FloatingActionButton

相關經驗

相關資訊

相關文檔

目錄

該控件依賴了以下兩個support library，使用者無需在項目里再次添加（Don't need to add）。