首页 > 代码库 > android 用NineOldAndroid实现的弹出按钮
android 用NineOldAndroid实现的弹出按钮
NineOldAndroid
1.首先上效果图：
左边这张是没有点击button的时候的效果， 右边这张是点击button 后是以该button为圆的展开5个button
2.实现的思路是：
1)在FrameLayout中将6个Button进行重叠，然后将主Button显示在最上面，其他Button可以隐藏掉。
2)然后调用用NineOldAndroids来进行动画设置，在设置动画的时候要注意是以Button为中心的圆。所以要根据Button的位置来确定平移的x,y（处理的时候用到了三角函数）
3.在实现过程中遇到的一个问题：
android AnimatorSet AnimationSet 的区别：
简介: AnimatorSet 和 AnimationSet 都是动画集合。这里简单介绍下他们的异同，了解这些后在设计动画实现时才能得心应手。
AnimationSet 我们最常用的是调用其 addAnimation 将一个个不一样的动画组织到一起来，然后调用view 的 startAnimation 方法触发这些动画执行。功能较弱不能做到把集合中的动画按一定顺序进行组织然后在执行的定制。
AnimatorSet 我们最常用的是调用其play、before、with、after 等方法设置动画的执行顺序，然后调用其start 触发动画执行。
AnimationSet 与 AnimatorSet 最大的不同在于，AnimationSet 使用的是 Animation 子类、AnimatorSet 使用的是 Animator 的子类。
Animation 是针对视图外观的动画实现，动画被应用时外观改变但视图的触发点不会发生变化，还是在原来定义的位置。
Animator 是针对视图属性的动画实现，动画被应用时对象属性产生变化，最终导致视图外观变化。
4.代码：
MianActivity
1 public class MainActivity extends Activity implements OnClickListener { 2 3 private Button main, one, two, three, four, five; 4 5 private boolean isShow = false; 6 7 @Override 8 protected void onCreate(Bundle savedInstanceState) { 9 super.onCreate(savedInstanceState); 10 setContentView(R.layout.activity_main); 11 12 initView(); 13 } 14 15 private void initView() { 16 main = (Button) findViewById(R.id.Main); 17 one = (Button) findViewById(R.id.one); 18 two = (Button) findViewById(R.id.two); 19 three = (Button) findViewById(R.id.three); 20 four = (Button) findViewById(R.id.four); 21 five = (Button) findViewById(R.id.five); 22 main.setOnClickListener(this); 23 one.setOnClickListener(this); 24 two.setOnClickListener(this); 25 three.setOnClickListener(this); 26 four.setOnClickListener(this); 27 five.setOnClickListener(this); 28 } 29 30 @Override 31 public void onClick(View v) { 32 switch (v.getId()) { 33 case R.id.Main: 34 if (!isShow) { 35 isShow = true; 36 animationShow(one, 1, 5, 300); 37 animationShow(two, 2, 5, 300); 38 animationShow(three, 3, 5, 300); 39 animationShow(four, 4, 5, 300); 40 animationShow(five, 5, 5, 300); 41 42 } else { 43 isShow = false; 44 animationHint(one, 1, 5, 300); 45 animationHint(two, 2, 5, 300); 46 animationHint(three, 3, 5, 300); 47 animationHint(four, 4, 5, 300); 48 animationHint(five, 5, 5, 300); 49 } 50 51 break; 52 case R.id.one: 53 Toast.makeText(MainActivity.this, "点击了" + one, Toast.LENGTH_SHORT) 54 .show(); 55 break; 56 case R.id.two: 57 Toast.makeText(MainActivity.this, "点击了" + two, Toast.LENGTH_SHORT) 58 .show(); 59 break; 60 case R.id.three: 61 Toast.makeText(MainActivity.this, "点击了" + three, Toast.LENGTH_SHORT) 62 .show(); 63 break; 64 case R.id.four: 65 Toast.makeText(MainActivity.this, "点击了" + four, Toast.LENGTH_SHORT) 66 .show(); 67 break; 68 case R.id.five: 69 Toast.makeText(MainActivity.this, "点击了" + five, Toast.LENGTH_SHORT) 70 .show(); 71 break; 72 } 73 } 74 75 private void animationShow(View view, int index, int total, int radius) { 76 if (view != null) { 77 view.setVisibility(View.VISIBLE); 78 } 79 80 // 根据三角函数来获得view平移的x,和y 81 double degree = index * Math.PI / (2 * total); 82 int translateX = (int) ((int) radius * Math.sin(degree)); 83 int translateY = (int) ((int) radius * Math.cos(degree)); 84 AnimatorSet set = new AnimatorSet(); 85 set.playTogether( 86 ObjectAnimator.ofFloat(view, "translationX", 0, translateX), 87 ObjectAnimator.ofFloat(view, "translationY", 0, translateY), 88 ObjectAnimator.ofFloat(view, "scaleX", 0f, 1f), 89 ObjectAnimator.ofFloat(view, "scaleY", 0f, 1f), 90 ObjectAnimator.ofFloat(view, "alpha", 0f, 1f)); 91 set.start(); 92 93 } 94 95 private void animationHint(View view, int index, int total, int radius) { 96 if (view != null) { 97 view.setVisibility(View.VISIBLE); 98 } 99 100 // 根据三角函数来获得view平移的x,和y101 double degree = index * Math.PI / (2 * total);102 int translateX = (int) ((int) radius * Math.sin(degree));103 int translateY = (int) ((int) radius * Math.cos(degree));104 AnimatorSet set = new AnimatorSet();105 set.playTogether(106 ObjectAnimator.ofFloat(view, "translationX", translateX, 0),107 ObjectAnimator.ofFloat(view, "translationY", translateY, 0),108 ObjectAnimator.ofFloat(view, "scaleX", 1f, 0f),109 ObjectAnimator.ofFloat(view, "scaleY", 1f, 0f),110 ObjectAnimator.ofFloat(view, "alpha", 1f, 0f));111 set.start();112 113 }114 115 }
activity_main.xml：1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:paddingBottom="@dimen/activity_vertical_margin" 6 android:paddingLeft="@dimen/activity_horizontal_margin" 7 android:paddingRight="@dimen/activity_horizontal_margin" 8 android:paddingTop="@dimen/activity_vertical_margin" 9 tools:context=".MainActivity" >10 11 <FrameLayout12 android:layout_width="match_parent"13 android:layout_height="match_parent" >14 15 <Button16 android:id="@+id/one"17 android:layout_width="40dp"18 android:layout_height="40dp"19 android:background="@drawable/circle2"20 android:visibility="gone" />21 22 <Button23 android:id="@+id/two"24 android:layout_width="40dp"25 android:layout_height="40dp"26 android:background="@drawable/circle3"27 android:visibility="gone" />28 29 <Button30 android:id="@+id/three"31 android:layout_width="40dp"32 android:layout_height="40dp"33 android:background="@drawable/circle4"34 android:visibility="gone" />35 36 <Button37 android:id="@+id/four"38 android:layout_width="40dp"39 android:layout_height="40dp"40 android:background="@drawable/circle5"41 android:visibility="gone" />42 43 <Button44 android:id="@+id/five"45 android:layout_width="40dp"46 android:layout_height="40dp"47 android:background="@drawable/circle6"48 android:visibility="gone" />49 50 <Button51 android:id="@+id/Main"52 android:layout_width="40dp"53 android:layout_height="40dp"54 android:background="@drawable/circle1" />55 </FrameLayout>56 57 </RelativeLayout>
源码下载地址：源码
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。