FloatingActionButton 是Material庫中提供的一個控制元件，可以實作懸浮按鈕的效果，
- 在build.gradle添加Material庫的依賴
//Material庫
implementation 'com.google.android.material:material:1.1.0'
- 修改activity_main.xml
<?xml version="1.0" encoding="utf-8"?><!--drawerlayout 實作滑動選單-->
<androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- 此布局允許放入兩個控制元件 第一個控制元件 主螢屏中顯示的內容 -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar xmlns:app="http //schemas android com/apk/res-auto"
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/purple_200"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:navigationIcon="@drawable/navi"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"></androidx.appcompat.widget.Toolbar>
<!--個懸浮按鈕-->
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/setting_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:borderWidth="0dp"
android:backgroundTint="@color/skyBlue"
android:src="@drawable/notebook"
app:rippleColor="@color/LightSlateBlue"></com.google.android.material.floatingactionbutton.FloatingActionButton>
<!--
end 如果系統語言是從右往左，那么end就表示左邊；
如果系統語言是從左往右的，那么end就表示右邊.
android:src：FloatingActionButton中顯示的圖示
app:backgroundTint：正常的背景顏色
app:rippleColor：按下時的背景顏色
app:elevation：正常的陰影大小
不設定 app:borderWidth="0dp" 會出現一圈默認顏色的邊框
-->
</FrameLayout>
<!-- 第二個控制元件 滑動選單中顯示的內容（任意控制元件）-->
<com.google.android.material.navigation.NavigationView
android:id="@+id/navView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu"></com.google.android.material.navigation.NavigationView>
<!--通過app:menu和app:headerLayout屬性將剛剛準備的menu和headerLayout設定進去-->
<!--
android:layout_gravity="start"
告訴滑動選單在左在右
start 屬性自動判斷
英語、漢語，滑動選單在左邊-->
<!--
?attr/actionBarSize => @dimen/mtrl_toolbar_default_height => 56dp
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
使toolbar單獨使用深色主題(因為淺色主題的toolbar文字是黑色的，不好看)
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
使toolbar的彈出選單使用淺色主題
-->
</androidx.drawerlayout.widget.DrawerLayout>
- 修改MainActivity.java
private FloatingActionButton setting_btn;
//系結 FloatingActionButton控制元件
setting_btn = findViewById(R.id.setting_btn);
//監聽 FloatingActionButton控制元件
setting_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplication(),"你點擊了懸浮按鈕",Toast.LENGTH_SHORT).show();
}
});
- 優化MainActivity.java
使用Snackbar替換掉Toast
Toast的作用是告訴用戶現在發生了什么事情，用戶無法互動；
Snackbar允許在提示中增加一個可互動按鈕，當用戶點擊時則在這方面進行一些擴展，
// 監聽 FloatingActionButton控制元件
setting_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//make方法：view 只要是當前界面布局的任意一個view就可以，Snackbar會使用這個view來自動查找最外層的布局
//make方法：第二個引數 Snackbar中顯示的內容
//make方法：第三個引數 Snackbar顯示的時長
//make方法：setAction方法 設定一個動作
Snackbar.make(v,"你點擊了懸浮按鈕",Snackbar.LENGTH_SHORT)
.setAction("后悔啦不點啦", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplication(),"我假裝不知道你點過按鈕了",Toast.LENGTH_SHORT).show();
}
}).show();
// Toast.makeText(getApplication(),"你點擊了懸浮按鈕",Toast.LENGTH_SHORT).show();
}
});
- 解決Snackbar遮擋懸浮按鈕問題
CoordinatorLayout可以說是一個增強版的FrameLayout，也是由Material庫所提供的，可以監聽所有子空間的各種事件，自動幫助我們做出最為合理的回應，
在activity_main.xml中替換FrameLayout布局為CoordinatorLayout，
<?xml version="1.0" encoding="utf-8"?><!--drawerlayout 實作滑動選單-->
<androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- 此布局允許放入兩個控制元件 第一個控制元件 主螢屏中顯示的內容 -->
<com.google.android.material.circularreveal.coordinatorlayout.CircularRevealCoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar xmlns:app="http //schemas android com/apk/res-auto"
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/purple_200"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:navigationIcon="@drawable/navi"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"></androidx.appcompat.widget.Toolbar>
<!--個懸浮按鈕-->
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/setting_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:borderWidth="0dp"
android:backgroundTint="@color/skyBlue"
android:src="@drawable/notebook"
app:rippleColor="@color/LightSlateBlue"></com.google.android.material.floatingactionbutton.FloatingActionButton>
<!--
end 如果系統語言是從右往左，那么end就表示左邊；
如果系統語言是從左往右的，那么end就表示右邊.
android:src：FloatingActionButton中顯示的圖示
app:backgroundTint：正常的背景顏色
app:rippleColor：按下時的背景顏色
app:elevation：正常的陰影大小
不設定 app:borderWidth="0dp" 會出現一圈默認顏色的邊框
-->
</com.google.android.material.circularreveal.coordinatorlayout.CircularRevealCoordinatorLayout>
<!-- 第二個控制元件 滑動選單中顯示的內容（任意控制元件）-->
<com.google.android.material.navigation.NavigationView
android:id="@+id/navView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu"></com.google.android.material.navigation.NavigationView>
<!--通過app:menu和app:headerLayout屬性將剛剛準備的menu和headerLayout設定進去-->
<!--
android:layout_gravity="start"
告訴滑動選單在左在右
start 屬性自動判斷
英語、漢語，滑動選單在左邊-->
<!--
?attr/actionBarSize => @dimen/mtrl_toolbar_default_height => 56dp
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
使toolbar單獨使用深色主題(因為淺色主題的toolbar文字是黑色的，不好看)
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
使toolbar的彈出選單使用淺色主題
-->
</androidx.drawerlayout.widget.DrawerLayout>
- 運行效果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/306012.html
標籤：其他