今天文章寫的是關於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);
    }
}

 


 

最後...

TK

arrow
arrow
    創作者介紹
    創作者 碼農日常 的頭像
    碼農日常

    碼農日常大小事

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