懶惰是人之本性玻粪，而我隅津，過年后已經(jīng)變成了一條廢魚，所以決定要寫點什么東西劲室，那么寫什么呢伦仍？突然想起之前有個彈出菜單的效果挺好的，所以我就寫了這么一個控件很洋！來看下效果唄
- 動畫效果包括四個方向垂直彈出和斜邊彈出充蓝，周圍彈出
- 支持動態(tài)更改數(shù)量和自定義動畫效果
好吧，下面我們直接進入進入擼代碼的環(huán)節(jié)喉磁！
- 繼承一個ViewGroup谓苟，獲取到子View和顯示隱藏的按鈕
- 計算子View的寬高并初始化位置
- 聲明啟動點擊動畫效果，并支持動畫的擴展
我們新建一個類繼承自FrameLayout协怒，由于FrameLayout的特點是后來的在上面涝焙，所以我們的MenuView就是FrameLayout里面的最后一個子View。
<pre>
public class PopMenu extends FrameLayout {
private ArrayList<View> views = new ArrayList<>();
private View menuView;//顯示隱藏按鈕
private int measureHeight;//menuView的寬高
public PopMenu(Context context, AttributeSet attrs) {
super(context, attrs);
}
}
</pre>
那么我們要測量子View的寬高和放置位置
<pre>
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
for (int i = 0; i < getChildCount(); i++) {
measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
}
if (menuView != null) {
measureHeight = menuView.getMeasuredHeight();
}
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
initView();
for (int i = 0; i < views.size(); i++) {
View itemView = views.get(i);
itemView.layout(
menuView.getLeft() + (menuView.getMeasuredWidth() - itemView.getMeasuredWidth()) / 2,
menuView.getTop() + (menuView.getMeasuredHeight() - itemView.getMeasuredHeight()) / 2,
menuView.getLeft() + (menuView.getMeasuredWidth() + itemView.getMeasuredWidth()) / 2,
menuView.getTop() + (menuView.getMeasuredHeight() + itemView.getMeasuredHeight()) / 2
);
/**
* 在這里添加View動畫配置
*/
}
}
//初始化參數(shù)變量
public void initView() {
if (getChildCount() < 1) return;
views.clear();
for (int i = 0; i < getChildCount() - 1; i++) {
views.add(getChildAt(i));
getChildAt(i).setAlpha(0);
}
menuView = getChildAt(getChildCount() - 1);
menuView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
startAnim();
}
});
}
</pre>
由于我們點擊到MenuView后孕暇，菜單對象會播放動畫仑撞，我們需要給MenuView添加點擊效果監(jiān)聽
<pre>
menuView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
startAnim();
}
});
/**
* 開始動畫
*/
public void startAnim() {
if (popAnimator.isShow) {
popAnimator.doAnimIn();
showShade();
popAnimator.isShow = false;
} else {
popAnimator.doAnimOut();
showShade();
popAnimator.isShow = true;
}
}
</pre>
我們獲取到子View對象后，就可以對他們進行動畫的處理了妖滔，那么播放動畫需要什么參數(shù)呢隧哮？我們聲明一個Config類來保存動畫的相關(guān)參數(shù)，另外聲明一個父類保存動畫座舍，之后如果有新的動畫效果沮翔，可以直接繼承父類，再注入簸州。
<pre>
我們寫父類的時候鉴竭，需要對里面的數(shù)據(jù)進行初始化和配置更新處理歧譬，另外需要給外部提供動畫的顯示和隱藏效果岸浑！
public class PopAnimator {
public int measureHeight = 0;//菜單按鈕高度
public ArrayList<View> views = new ArrayList<>();//彈出按鈕列表
public boolean isShow = false;//當前顯示狀態(tài)
public long duration = 400;
public int alpha = 1;
public int radius = 20;
public void loadConfig(AnimatorConfigBuild config) {
measureHeight = config.getMeasureHeight();
views = config.getViews();
isShow = config.isShow();
duration = config.getDuration();
alpha = config.getAlpha();
radius = config.getRadius();
}
public AnimatorConfigBuild saveConfig() {
return new AnimatorConfigBuild().setAlpha(alpha)
.setDuration(duration)
.setMeasureHeight(measureHeight)
.setRadius(radius)
.setShow(isShow)
.setViews(views);
}
/**
* 重寫動畫效果
*/
public void doAnimOut() {
if (views.isEmpty()) return;
int start = 0;
int degree = 360 / views.size();
for (int i = 0; i < views.size(); i++) {
View view = views.get(i);
view.animate()
.setDuration(duration)
.translationY((float) ((radius + measureHeight) * Math.sin(Math.toRadians(start + degree * i))))
.translationX((float) ((radius + measureHeight) * Math.cos(Math.toRadians(start + degree * i))))
.rotation(360)
.alphaBy(0)
.alpha(alpha);
}
}
public void doAnimIn() {
for (int i = 0; i < views.size(); i++) {
View view = views.get(i);
view.animate()
.setDuration(duration)
.translationY(0)
.translationX(0)
.rotation(0)
.alpha(0);
}
}
}
</pre>
<pre>
//通過鏈式聲明的方式來寫動畫配置類
public class AnimatorConfigBuild {
public int measureHeight = 0;//菜單按鈕高度
public ArrayList<View> views = new ArrayList<>();//彈出按鈕列表
public boolean isShow = false;//當前顯示狀態(tài)
public long duration = 400;
public int alpha = 1;
public int radius = 20;
/**
- 配置動畫效果
*/
public AnimatorConfigBuild build(PopAnimator animator) {
if (animator == null) {
animator = new PopAnimator();
}
animator.loadConfig(this);
return this;
}
}
</pre>
我們把配置類寫好之后搏存，回到PopMenu類，在onlayout里面把動畫對象實例化并賦予內(nèi)容參數(shù)
<pre> /**
* 初始化內(nèi)容參數(shù)
*/
new AnimatorConfigBuild()
.setMeasureHeight(measureHeight)
.setViews(views).build(popAnimator);</pre>
那么我們的簡單的自定義彈出菜單就完成了矢洲！有很多地方都還需要改進
下面我們就實現(xiàn)擴展的動畫類,由于動畫隱藏的效果都是回到最初的位置璧眠，所以我們主要還是實現(xiàn)View彈出效果，就可以了
<pre>
public class PopUpAnim extends PopAnimator {
private int padding = 8;
private int type;//左上右下
int distance;
public void doAnimOut() {
if (views.isEmpty()) return;
for (int i = 0; i < views.size(); i++) {
View view = views.get(i);
if (i == 0) {
distance = measureHeight / 2 - view.getMeasuredHeight() / 2;
}
distance = distance + view.getMeasuredHeight() + padding;
view.animate()
.setDuration(duration)
.translationY(getDirection() ? 0 : getDistance())
.translationX(getDirection() ? getDistance() : 0)
.rotation(360)
.alphaBy(0)
.alpha(alpha);
}
}
/**
* 計算距離
*
* @return
*/
public int getDistance() {
return type > 1 ? distance : -distance;
}
/**
* 獲取方向
*
* @return
*/
public boolean getDirection() {
//返回橫向為true
return type % 2 == 0;
}
public PopUpAnim setType(int type) {
type %= 4;
this.type = type;
return this;
}
public void setPadding(int padding) {
this.padding = padding;
}
}
</pre>
接下來读虏，我們把它放到Activity里面就可以看到效果了,xml布局里面添加幾個按鈕和PopMenu控件
<pre>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/btnChange"
android:onClick="onBtnChange"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="換一個效果"
android:layout_alignParentBottom="true"
/>
<Button
android:id="@+id/btnAdd"
android:onClick="onBtnAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="添加"
android:layout_alignParentBottom="true"
/>
<Button
android:id="@+id/btnMul"
android:onClick="onBtnMul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="減少"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>
<com.marco.floatpopbutton.widget.PopMenu
android:id="@+id/menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/btnChange"
>
<Button
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@mipmap/ic_launcher"
/>
<Button
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@mipmap/ic_launcher"/>
<Button
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@mipmap/ic_launcher"/>
<Button
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:background="@android:color/holo_purple"
/>
</com.marco.floatpopbutton.widget.PopMenu>
</RelativeLayout>
</pre>
然后在Activity添加邏輯代碼
<pre>
public class MainActivity extends AppCompatActivity {
PopMenu menu;
ArrayList<PopAnimator> animators = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
menu = (PopMenu) findViewById(R.id.menu);
animators.add(new PopUpAnim().setType(0));
animators.add(new PopCircleAnim());
animators.add(new PopUpAnim().setType(1));
animators.add(new PopLeftTopAnim());
animators.add(new PopUpAnim().setType(2));
animators.add(new PopCircleAnim());
animators.add(new PopUpAnim().setType(3));
animators.add(new PopLeftTopAnim());
}
/**
* 切換效果
*
* @param view
*/
int index = 0;
public void onBtnChange(View view) {
index = (++index) % animators.size();
menu.setPopAnimator(animators.get(index));
}
Handler handler = new Handler();
public void onBtnAdd(View view) {
Button button = new Button(this);
button.setLayoutParams(new FrameLayout.LayoutParams(60, 60));
button.setBackgroundResource(R.mipmap.ic_launcher);
menu.addView(button, 0);
handler.postDelayed(new Runnable() {
@Override
public void run() {
menu.startAnim();
}
}, 100);
}
public void onBtnMul(View view) {
if (menu.getChildCount() > 1) {
menu.removeViewAt(0);
handler.postDelayed(new Runnable() {
@Override
public void run() {
menu.startAnim();
}
}, 100);
}
}
}
</pre>
代碼地址：https://github.com/Mark911105/PopAnimButton责静，歡迎大家Fork and Star ！
