点击后弧状展开的炫酷菜单-第三方开源- CircularFloatingActionMenu(一)
点击后弧形展开的炫酷菜单--第三方开源-- CircularFloatingActionMenu(一)
CircularFloatingActionMenu在github上项目主页地址:https://github.com/oguzbilgener/CircularFloatingActionMenu
代码结构图:
测试代码:
package com.zzw.testcircularfloatingactionmenu; import com.oguzdev.circularfloatingactionmenu.library.FloatingActionButton; import com.oguzdev.circularfloatingactionmenu.library.FloatingActionMenu; import com.oguzdev.circularfloatingactionmenu.library.FloatingActionMenu.MenuStateChangeListener; import com.oguzdev.circularfloatingactionmenu.library.SubActionButton; import android.animation.ObjectAnimator; import android.animation.PropertyValuesHolder; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.FrameLayout; import android.widget.ImageView; /** * 一个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 MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); rightLowerButton(); leftCenterButton(); } // 右下角的菜单 private void rightLowerButton() { final ImageView fabIconNew = new ImageView(this); // 设置菜单按钮Button的图标 fabIconNew.setImageResource(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.setImageResource(R.drawable.ic_launcher); rlIcon2.setImageResource(R.drawable.ic_launcher); rlIcon3.setImageResource(R.drawable.ic_launcher); rlIcon4.setImageResource(R.drawable.ic_launcher); 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(); rightLowerMenu.setStateChangeListener(new MenuStateChangeListener() { @Override public void onMenuOpened(FloatingActionMenu menu) { // 逆时针旋转90° fabIconNew.setRotation(0); PropertyValuesHolder pvhR = PropertyValuesHolder.ofFloat( View.ROTATION, -90); ObjectAnimator animation = ObjectAnimator .ofPropertyValuesHolder(fabIconNew, pvhR); animation.start(); } @Override public void onMenuClosed(FloatingActionMenu menu) { // 顺时针旋转90° fabIconNew.setRotation(-90); PropertyValuesHolder pvhR = PropertyValuesHolder.ofFloat( View.ROTATION, 0); ObjectAnimator animation = ObjectAnimator .ofPropertyValuesHolder(fabIconNew, pvhR); animation.start(); } }); } //左边中心位置的菜单 private void leftCenterButton() { 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.setImageResource(R.drawable.star); // 设置菜单按钮Button的宽、高,边距 FloatingActionButton.LayoutParams starParams = new FloatingActionButton.LayoutParams( redActionButtonSize, redActionButtonSize); starParams.setMargins(redActionButtonMargin, redActionButtonMargin, redActionButtonMargin, redActionButtonMargin); fabIconStar.setLayoutParams(starParams); // 设置菜单按钮Button里面图案的宽、高,边距 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(); 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); //设置布局参数 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.setImageResource(R.drawable.ic_launcher); lcIcon2.setImageResource(R.drawable.ic_launcher); lcIcon3.setImageResource(R.drawable.ic_launcher); lcIcon4.setImageResource(R.drawable.ic_launcher); lcIcon5.setImageResource(R.drawable.ic_launcher); //setStartAngle(70).setEndAngle(-70)设置扩展菜单的位置 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(); } }
需要的具体xml见demo