iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
Mobile Development

android studio 30天初學筆記系列 第 24

Android Studio初學筆記-Day24-FloatButton和SnackBar

  • 分享至 

  • xImage
  •  

FloatButton和Snackbar

FloatButton是漂浮式按鈕,也可以說是不同種設計的Button,因為它基本上設定也就跟Button是大同小異的,不過它也可以幫忙在未來設計Button的時候有更多不一樣的變化,而Snackbar則可以說是Toast的親戚,所以我今天將帶大家了解這兩個元件和之前所介紹過的有甚麼不同之處。

activity_main.xml的佈局檔

<androidx.coordinatorlayout.widget.CoordinatorLayout
    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"
    android:id="@+id/coordinatorLayout"
    tools:context=".MainActivity">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:onClick="open"
        android:src="@drawable/ic_baseline_done_24"
        app:backgroundTint="@color/purple_200"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        app:fabSize="normal" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

可以看到很簡單的加入一個FloatButton而已,大部分設定也跟Button差不多,以下我稍微講解不同的設定。

  • android:src :
    負責設定圖片
  • backgroundTint:
    設置按鈕的顏色
  • elevation:
    設置陰影,製造立體感,默認爲6dp
  • pressedTranslationZ:
    設置點擊時的陰影大小,默認是12dp
  • fabSize:
    設置FloatingActionButton的大小,可以設定為normal的正常尺寸(56dp)或mini較小的尺寸(40dp)

不過這裡要注意的是,因為我將與Snackbar做結合,所以改變了最外層的Layout變成CoordinatorLayout並加上了id,我也將在最後展現CoordinatorLayout的效果,這裡先注意到即可。

Snackbar的使用

public class MainActivity extends AppCompatActivity {
    CoordinatorLayout coordinatorLayout;

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

        coordinatorLayout = (CoordinatorLayout)findViewById(R.id.coordinatorLayout);
    }

    public void open(View v) {
        Snackbar.make(coordinatorLayout, "我是Snackbar", Snackbar.LENGTH_LONG)
                .setAction("按我一下", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // 點擊訊息時要執行的動作
                        Toast.makeText(MainActivity.this, "你按了 Snackbar", 
                                        Toast.LENGTH_SHORT).show();
                    }
                })
                .setActionTextColor(Color.YELLOW)    // 可以指定文字顏色
                .show();
    }
}

我在Snackbar加上了按鈕,這也是跟Toast不一樣的地方,這裡我讓按鈕的功能為產生Toast,可以藉此比較一下兩者的相似之處,不過也可以不加上按鈕,把setAction移除即可,一樣可以產生Snackbar,而Snackbar還有一個特點是能當Snackbar產生時,右滑即可移除,最後看一下效果和CoordinatorLayout能讓兩者不重疊的特色。

成果

https://ithelp.ithome.com.tw/upload/images/20210908/20139136UMY5O0eLVb.png
https://ithelp.ithome.com.tw/upload/images/20210908/20139136ciUe5GoM6K.png

可以看見Snackbar將FloatButton往上推,這就是CoordinatorLayout的效果,是不是挺不錯的呢。
今天FloatButton和Snackbar就講到這邊,謝謝大家~/images/emoticon/emoticon41.gif


上一篇
Android Studio初學筆記-Day23-Banner
下一篇
Android Studio初學筆記-Day25-ExpandableListVIew(1)
系列文
android studio 30天初學筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言