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});}@Overrideprotected 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);}@Overrideprotected 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() {@Overridepublic 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() {@Overridepublic 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