Android Path Button效果实现

一、先看下效果图



二、实现步骤

1.  编写布局文件

<?xml version="1.0" encoding="utf-8"?>
<!-- 使用merge进行布局优化 -->
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<!-- 文字 -->

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Path Button" />
</LinearLayout>

<!-- 红色按钮和弹出收回按钮放到一起 -->

<RelativeLayout
android:id="@+id/composer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:clipChildren="false"
android:clipToPadding="false" >

<loveworld.view.InOutRelativeLayout
android:id="@+id/buttons_wrapper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:clipChildren="false"
android:clipToPadding="false" >

<!-- 拍照 -->
<loveworld.view.InOutImageButton
android:id="@+id/button_photo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="213.0px"
android:layout_marginLeft="16.0px"
android:background="@drawable/composer_camera"
android:visibility="gone" />

<!-- 人物 -->
<loveworld.view.InOutImageButton
android:id="@+id/button_people"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="203.0px"
android:layout_marginLeft="78.0px"
android:background="@drawable/composer_with"
android:visibility="gone" />

<!-- 位置 -->
<loveworld.view.InOutImageButton
android:id="@+id/button_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="175.0px"
android:layout_marginLeft="134.0px"
android:background="@drawable/composer_place"
android:visibility="gone" />

<!-- 音乐 -->
<loveworld.view.InOutImageButton
android:id="@+id/button_music"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="131.0px"
android:layout_marginLeft="178.0px"
android:background="@drawable/composer_music"
android:visibility="gone" />

<!-- 消息 -->
<loveworld.view.InOutImageButton
android:id="@+id/button_thought"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="75.0px"
android:layout_marginLeft="206.0px"
android:background="@drawable/composer_thought"
android:visibility="gone" />

<!-- 睡眠 -->
<loveworld.view.InOutImageButton
android:id="@+id/button_sleep"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="13.0px"
android:layout_marginLeft="216.0px"
android:background="@drawable/composer_sleep"
android:visibility="gone" />
</loveworld.view.InOutRelativeLayout>

<!-- 红色按钮 -->
<loveworld.view.InOutRelativeLayout
android:id="@+id/button_control_show_hide"
android:layout_width="90.0px"
android:layout_height="86.0px"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:background="@drawable/composer_button_center">

<!-- 十字按钮 -->
<ImageView
android:id="@+id/button_control_show_hide_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="32.0px"
android:layout_marginTop="29.0px"
android:src="@drawable/composer_icn_plus"/>
</loveworld.view.InOutRelativeLayout>

</RelativeLayout>

</merge>

如果图片未隐藏，来看下效果图



2. 编写点击红色按钮，弹出和收回动画

/**
*	弹出收回按钮移动轨迹动画集合
*/
public class PopupButtonAnimationSet extends AbstractInOutAnimationSet {

private static final int mXOffset = 16;
private static final int mYOffset = 243;

public PopupButtonAnimationSet(Direction directioin, long duration,
View subject) {
super(directioin, duration, new View[]{ subject});
}

@Override
protected void addInAnimation(View[] views) {
ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) views[0].getLayoutParams();
// 计算每个弹出收回按钮的移动轨迹
float x = -layoutParams.leftMargin + mXOffset;
float y = layoutParams.bottomMargin + mYOffset;

// 移动位置动画
TranslateAnimation translateAnimation = new TranslateAnimation(x, 0.0f, y, 0.0f);
addAnimation(translateAnimation);
}

@Override
protected void addOutAnimation(View[] views) {
ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) views[0].getLayoutParams();
float x = -layoutParams.leftMargin + mXOffset;
float y = layoutParams.bottomMargin + mYOffset;
TranslateAnimation animation = new TranslateAnimation(0.0F, x, 0.0F, y);
addAnimation(animation);
}

}

看下效果



三、编写红色按钮中白色十字选中效果

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// 红色按钮
mControlButton = findViewById(R.id.button_control_show_hide);
mControlButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
toggleButton();
}
});

// 红色按钮中心，白色十字
mButtonControlIcon = findViewById(R.id.button_control_show_hide_icon);
mRotateInAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_story_add_button_in);
mRotateOutAniamtion = AnimationUtils.loadAnimation(this, R.anim.rotate_story_add_button_out);
}

/**
* 弹出收回开关
*/
private void toggleButton() {
if (mAreButtonsShowins) {
AnimationControlUtils.startAnimations(mButtonsWrapper, Direction.OUT);
// 红色按钮内白色十字旋转
mButtonControlIcon.startAnimation(mRotateOutAniamtion);
} else {
AnimationControlUtils.startAnimations(mButtonsWrapper, Direction.IN);
mButtonControlIcon.startAnimation(mRotateInAnimation);
}

mAreButtonsShowins = !mAreButtonsShowins;
}

两个布局文件

<?xml version="1.0" encoding="UTF-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:duration="150"
android:fromDegrees="0.0"
android:toDegrees="-225.0"
android:pivotX="50.0%"
android:pivotY="50.0%"
android:fillAfter="true"
android:fillEnabled="true" />

<?xml version="1.0" encoding="UTF-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:duration="150"
android:fromDegrees="-225.0"
android:toDegrees="0.0"
android:pivotX="50.0%"
android:pivotY="50.0%"
android:fillAfter="true"
android:fillEnabled="true" />

四、编写点击黑色按钮效果

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// 所有弹出收回按钮视图集合
mButtonsWrapper = (InOutRelativeLayout) findViewById(R.id.buttons_wrapper);

// 所有弹出收回按钮视图集合
mButtonsWrapper = (InOutRelativeLayout) findViewById(R.id.buttons_wrapper);

// 设置每个弹出收回按钮的点击事件，点击后放大并隐藏
for (int i = 0, count = mButtonsWrapper.getChildCount(); i < count; i++) {
if (mButtonsWrapper.getChildAt(i) instanceof InOutImageButton) {
View view = mButtonsWrapper.getChildAt(i);
view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View subject) {
startButtonClickAnimations(subject);
}
});
}
}
}

/**
* 弹出收回按钮点击后动画
*
* @param view
*/
private void startButtonClickAnimations(View subject) {
mAreButtonsShowins = false;

// 红色按钮动画
AnimationSet shrinkAnimationSet = new NotClickAnimationSet(600);
shrinkAnimationSet.setInterpolator(new AnticipateInterpolator(2.0F));
shrinkAnimationSet.setAnimationListener(new CustomAnimationListener());
mControlButton.startAnimation(shrinkAnimationSet);

// 为每一个按钮都设置动画
for (int i = 0, count = mButtonsWrapper.getChildCount(); i < count; i++) {
if (mButtonsWrapper.getChildAt(i) instanceof InOutImageButton) {
View view = mButtonsWrapper.getChildAt(i);
if (view.getId() == subject.getId()) {
// 点击按钮放大并消失
view.startAnimation(new ClickAnimationSet(600));
} else {
// 未点击按钮缩小并消失
view.startAnimation(new NotClickAnimationSet(600));
}
}
}
}

五、跳转回来，重新显示按钮

@Override
protected void onResume() {
super.onResume();
reshowButton();
}

/**
* 跳转回来重置
*/
private void reshowButton() {

// 尺寸，透明度渐变
ResetAnimationSet resetAnimationSet = new ResetAnimationSet(300);
resetAnimationSet.setInterpolator(new OvershootInterpolator(2.0F));
mControlButton.startAnimation(resetAnimationSet);

mButtonControlIcon.startAnimation(mRotateOutAniamtion);
}

三、点击下载源码

四、本篇文章是学习PathButton实现例子，学习的是大牛写的PathButton实现：https://mobility.googlecode.com/svn/trunk/jxtras/ExpandableMenuDemo

待参考资料：

https://code.google.com/p/android-path-like-button/

https://github.com/siyamed/android-satellite-menu

原文地址：http://blog.csdn.net/love_world_/article/details/8714769