android 实现自定义卫星菜单

看了hyman老师的视频,听起来有点迷糊,所以就想把实现卫星菜单的实现总结一下。长话短说,下面总结一下:

一、自定义ViewGroup
1)、自定义属性文件

属性的定义:

<attr name="position">
<enum name="left_top" value="0"/>
<enum name="left_bottom" value="1"/>
<enum name="right_top" value="2"/>
<enum name="right_bottom" value="3"/>
<enum name="center_bottom" value="4"/>
</attr>
<attr name="radius" format="dimension"/>

这里需要注意的是:如何将属性文件和自定义的ViewGroup联系起来

通过ArcMenu将其联系起来,而ArcMenu就是我们自定义的ViewGroup

<declare-styleable name="ArcMenu">
<attr name="position"/>
<attr name="radius"/>
</declare-styleable>


2)、在布局文件中使用
这里需要注意的是:注意命名空间的使用
xmlns:hyman="http://schemas.android.com/apk/res/com.example.arcmenu"
这里分为两个部分:
第一个部分是:http://schemas.android.com/apk/res/

 


第二个部分是:com.example.arcmenu(这个可以在AndroidManifest.xml中有自定义的ViewGroup的包名)


3)、在自定义控件中读取

创建自定义ViewGroup

public class ArcMenu extends ViewGroup

{

}

然后可以按照下边的步骤就行相关的操作,实现相应的方法

自定义属性的读取方法:

首先需要获取的自定义的属性

TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ArcMenu, defStyle, 0);

然后获取自定义属性的值

int position = typedArray.getInt(R.styleable.ArcMenu_position, POSITION_RIGHT_BOTTOM);

4)关于自定义控件的布局

这里我主要着重讲一下主菜单在下面中间位置的布局:

首先获得主菜单的长度宽度:

int width = mCButton.getMeasuredWidth();
int height = mCButton.getMeasuredHeight();

要想主菜单放到屏幕的中间位置:

则他的x座标为l = getMeasuredWidth() / 2 - width / 2;

y座标为:t = getMeasuredHeight() - height;

最后布局

mCButton.layout(l, t, l + width, t + height);

 

子菜单的布局位置

t1 = (int) (mRadius * Math.sin(Math.PI / count * (i + 1)));
l1= (int) (mRadius * Math.cos(Math.PI / count * (i + 1)));

最终子菜单的座标

l = getMeasuredWidth() / 2 - width / 2 - l1;
t = getMeasuredHeight() - height - t2;

 

子菜单布局

child.layout(l, t, l + width, t + height);


4)、设置主按钮的旋转动画

这里边的0.5f 表示的是相对与self的座标位置

RotateAnimation anim = new RotateAnimation(start, end, Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
anim.setDuration(duration);
anim.setFillAfter(true);
view.startAnimation(anim);


5)、为menuItem添加平移动画(这里需要注意的是:在设置主菜单关闭与打开状态的时候,注意其修改的位置)

if (mCurrentStatus == Status.IS_CLOSED)
{
tranAnim = new TranslateAnimation(xflag * cl, 0, yflag * ct, 0);
childView.setClickable(true);
childView.setFocusable(true);
}
else
{
tranAnim = new TranslateAnimation(0, xflag * cl, 0, yflag * ct);
childView.setClickable(false);
childView.setFocusable(false);
}

tranAnim.setFillAfter(true);
tranAnim.setDuration(duration);
tranAnim.setStartOffset((i * 100) / count);
tranAnim.setAnimationListener(new AnimationListener()
{

@Override
public void onAnimationStart(Animation animation)
{

}

@Override
public void onAnimationRepeat(Animation animation)
{

}

@Override
public void onAnimationEnd(Animation animation)
{
if (mCurrentStatus == Status.IS_CLOSED)
{
childView.setVisibility(View.GONE);
}

}
});
RotateAnimation rotateAnim = new RotateAnimation(0, 720, Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnim.setDuration(duration);
rotateAnim.setFillAfter(true);

animset.addAnimation(rotateAnim);
animset.addAnimation(tranAnim);
childView.startAnimation(animset);

这里需要注意的是:监听子菜单的动画监听事件,当动画结束的时候,需要修改其主菜单的状态。


6)、实现menuItem的点击动画

这里就是关于叠加动画的添加

首先创建动画集

AnimationSet animationSet = new AnimationSet(true);

其次创建缩小,以及渐变动画

ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 0.0f, 1.0f, 0.0f, Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
AlphaAnimation alphaAnim = new AlphaAnimation(1f, 0.0f);

最后将动画添加到动画集
animationSet.addAnimation(scaleAnim);
animationSet.addAnimation(alphaAnim);

设置时长和状态
animationSet.setDuration(duration);
animationSet.setFillAfter(true);

 

最终效果图如下:

 

 

 

demo下载,请点击此处

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章