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下載,請點擊此處

 

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