瘋狂 Android 講義, 4/e – 可折疊懸浮按鈕(FloatingActionButton)範例 P107~P103

資料來源:

    https://github.com/daichangya/book/tree/master/android
    https://pan.baidu.com/s/1d_xYJI0UQ_1tQzSj_V_NIg 提取码:70ch

XML Code

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
	tools:context=".MainActivity">
	<!-- 嵌套一个约束布局来管理两个悬浮按钮 -->
	<android.support.constraint.ConstraintLayout 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/content"
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:background="#80000000"
		android:visibility="gone">
		<!-- 下面省略了2个使用LinearLayout管理的悬浮按钮 -->
		<LinearLayout
			android:id="@+id/item1"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:layout_marginEnd="28dp"
			android:layout_marginBottom="86dp"
			android:orientation="horizontal"
			app:layout_constraintBottom_toBottomOf="parent"
			app:layout_constraintEnd_toEndOf="parent">
			<TextView
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_gravity="center_vertical"
				android:layout_weight="1"
				android:gravity="end"
				android:text="购物车"
				android:textColor="@android:color/white"
				android:textSize="15sp" />
			<android.support.design.widget.FloatingActionButton
				android:id="@+id/mini_fab01"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:src="@drawable/list"
				app:backgroundTint="#ff00ff"
				app:elevation="5dp"
				app:fabSize="mini" />
		</LinearLayout>
		<LinearLayout
			android:id="@+id/item2"
			android:layout_width="0dp"
			android:layout_height="wrap_content"
			android:layout_marginBottom="12dp"
			android:orientation="horizontal"
			app:layout_constraintBottom_toTopOf="@+id/item1"
			app:layout_constraintEnd_toEndOf="@+id/item1"
			app:layout_constraintStart_toStartOf="@+id/item1">
			<TextView
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_gravity="center_vertical"
				android:layout_weight="1"
				android:gravity="end"
				android:text="继续购买"
				android:textColor="@android:color/white"
				android:textSize="15sp" />
			<android.support.design.widget.FloatingActionButton
				android:id="@+id/mini_fab02"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:src="@drawable/list"
				app:backgroundTint="#ffff00"
				app:elevation="5dp"
				app:fabSize="mini" />
		</LinearLayout>
	</android.support.constraint.ConstraintLayout>
	<!-- 使用约束布局将该按钮定位到界面右下角 -->
	<android.support.design.widget.FloatingActionButton
		android:id="@+id/fab"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_marginEnd="20dp"
		android:layout_marginBottom="20dp"
		android:clickable="true"
		android:src="@drawable/add"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		app:fabSize="normal"
		app:elevation="5dp"
		app:backgroundTint="#31bfcf"
		app:rippleColor="#e7d161"/>
</android.support.constraint.ConstraintLayout>

Java Code

package org.crazyit.ui;

import android.app.Activity;
import android.os.Bundle;
import android.support.constraint.ConstraintLayout;
import android.support.design.widget.FloatingActionButton;
import android.view.View;

/**
 * Description:<br>
 * 网站: <a href="http://www.crazyit.org">疯狂Java联盟</a><br>
 * Copyright (C), 2001-2020, Yeeku.H.Lee<br>
 * This program is protected by copyright laws.<br>
 * Program Name:<br>
 * Date:<br>
 *
 * @author Yeeku.H.Lee kongyeeku@163.com<br>
 * @version 1.0
 */
public class MainActivity extends Activity
{
	private boolean isShow = false;
	private ConstraintLayout content;
	private FloatingActionButton fab;
	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		fab = findViewById(R.id.fab);
		content = findViewById(R.id.content);
		// 定义事件监听器
		View.OnClickListener listener = view -> {
			switch (view.getId()) {
				// 如果是fab悬浮按钮被点击，切换两个小的悬浮按钮的显示状态
				case R.id.fab:
					isShow = !isShow;
					content.setVisibility(isShow ? View.VISIBLE : View.GONE);
					break;
				// 如果是被展开的悬浮按钮，折叠两个小的悬浮按钮
				case R.id.mini_fab01: case R.id.mini_fab02:
					content.setVisibility(View.GONE);
					isShow = false;
					break;
			}
		};
		// 为悬浮按钮绑定事件处理监听器
		fab.setOnClickListener(listener);
	}
}