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);

 

最終如下：

android 實現自訂衛星菜單