碼農日常-『Android studio』如何懸浮按鈕Floating ActionButton/Action Menu－碼農日常大小事

今天文章寫的是關於Floating Action Button

這個元件相信大家都有看過，也算是個超級常用的元件了(-‿◦)

又是來個廢話時間...雖然講是這樣講

不過其實當時做這個也沒有遇到什麼難點啦~โ๏∀๏ใ

所以這次就不要講廢話了，直接開始吧

這次的內容非常簡單，所以沒有Github哦(・ωｰ)～☆

1. 載入套件

其實認真要講我當時在使用這個元件的阻礙的話，其實有一個

因為Android原廠似乎只有提供FloatActionButton而已

但是沒有提供FloatActionMenu

啊？你問我差在哪？

FloatActionButton是Gif圖中左下的那個，直接點就有反應的

而FloatActionMenu則是右下跟左上的那個，點一下還有按鈕噴出來的

那麼，ActionMenu要怎麼做呢？

其實我在Stack overflow有看到一篇問答，有人就直接寫出來了

->Stack overflow 網址太長了，請點我

但是我覺得既然有人幫你寫好套件(我們稱為造好輪子)了，為什麼不用？

所以這篇我是載入我推薦的第三方套件完成的

那麼，來載入吧！(･ω･)b

請進入build.gradle

截圖 2020-12-13 下午4.59.43

找到dependencies，並寫入以下兩個套件

implementation 'com.github.clans:fab:1.6.4'
implementation 'com.google.android.material:material:1.3.0-alpha04'

截圖 2020-12-13 下午5.00.41

上方的套件就是FloatButton的套件

下方的則是google提供的UI擴展

在本文中，這個是要來顯示Snackbar用的，沒有要做的話可以不用載入沒關係

最後按下Sync Now，即完成

截圖 2020-12-13 下午5.05.08

提供一下這個套件的網址...差點忘記寫了

->https://github.com/Clans/FloatingActionButton

這個套件下面有寫關於ActionButton跟ActionMenu的範例操作，我個人是覺得這個Github真的寫得很用心

ActionButton範例

ActionMenu範例

接下來我要寫得也跟他的內容大同小異，所以兩者配合著看的話相信聰明的你一定會秒懂(・ωｰ)～☆

來吧( ﾟДﾟ)b

2. 左上的按鈕

截圖 2020-12-13 下午5.11.45

這個超簡單，根本不用寫程式～哈哈

請在xml檔案寫如下內容即可

PS. 最後面會有全部的xml檔案

<com.github.clans.fab.FloatingActionMenu

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:menu_openDirection="down"
    app:menu_labels_position="right"
    >
    <com.github.clans.fab.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fab_size="mini"
        app:fab_label="選項一"
        />
    <com.github.clans.fab.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fab_size="mini"
        app:fab_label="選項二"
        />


</com.github.clans.fab.FloatingActionMenu>

粉底白字的部分，上半部是menubutton開啟的方向

下半部則是actionbutton標籤要顯示的方向

藍底白字的部分則是設置actionButton的大小

套件基本上只支援normal跟mini兩種Size..不過也很夠用了( ･ὢ･ )

3. 右下的按鈕

截圖 2020-12-13 下午5.31.56

我先講啊...Icon跟文字沒有太大的意義...

這部分的xml如下

<com.github.clans.fab.FloatingActionMenu
    android:id="@+id/floatingActionMenu"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:menu_colorNormal="@color/colorAccent"
    app:menu_colorRipple="#8BDFD7"
    app:menu_colorPressed="@color/colorPrimary"
    app:layout_constraintEnd_toEndOf="parent" >

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/button_Select02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fab_size="mini"
        app:fab_colorNormal="#2196F3"
        app:fab_colorPressed="#2196F3"
        app:fab_colorRipple="#FFFFFF"
        app:fab_label="健全者"
        android:src="@drawable/ic_baseline_accessibility_24"
        />
    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/button_Select01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fab_size="mini"
        app:fab_colorNormal="#4CAF50"
        app:fab_colorPressed="#4CAF50"
        app:fab_colorRipple="#FFFFFF"
        app:fab_label="行動不便者"
        android:src="@drawable/ic_baseline_accessible_24"
        />
</com.github.clans.fab.FloatingActionMenu>

設置模式一樣差不多，不過在這我有換了一下顏色

app:fab_colorNormal="#4CAF50"
app:fab_colorPressed="#4CAF50"
app:fab_colorRipple="#FFFFFF"

給你個機會去練一下英文吧！恩！絕對不是我懶！(´◑ω◐`)

這邊的話我有寫些東西

除了裡面的button有點擊事件之外，我還有寫點選空白處便把Menu收起來的機制

那麼，程式在此

點擊事件(其實跟一般按鈕點擊一樣...)

public class MainActivity extends AppCompatActivity {

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


        FloatingActionButton bt01 = findViewById(R.id.button_Select01);
        bt01.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "按了選項", Toast.LENGTH_SHORT).show();
            }
        });   
    }
}

空白處關閉事件

請先使用繼承覆寫dispathTouchEvent

截圖 2020-12-13 下午5.53.10

然後再寫以下內容

@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
    FloatingActionMenu menu = findViewById(R.id.floatingActionMenu);
    if (ev.getAction() == MotionEvent.ACTION_UP && menu.isOpened()){
        menu.close(true);
    }
    return super.dispatchTouchEvent(ev);
}

基本上就完成囉 :D

這個dispatchTouchEvent基本上就是一個偵測你是否有點擊到螢幕的方式

給出來的ev.getAction會回傳代碼，01 01這樣給

4. 左下的按鈕

左下就是一個最基本的做法...就是仿造官網廢到笑的範例(￣ー￣；

來看看官網是多麼廢到笑吧

->https://developer.android.com/guide/topics/ui/floating-action-button

好啦...也不要說官網真的廢到笑還是怎樣

至少它提供了一個最基本的範例帶領初學者

好吧，我就仿造他一下好了

實際上左下的按鈕就是一個ActionButton而已

所以就加入如下

<com.github.clans.fab.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_baseline_accessible_24"
    app:fab_colorNormal="#4CAF50"
    app:fab_colorPressed="#4CAF50"
    app:fab_colorRipple="#FFFFFF"
    android:layout_marginStart="16dp"
    android:layout_marginBottom="16dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

然後加入如下程式

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

        final Snackbar s = Snackbar.make(view, "坐輪椅的Icon", Snackbar.LENGTH_LONG);
        s.setAction("了解", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                s.dismiss();
            }
        });
        s.show();
    }
});

完成(・ωｰ)～☆

Po一下全部

activity_main.xml

截圖 2020-12-13 下午6.18.26

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <com.github.clans.fab.FloatingActionMenu

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:menu_openDirection="down"
        app:menu_labels_position="right"
        >
        <com.github.clans.fab.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_size="mini"
            app:fab_label="選項一"
            />
        <com.github.clans.fab.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_size="mini"
            app:fab_label="選項二"
            />


    </com.github.clans.fab.FloatingActionMenu>

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/floatingActionMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu_colorNormal="@color/colorAccent"
        app:menu_colorRipple="#8BDFD7"
        app:menu_colorPressed="@color/colorPrimary"
        app:layout_constraintEnd_toEndOf="parent" >

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/button_Select02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_size="mini"
            app:fab_colorNormal="#2196F3"
            app:fab_colorPressed="#2196F3"
            app:fab_colorRipple="#FFFFFF"
            app:fab_label="健全者"
            android:src="@drawable/ic_baseline_accessibility_24"
            />
        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/button_Select01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_size="mini"
            app:fab_colorNormal="#4CAF50"
            app:fab_colorPressed="#4CAF50"
            app:fab_colorRipple="#FFFFFF"
            app:fab_label="行動不便者"
            android:src="@drawable/ic_baseline_accessible_24"
            />
    </com.github.clans.fab.FloatingActionMenu>

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_baseline_accessible_24"
        app:fab_colorNormal="#4CAF50"
        app:fab_colorPressed="#4CAF50"
        app:fab_colorRipple="#FFFFFF"
        android:layout_marginStart="16dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

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


        FloatingActionButton bt01 = findViewById(R.id.button_Select01);
        bt01.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "按了選項", Toast.LENGTH_SHORT).show();
            }
        });
        FloatingActionButton fab = findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                final Snackbar s = Snackbar.make(view, "坐輪椅的Icon", Snackbar.LENGTH_LONG);
                s.setAction("了解", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        s.dismiss();
                    }
                });
                s.show();
            }
        });

    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        FloatingActionMenu menu = findViewById(R.id.floatingActionMenu);
        if (ev.getAction() == MotionEvent.ACTION_UP && menu.isOpened()){
            menu.close(true);
        }
        return super.dispatchTouchEvent(ev);
    }
}

最後...

程式設計筆記 Android Studio Andoird androidapp開發 androidstudio教學 Android studio Action button Action menu Floating Button Floating Menu 懸浮按鈕 Android 懸浮按鈕 Android Action Menu group Android Action menu Android action button Snackbar Snackbar簡易使用 Float button Float menu

碼農日常

碼農日常大小事

碼農日常發表在痞客邦留言(7) 人氣()

E-mail轉寄

碼農日常大小事

認真打好每一篇文章，認真分享程序猿每一件大小事；走過晃過依然滿載而歸

Hello