Android實(shí)現(xiàn)爆炸式菜單按鈕彈出效果
最近項(xiàng)目要使用到點(diǎn)擊一個(gè)按鈕彈出多個(gè)按鈕的效果,在試了幾個(gè)類庫后感覺不是很理想,所以自己代碼實(shí)現(xiàn)了一個(gè),下圖所示:

實(shí)現(xiàn)原理很簡(jiǎn)單,就是利用android原聲動(dòng)畫效果,當(dāng)點(diǎn)擊中心按鈕時(shí)彈出其余按鈕。閑話少敘,代碼如下。
第一步:activity_main.xml 很簡(jiǎn)單,也就是五個(gè)相同位置的按鈕
<?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" > <ImageButton android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_margin="10dp" android:src="@drawable/im" android:background="@android:color/transparent"/> <ImageButton android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_margin="10dp" android:visibility="invisible" android:src="@drawable/i" android:background="@android:color/transparent"/> <ImageButton android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_margin="10dp" android:src="@drawable/ii" android:visibility="invisible" android:background="@android:color/transparent"/> <ImageButton android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_margin="10dp" android:src="@drawable/iii" android:visibility="invisible" android:background="@android:color/transparent"/> <ImageButton android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_margin="10dp" android:src="@drawable/iiii" android:visibility="invisible" android:background="@android:color/transparent" /> </RelativeLayout>
第二步:MainActivity
package com.example.boombuttons;
import java.util.ArrayList;
public class MainActivity extends Activity implements OnClickListener{
// 中心按鈕
private ImageButton button;
// 四個(gè)子按鈕
private ImageButton button1;
private ImageButton button2;
private ImageButton button3;
private ImageButton button4;
// 子按鈕列表
private List<ImageButton> buttonItems = new ArrayList<ImageButton>(3);
// 標(biāo)識(shí)當(dāng)前按鈕彈出與否,1代表已經(jīng)未彈出,-1代表已彈出
private int flag = 1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 實(shí)例化按鈕并設(shè)立監(jiān)聽
button = (ImageButton)findViewById(R.id.button);
button.setOnClickListener(this);
button1 = (ImageButton)findViewById(R.id.button1);
button2 = (ImageButton)findViewById(R.id.button2);
button3 = (ImageButton)findViewById(R.id.button3);
button4 = (ImageButton)findViewById(R.id.button4);
// 將子按鈕們加入列表中
buttonItems.add(button1);
buttonItems.add(button2);
buttonItems.add(button3);
buttonItems.add(button4);
}
/**
* 按鈕移動(dòng)動(dòng)畫
* @params 子按鈕列表
* @params 彈出時(shí)圓形半徑radius
*/
public void buttonAnimation(List<ImageButton> buttonList,int radius){
for(int i=0;i<buttonList.size();i++){
ObjectAnimator objAnimatorX;
ObjectAnimator objAnimatorY;
ObjectAnimator objAnimatorRotate;
// 將按鈕設(shè)為可見
buttonList.get(i).setVisibility(View.VISIBLE);
// 按鈕在X、Y方向的移動(dòng)距離
float distanceX = (float) (flag*radius*(Math.cos(Util.getAngle(buttonList.size(),i))));
float distanceY = -(float) (flag*radius*(Math.sin(Util.getAngle(buttonList.size(),i))));
// X方向移動(dòng)
objAnimatorX = ObjectAnimator.ofFloat(buttonList.get(i), "x", buttonList.get(i).getX(),buttonList.get(i).getX()+distanceX);
objAnimatorX.setDuration(200);
objAnimatorX.setStartDelay(100);
objAnimatorX.start();
// Y方向移動(dòng)
objAnimatorY = ObjectAnimator.ofFloat(buttonList.get(i), "y", buttonList.get(i).getY(),buttonList.get(i).getY()+distanceY);
objAnimatorY.setDuration(200);
objAnimatorY.setStartDelay(100);
objAnimatorY.start();
// 按鈕旋轉(zhuǎn)
objAnimatorRotate = ObjectAnimator.ofFloat(buttonList.get(i), "rotation", 0, 360);
objAnimatorRotate.setDuration(200);
objAnimatorY.setStartDelay(100);
objAnimatorRotate.start();
if(flag==-1){
objAnimatorX.addListener(new AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationRepeat(Animator animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animator animation) {
// TODO Auto-generated method stub
// 將按鈕設(shè)為可見
for (int i = 0; i < buttonItems.size(); i++) {
buttonItems.get(i).setVisibility(View.INVISIBLE);
}
}
@Override
public void onAnimationCancel(Animator animation) {
// TODO Auto-generated method stub
}
});
}
}
}
}
第三步:Util.java 工具類,寫了一個(gè)靜態(tài)方法,用于通過按鈕個(gè)數(shù)和按鈕在列表中的索引計(jì)算其彈出角度。
public class Util {
/**
* 返回每個(gè)按鈕應(yīng)該出現(xiàn)的角度(弧度單位)
* @param index
* @return double 角度(弧度單位)
*/
public static double getAngle(int total,int index){
return Math.toRadians(90/(total-1)*index+90);
}
}
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android左右滑出菜單實(shí)例分析
- android底部菜單欄實(shí)現(xiàn)原理與代碼
- android popwindow實(shí)現(xiàn)左側(cè)彈出菜單層及PopupWindow主要方法介紹
- 基于Android實(shí)現(xiàn)點(diǎn)擊某個(gè)按鈕讓菜單選項(xiàng)從按鈕周圍指定位置彈出
- Android ListView長按彈出菜單二種實(shí)現(xiàn)方式示例
- Android界面設(shè)計(jì)(APP設(shè)計(jì)趨勢(shì) 左側(cè)隱藏菜單右邊顯示content)
- Android開發(fā)技巧之我的菜單我做主(自定義菜單)
- Android仿QQ空間底部菜單示例代碼
- Android實(shí)現(xiàn)原生側(cè)滑菜單的超簡(jiǎn)單方式
- Android之用PopupWindow實(shí)現(xiàn)彈出菜單的方法詳解
相關(guān)文章
Android 8.0 讀取內(nèi)部和外部存儲(chǔ)以及外置SDcard的方法
今天小編就為大家分享一篇Android 8.0 讀取內(nèi)部和外部存儲(chǔ)以及外置SDcard的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
利用Jetpack Compose繪制可愛的天氣動(dòng)畫
Jetpack Compose是用于構(gòu)建原生Android UI的現(xiàn)代工具包。Jetpack Compose使用更少的代碼,強(qiáng)大的工具和直觀的Kotlin API,簡(jiǎn)化并加速了Android上的UI開發(fā)。本文將利用Jetpack Compose繪制可愛的天氣動(dòng)畫,感興趣的可以了解一下2022-01-01
ViewPager實(shí)現(xiàn)漂亮的引導(dǎo)頁
這篇文章主要為大家詳細(xì)介紹了ViewPager實(shí)現(xiàn)漂亮的引導(dǎo)頁,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08
ViewPager+Fragment實(shí)現(xiàn)側(cè)滑導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了ViewPager+Fragment實(shí)現(xiàn)側(cè)滑導(dǎo)航欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05
Android?Flutter實(shí)現(xiàn)"斑馬紋"背景的示例代碼
本文將通過實(shí)現(xiàn)一個(gè)canvas繪制斑馬紋類。使用Stack布局,將斑馬紋放在下方作為背景板,需要展示的內(nèi)容在上方。從而實(shí)現(xiàn)?“斑馬紋”背景,感興趣的可以了解一下2022-06-06
Android升級(jí)gradle 后引入aar包報(bào)錯(cuò)解決
這篇文章主要為大家介紹了Android升級(jí)gradle 后引入aar包報(bào)錯(cuò)解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04
Android 根據(jù)EditText搜索框ListView動(dòng)態(tài)顯示數(shù)據(jù)
這篇文章主要介紹了Android 根據(jù)EditText搜索框ListView動(dòng)態(tài)顯示數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2016-09-09
Android實(shí)現(xiàn)滾動(dòng)刻度尺效果
本篇文章主要介紹了Android實(shí)現(xiàn)滾動(dòng)刻度尺效果,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05

