您的位置:首页 > 其它

点击后弧形展开的炫酷菜单--第三方开源-- CircularFloatingActionMenu(一)

2015-12-29 11:02 351 查看




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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: