Android Studio：FloatingActionButton（FAB）分享按鈕（Share button）製作完整教學

Android Studio 是專門為開發 Android APP 所設計的整合開發環境，若想要知道更多相關技巧與知識，歡迎參閱「本站標籤」。

FloatingActionButton 簡稱 FAB，顧名思義就是浮動的行動按鈕，它是跟著 Material Design 一起出來的一個元件，說到這，是不是想到常常在手機 APP 出現的一顆圓形按鈕？就是那個右下角的按鈕！它就是一種 FAB 的應用，很多開發者使用 FAB 來製作發文按鈕、回覆功能、分享功能、開啟相機或開啟檔案，總之這個浮動按鈕應用相當廣泛，我們這次要結合 FAB 製作一個簡易的分享按鈕（Share button）。

這個分享按鈕可以把 String（字串）分享給其他 APP，或者是要直接複製也行！當然這個分享按鈕不是只能分享 String，它支援非常多格式，不過這篇文章就以單純的 String 來作示範！本文採用 Java 語言，不過其實全篇用到程式碼的部分就是呼叫分享功能，這個可以直接從官方網站文檔中找到 Kotlin 的版本，歡迎多方嘗試，希望會寫 APP 的人可以增加！掌握數位科技就是掌握未來呀！

▲ 開啟 Android Studio，建立新專案，選擇「Basic Activity」，點「Next」。

▲ 專案名稱我這邊為「FloatingActionButton_Share」，不要用中文，可以自訂，程式語言我選 Java，這看個人要選哪個，另一個就是比較新的 Kotlin，最後點「Finish」。

▲ 成功載入專案，預設就會幫您開啟 MainActivity.java 與 content_main.xml，先切換到 content_main.xml 並點下方切換成「Design」，即設計模式。

▲ 你會發現 content_main.xml 其實就是敘述 APP 內容的佈景敘述檔（在前端就像是 HTML + CSS），FAB 在畫面中可以被看到，但樹狀結構面板（Component Tree）卻沒有這個元件，原來它是在 activity_main.xml 裡！所以到左側雙擊開啟 activity_main.xml 吧！

▲ 現在總算可以從樹狀結構面板（Component Tree）看到 FAB 元件，因為一開始建立專案的模板，它已經幫我們建立一個 ID 為 fab 的 FAB 元件，有點繞口令，當然上方面板（Palette）可以在 Buttons 裡找到 Floating Action Button 並拉出來使用。

▲ 切到「Text」，也就是檢視 XML 原始碼，你可以發現到 FAB 元件的所有屬性，特別是上方箭頭指的 ID 與下方箭頭指的圖示屬性，ID 寫程式就會常常需要用到，圖示我們馬上要更換。很多屬性都是在描述 FAB 元件的相對位置，這個可以參考預設的原始碼來研究唷！

接著要來更換 FAB 的圖示，左側檔案總管找到「 res」，這是放各種素材的目錄，上方點滑鼠右鍵。

▲ New → Vector Asset。

▲ Clip Art 點開可以選擇 Android 官方提供的圖示集，裡面就可以搜尋找到 Share，也就是分享按鈕的圖示。大多圖示都可以從官方圖示集找到，當然也能用自己設計的，這時候上方的 Asset Type 就要選 Local file。

▲ 因為我 FAB 按鈕底色會比較深，所以圖示改純白色，接著點「Next」會顯示圖示擺放的目錄，最後請點「Finish」完成。

▲ activity_main.xml 中 FAB 的「app:srcCompat」屬性就可以替換成「@drawable/ic_share_black_24dp」引入剛剛建立的圖示，成功的話原始碼旁邊就會有預覽圖示了！

▲ 切回設計模式將會發現 FAB 元件出現紅色的驚嘆號，也就是警告，原來使用 vectorDrawables 這個資源庫要先去 build.gradle 啟用它。

▲ 所以接下來就到 build.gradle 新增以下原始碼：

android.defaultConfig.vectorDrawables.useSupportLibrary = trueCopy

因為 build.gradle 有所變更，因此要點 Sync Now 來讓 IDE（也就是 Android Studio）跑一次同步。

▲ 警告訊息消失代表成功！順便把 FAB 的底色換成深綠色。接著我們要切換到 MainActivity.java 寫程式啦！若找不到可以到「 java」目錄下找到，不要開啟到含有「Test」的目錄唷！

▲ 先看到 protected void onCreate(Bundle savedInstanceState)，再找到 fab.setOnClickListener，其實它可以展開，只是被 IDE 隱藏，全部是這樣：

fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
               // 按下 FAB 來做些什麼 ...
            }
        });Copy

中央註記的 // 就是點擊 FAB 要執行的動作 ... 那這次就是塞分享功能進去（原本 // 區塊預設的程式碼可以刪掉或取代掉），因此依照官方給的範例，程式碼如下：

Intent sendIntent = new Intent();
sendIntent.setAction(Intent.ACTION_SEND);
sendIntent.putExtra(Intent.EXTRA_TEXT, "我要分享這段文字");
sendIntent.setType("text/plain");

Intent shareIntent = Intent.createChooser(sendIntent, null);
startActivity(shareIntent);Copy

上面這段會產生分享「我要分享這段文字」這個 String（字串）的面板，也就是大家熟悉的 Android APP 分享面板啦！

▲ 這邊要提醒各位將程式碼貼入看到一堆紅色別緊張，這只是沒有匯入 class 的問題，游標先放在紅色上按鍵盤 Alt + Enter 應該會跳出選單，選 Import class，它會幫您自動匯入缺少的 class，以後遇上相當狀況都可以試試這麼做！

接著就可以執行模擬器測試功能是否正常可運作！不會用模擬器？請參閱：Android Studio：建立虛擬設備（模擬器）、運行開發中的 APP 在模擬器上

▲ 成功打開 APP 後點右下角的綠色分享按鈕，接著就會開啟分享面板，分享的的確是我們定義的「我要分享這段文字」！趕快動手試試看吧！

GitHub 專案：https://github.com/qwe987299/FloatingActionButton_Share

✎ 參考資料 · References

Add a Floating Action Button （Android Developers）

Sending simple data to other apps （Android Developers）

贊助廣告 ‧ Sponsor advertisements

《上一篇》Git 版本控制：「.gitignore」是讓你忽略某些檔案、目錄的設定檔！

《下一篇》Git 版本控制：為 APP 專案建立版本管理、提交/認可、上傳至 GitHub（使用 Android Studio）

萌芽站長

您好，我是萌芽系列網站（Mnya Series Website）的站長&創始人，可以稱呼我「萌芽站長」。我的興趣與專長有登山、觀察地形、攝影、旅遊、網頁設計＆架設＆經營、動畫製作、圖片處理、資料彙整等。有任何問題或建議請至萌芽論壇發表。網站業務、商業合作的聯絡方式在「關於本站 → 團隊介紹 → 站長介紹」，很高興認識您！請多指教！

留言區 / Comments

萌芽站長

熱門文章

近期文章

頁面

其他操作