Android Studio:FloatingActionButton(FAB)分享按鈕(Share button)製作完整教學

2019/10/02 3,055 2 軟體應用 , 行動平台 , 程式設計 , Android , JAVA , APP開發

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 = true

因為 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 來做些什麼 ...
            }
        });

中央註記的 // 就是點擊 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);

上面這段會產生分享「我要分享這段文字」這個 String(字串)的面板,也就是大家熟悉的 Android APP 分享面板啦!


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

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


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

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

✎ 參考資料 · References

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇