扇形展开的悬浮菜单按钮CircularFloatingActionMenu

最新推荐文章于 2024-08-23 09:20:53 发布
最新推荐文章于 2024-08-23 09:20:53 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： Android第三方开源 文章标签： CircularFloatingActionMenu 悬浮按钮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Snow_Ice_Yang/article/details/100302581
版权

Android CircularFloatingActionMenu在github上项目主页地址：https://github.com/oguzbilgener/CircularFloatingActionMenu

Android CircularFloatingActionMenu要实现的效果如动态图所示：

Java代码：

import android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.app.Activity;
import android.os.Bundle;
//import android.view.Menu;
//import android.view.MenuItem;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
 
import com.oguzdev.circularfloatingactionmenu.library.FloatingActionButton;
import com.oguzdev.circularfloatingactionmenu.library.FloatingActionMenu;
import com.oguzdev.circularfloatingactionmenu.library.SubActionButton;
 
/**
 * 一个FloatingActionButton有一个FloatingActionMenu，FloatingActionMenu添加动画弹出的子菜单。
 * FloatingActionButton的按钮点击事件将触发、弹出FloatingActionMenu中包含的子菜单。
 * FloatingActionMenu使用attachTo方法附着在一个FloatingActionButton上。
 * FloatingActionMenu在attachTo到一个FloatingActionButton后，两者之间发生关联。
 * FloatingActionMenu在添加子菜单时候，首先需要一个SubActionButton.Builder，该SubActionButton.
 * Builder通过setContentView(ImageView
 * image).build()把一个ImageView创建生产一个SubActionButton ,
 * 然后通过FloatingActionMenu.Builder的add方法把前面生成的SubActionButton添加进去。
 * 
 * 
 * 按钮的旋转动画在onMenuOpened和onMenuClosed中做。
 * 
 */
 
public class MenuWithFABActivity extends Activity {
 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
 
		// 添加 右下角的白色+号按钮
		final ImageView fabIconNew = new ImageView(this);
		fabIconNew.setImageDrawable(getResources().getDrawable(R.drawable.ic_action_new_light));
		final FloatingActionButton rightLowerButton = new FloatingActionButton.Builder(this).setContentView(fabIconNew)
				.build();
 
		SubActionButton.Builder rLSubBuilder = new SubActionButton.Builder(this);
 
		ImageView rlIcon1 = new ImageView(this);
		ImageView rlIcon2 = new ImageView(this);
		ImageView rlIcon3 = new ImageView(this);
		ImageView rlIcon4 = new ImageView(this);
		rlIcon1.setImageDrawable(getResources().getDrawable(R.drawable.ic_action_chat_light));
		rlIcon2.setImageDrawable(getResources().getDrawable(R.drawable.ic_action_camera_light));
		rlIcon3.setImageDrawable(getResources().getDrawable(R.drawable.ic_action_video_light));
		rlIcon4.setImageDrawable(getResources().getDrawable(R.drawable.ic_action_place_light));
 
		// Build the menu with default options: light theme, 90 degrees, 72dp
		// radius.
		// Set 4 default SubActionButtons
		// FloatingActionMenu通过attachTo(rightLowerButton)附着到FloatingActionButton
		final FloatingActionMenu rightLowerMenu = new FloatingActionMenu.Builder(this)
				.addSubActionView(rLSubBuilder.setContentView(rlIcon1).build())
				.addSubActionView(rLSubBuilder.setContentView(rlIcon2).build())
				.addSubActionView(rLSubBuilder.setContentView(rlIcon3).build())
				.addSubActionView(rLSubBuilder.setContentView(rlIcon4).build()).attachTo(rightLowerButton).build();
 
		// Listen menu open and close events to animate the button content view
		rightLowerMenu.setStateChangeListener(new FloatingActionMenu.MenuStateChangeListener() {
			@Override
			public void onMenuOpened(FloatingActionMenu menu) {
				// 增加按钮中的+号图标顺时针旋转45度
				// Rotate the icon of rightLowerButton 45 degrees clockwise
				fabIconNew.setRotation(0);
				PropertyValuesHolder pvhR = PropertyValuesHolder.ofFloat(View.ROTATION, 45);
				ObjectAnimator animation = ObjectAnimator.ofPropertyValuesHolder(fabIconNew, pvhR);
				animation.start();
			}
 
			@Override
			public void onMenuClosed(FloatingActionMenu menu) {
				// 增加按钮中的+号图标逆时针旋转45度
				// Rotate the icon of rightLowerButton 45 degrees
				// counter-clockwise
				fabIconNew.setRotation(45);
				PropertyValuesHolder pvhR = PropertyValuesHolder.ofFloat(View.ROTATION, 0);
				ObjectAnimator animation = ObjectAnimator.ofPropertyValuesHolder(fabIconNew, pvhR);
				animation.start();
			}
		});
 
		// 左边中间的红底白色星型按钮
		// Set up the large red button on the center right side
		// With custom button and content sizes and margins
		int redActionButtonSize = getResources().getDimensionPixelSize(R.dimen.red_action_button_size);
		int redActionButtonMargin = getResources().getDimensionPixelOffset(R.dimen.action_button_margin);
		int redActionButtonContentSize = getResources().getDimensionPixelSize(R.dimen.red_action_button_content_size);
		int redActionButtonContentMargin = getResources()
				.getDimensionPixelSize(R.dimen.red_action_button_content_margin);
		int redActionMenuRadius = getResources().getDimensionPixelSize(R.dimen.red_action_menu_radius);
		int blueSubActionButtonSize = getResources().getDimensionPixelSize(R.dimen.blue_sub_action_button_size);
		int blueSubActionButtonContentMargin = getResources()
				.getDimensionPixelSize(R.dimen.blue_sub_action_button_content_margin);
 
		ImageView fabIconStar = new ImageView(this);
		fabIconStar.setImageDrawable(getResources().getDrawable(R.drawable.ic_action_important));
 
		FloatingActionButton.LayoutParams starParams = new FloatingActionButton.LayoutParams(redActionButtonSize,
				redActionButtonSize);
		starParams.setMargins(redActionButtonMargin, redActionButtonMargin, redActionButtonMargin,
				redActionButtonMargin);
		fabIconStar.setLayoutParams(starParams);
 
		FloatingActionButton.LayoutParams fabIconStarParams = new FloatingActionButton.LayoutParams(
				redActionButtonContentSize, redActionButtonContentSize);
		fabIconStarParams.setMargins(redActionButtonContentMargin, redActionButtonContentMargin,
				redActionButtonContentMargin, redActionButtonContentMargin);
 
		final FloatingActionButton leftCenterButton = new FloatingActionButton.Builder(this)
				.setContentView(fabIconStar, fabIconStarParams)
				.setBackgroundDrawable(R.drawable.button_action_red_selector)// 红底白星按钮选中时候状态变化和背景颜色
				.setPosition(FloatingActionButton.POSITION_LEFT_CENTER)// 左边居中
				.setLayoutParams(starParams).build();
 
		// Set up customized SubActionButtons for the right center menu
		SubActionButton.Builder lCSubBuilder = new SubActionButton.Builder(this);
		lCSubBuilder.setBackgroundDrawable(getResources().getDrawable(R.drawable.button_action_blue_selector));
 
		FrameLayout.LayoutParams blueContentParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,
				FrameLayout.LayoutParams.MATCH_PARENT);
		blueContentParams.setMargins(blueSubActionButtonContentMargin, blueSubActionButtonContentMargin,
				blueSubActionButtonContentMargin, blueSubActionButtonContentMargin);
		lCSubBuilder.setLayoutParams(blueContentParams);
		// Set custom layout params
		FrameLayout.LayoutParams blueParams = new FrameLayout.LayoutParams(blueSubActionButtonSize,
				blueSubActionButtonSize);
		lCSubBuilder.setLayoutParams(blueParams);
 
		ImageView lcIcon1 = new ImageView(this);
		ImageView lcIcon2 = new ImageView(this);
		ImageView lcIcon3 = new ImageView(this);
		ImageView lcIcon4 = new ImageView(this);
		ImageView lcIcon5 = new ImageView(this);
 
		lcIcon1.setImageDrawable(getResources().getDrawable(R.drawable.ic_action_camera));
		lcIcon2.setImageDrawable(getResources().getDrawable(R.drawable.ic_action_picture));
		lcIcon3.setImageDrawable(getResources().getDrawable(R.drawable.ic_action_video));
		lcIcon4.setImageDrawable(getResources().getDrawable(R.drawable.ic_action_location_found));
		lcIcon5.setImageDrawable(getResources().getDrawable(R.drawable.ic_action_headphones));
 
		// Build another menu with custom options
		final FloatingActionMenu leftCenterMenu = new FloatingActionMenu.Builder(this)
				.addSubActionView(lCSubBuilder.setContentView(lcIcon1, blueContentParams).build())
				.addSubActionView(lCSubBuilder.setContentView(lcIcon2, blueContentParams).build())
				.addSubActionView(lCSubBuilder.setContentView(lcIcon3, blueContentParams).build())
				.addSubActionView(lCSubBuilder.setContentView(lcIcon4, blueContentParams).build())
				.addSubActionView(lCSubBuilder.setContentView(lcIcon5, blueContentParams).build())
				.setRadius(redActionMenuRadius).setStartAngle(70).setEndAngle(-70).attachTo(leftCenterButton).build();
 
	}
 
	// @Override
	// public boolean onCreateOptionsMenu(Menu menu) {
	// // Inflate the menu; this adds items to the action bar if it is present.
	// getMenuInflater().inflate(R.menu.menu_with_fab, menu);
	// return true;
	// }
	//
	// @Override
	// public boolean onOptionsItemSelected(MenuItem item) {
	// // Handle action bar item clicks here. The action bar will
	// // automatically handle clicks on the Home/Up button, so long
	// // as you specify a parent activity in AndroidManifest.xml.
	// int id = item.getItemId();
	// if (id == R.id.action_settings) {
	// return true;
	// }
	// return super.onOptionsItemSelected(item);
	// }
}

参考链接：

https://blog.csdn.net/zhangphil/article/details/50257149

https://blog.csdn.net/jdh99/article/details/71171814

Snow_Ice_Yang
关注
专栏目录
Android编程 扇形展开的悬浮菜单按钮CircularFloatingActionMenu实例
qq_43667028的博客
02-15 1836
Android编程 扇形展开的悬浮菜单按钮CircularFloatingActionMenu实例
开源项目源码解析-CircularFloatingActionMenu 源码解析
第四维空间的专栏
02-04 5153
CircularFloatingActionMenu 源码解析 本文为 Android 开源项目源码解析 中 circular-foating-action-menu 部分 项目地址：CircularFloatingActionMenu，分析的版本：8efb1aa，Demo 地址：CFAMenu-demo 分析者：cpacm，校对者：dkmeteor、Trinea，校对状态：进行中
Android CircularFloatingActionMenu （1）
Zhang Phil
12-11 6688
Android CircularFloatingActionMenu （1） Android CircularFloatingActionMenu在github上项目主页地址：https://github.com/oguzbilgener/CircularFloatingActionMenu Android CircularFloatingActionMenu要实现的效果如动态图所示：
SpringFloatingActionMenu开源项目教程
最新发布
gitblog_00513的博客
08-23 389
SpringFloatingActionMenu开源项目教程 SpringFloatingActionMenu项目地址:https://gitcode.com/gh_mirrors/spr/SpringFloatingActionMenu 本教程将引导您了解并使用SpringFloatingActionMenu这一开源库。该库提供了类似Google Material Design风格的浮动操作按...
Android CircularFloatingActionMenu：作为系统级按钮悬浮桌面弹出菜单使用（3）
Zhang Phil
12-12 9651
 Android CircularFloatingActionMenu：作为系统级按钮悬浮桌面弹出菜单使用（3） Android CircularFloatingActionMenu另外一个不同寻常的地方是，Android CircularFloatingActionMenu可以写在服务Service里面，然后通过上层一个Activity启动这个服务，然后就可以作为Android系统级悬浮
Android CircularFloatingActionMenu在ScrollView这样的滚动View中使用（2）
Zhang Phil
12-12 1823
 Android CircularFloatingActionMenu在ScrollView这样的滚动View中使用（2） Android CircularFloatingActionMenu在ScrollView这样的滚动View中使用，和附录文章A中使用的方法类似，运行结果如动态图所示： 实现上述结果的Java代码： import android.app.Activit
悬浮的扇形菜单CircularFloatingActionMenu
10-26
在Android应用开发中，CircularFloatingActionMenu（CFAM）允许开发者创建一个中心带有主操作按钮的圆形菜单，当用户点击主按钮时，会以扇形的方式展开一系列子操作按钮。这个设计不仅美观，而且节省空间，使得用户...
CircularFloatingActionMenu实现扇形的悬浮菜单
Android小飞の博客
12-04 1578
github地址：https://github.com/oguzbilgener/CircularFloatingActionMenu 依赖包： dependencies { compile 'com.oguzdev:CircularFloatingActionMenu:1.0.2' } 效果图： 1 -创建一个按钮来附加菜单: // in A
使用的扇形菜单
05-02
这种菜单通常由一个中心触发按钮展开，形成一个以该按钮为圆心的扇形布局，展示多个操作选项。下面我们将深入探讨扇形菜单的设计原理、实现方法以及其在实际应用中的优势。 1. **设计原理** 扇形菜单的设计基于...
Github安卓流行布局开源库
tasty
10-18 881
抽屉菜单 MaterialDrawer ★7337 - 安卓抽屉效果实现方案 Side-Menu.Android ★3865 - 创意边侧菜单 FlowingDrawer ★1744 - 向右滑动流动抽屉效果 SlidingRootNav ★1338 - 仿DrawerLayout的ViewGroup FantasySlide ★1049 - 单手势滑出侧边栏与选择菜单 Floating-Nav...
Android开发动态圆形浮动菜单按钮,CircularFloatingActionMenu
weixin_39533896的博客
05-26 379
An animated, customizable circular floating menu for Android, inspired by Path app.Getting StartedRequirementsAPI >= 15InstallationGrab the AAR from Maven Central by adding it as a dependency in yo...
FloatingActionMenu
01-27
FloatingActionMenu 向上弹出菜单
Android利用WindowManager生成悬浮按钮及悬浮菜单
08-31
主要为大家详细介绍了Android利用WindowManager生成悬浮按钮及悬浮菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android 水波纹效果button_Material Design 之交互效果炸裂的 FloatingActionMenu
weixin_39593427的博客
12-01 251
本文由 码农西哥授权投稿作者博客：https://www.jianshu.com/p/6489d255b0a6自Google推出Material Design设计规范之后，现在越来越多的App设计在参考它，Material Design中的FAB(Floating Action Button) 大家一定已经使用过了，那么，FloatingActionMenu呢？这篇文章就带大家一起来了...
探秘 Circular Floating Action Menu：一个创新的Android交互设计库
gitblog_00097的博客
03-22 446
探秘 Circular Floating Action Menu：一个创新的Android交互设计库 CircularFloatingActionMenuan animated circular menu for Android项目地址:https://gitcode.com/gh_mirrors/ci/CircularFloatingActionMenu 项目简介 在移动应用的世界里，优秀的用...
（4.2.17）圆形菜单CircularFloatingActionMenu
JAVA成长之路
08-10 2351
一个可定制的圆形的浮动菜单控件，类似于Path的圆形菜单。这个控件的可定制性更强，可以很容易的定制菜单出现消失时的动画，起始角度和半径。 https://github.com/oguzbilgener/CircularFloatingActionMenu1、将对应java文件放入工程项目中2、创建菜单控件TextView s_zhu = new TextView(UtilMingXingJianX
CircularFloatingActionMenu
小牧在一直在学习,在前进的道路上大家一起学习，进步。
10-26 726
CircularFloatingActionMenu 能实现扇形的悬浮菜单效果如下图 背景颜色根据自己的需求改变 使用前需要导入库 compile 'com.oguzdev:CircularFloatingActionMenu:1.0.2' 至于需求弹出几个根据自己的需求添加即可。 别的不多说demo自己看吧 下载地址点击打开链接
（安卓特效）FloatingActionsMenu 浮动操作按钮
下午茶的博客
12-18 1840
看效果： 黑色箭头指的地方   点击后弹出三个按钮： 依赖：      compile 'com.getbase:floatingactionbutton:1.9.0' 上布局： <com.getbase.floatingactionbutton.FloatingActionsMenu android:id="@+id/multi
css 实现点击扇形展开效果菜单
05-05
要实现点击扇形展开效果菜单，需要使用CSS中的transform和transition属性。以下是一种实现方式： HTML结构： ```html <div class="menu"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> <div class="item item4"></div> <div class="item item5"></div> <div class="center"></div> </div> ``` CSS样式： ```css .menu { position: relative; width: 200px; height: 200px; } .item { position: absolute; width: 50px; height: 50px; background-color: #ccc; border-radius: 50%; transition: transform 0.5s ease; } .item1 { top: -25px; left: 75px; } .item2 { top: 35px; left: 35px; } .item3 { top: 75px; left: -25px; } .item4 { top: 35px; left: -85px; } .item5 { top: -25px; left: -45px; } .center { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; background-color: #333; border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; } ``` JavaScript代码： ```javascript var menu = document.querySelector('.menu'); var items = document.querySelectorAll('.item'); var center = document.querySelector('.center'); var isOpen = false; center.addEventListener('click', function() { if (isOpen) { // 关闭菜单 menu.classList.remove('open'); items.forEach(function(item, index) { item.style.transform = 'rotate(0deg)'; }); } else { // 打开菜单 menu.classList.add('open'); items.forEach(function(item, index) { item.style.transform = 'rotate(' + (index * 72) + 'deg)'; }); } isOpen = !isOpen; }); ``` 在上面的代码中，我们通过JavaScript监听中心圆的点击事件，并根据菜单是否打开来决定是展开还是收起菜单。当菜单打开时，我们给菜单容器添加open类名，并将每个菜单项按照一定角度旋转，从而形成扇形展开效果。当菜单关闭时，我们将open类名移除，并将每个菜单项旋转回初始状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值