FC 12.4.1 關於懸浮按鈕FloaActionButton(SnackBar、CoordinatorLayout)
阿新 • • 發佈:2018-11-24
FloatingActionButton也是Design Support 庫中的一個控制元件,來實現懸浮按鈕的效果。還可以給這個按鈕指定圖示,表示來做什麼。
使用FloatingActionButton
提前準備好一個ic_done.png【素材地址:點我】
修改activity_main.xml
- 在主螢幕中加入了一個FloatingActionButton
- 通過layout_gravity將FloatingActionButton位置設定在右下角(end的作用和start的作用相同,如果系統語言是從左往右的,那麼end表示在右邊,反之則在左邊)
- 通過src設定圖示
- 通過layout_margin設定邊距
- 通過app:elevation設定投影高度(預設即可,不用可以的來寫)(高度設定越高,則投影範圍越大,投影效果越淡;高度設定越低,投影範圍越小,投影效果越濃)
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_Layout" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/fab" android:layout_margin="16dp" android:layout_gravity="bottom|end" android:src="@drawable/ic_done" app:elevation="8dp"/> </android.support.design.widget.CoordinatorLayout> ... </android.support.v4.widget.DrawerLayout>
修改MainActivity(新增處理點選事件)
只需要修改oncreat方法
FloatingActionButton和button類似,呼叫OnClickListener方法來實現點選效果
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ... FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "", Toast.LENGTH_SHORT).show(); } }); }
效果如圖
使用SnackBar
Design Support 庫提供的更加先進的提示工具——Snackbar。
Toast作用是告訴使用者發生了什麼事情,但同時使用者只能被動接收這個事情,沒有辦法讓使用者原則。
Snackbar提示加入一個可互動按鈕,當用戶點選可以執行一些額外的操作。
修改MainActivity中的程式碼如下:
- Snackbar.make()方法來建立一個Snackbar物件,
- 其中第一個引數是view,只要是當前介面佈局的任意一個view都可以,Snackbar會使用這個view來自動查詢最外層的佈局用於展示Snackbar
- 第二個引數就是Snackbar中顯示的內容
- 第三個引數是Snackbar顯示的時長(和Toast類似)
- 接著呼叫的setAction方法來設定一個動作,從而使Snackbar可以和使用者互動,這裡我們只彈出Toast
- 最後呼叫show方法讓Snackbar顯示出來
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v, "Data Deleted", Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "", Toast.LENGTH_SHORT).show();
}
}).show();
}
});
}
效果如圖
然而Snakebar將我們的懸浮按鈕遮擋了。這是一個bug,影響使用者體驗。解決辦法藉助CoordinatorLaoyout輕鬆解決。
使用CoordinatorLaoyout
CoordinatorLaoyout是一個加強版的FrameLayout。它也是Design Support 庫提供的。它可以監聽所有子控制元件的各種事情,自動幫助我們做出合理的響應。(比如上邊的Snakebar講懸浮按鈕擋住了,使用CoordinatorLaoyout之後懸浮按鈕會自動的上偏移)
在這裡,只需要CoordinatorLaoyout來替換我們的FrameLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_Layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/fab"
android:layout_margin="16dp"
android:layout_gravity="bottom|end"
android:src="@drawable/ic_done"
app:elevation="8dp"/>
</android.support.design.widget.CoordinatorLayout>
...
</android.support.v4.widget.DrawerLayout>
效果如圖