码迷,mamicode.com
首页 > 移动开发 > 详细

android 用NineOldAndroid实现的弹出按钮

时间:2014-08-19 20:44:35      阅读:513      评论:0      收藏:0      [点我收藏+]

标签:des   android   style   blog   http   color   java   使用   

NineOldAndroid

1.首先上效果图:

左边这张是没有点击button的时候的效果,   右边这张是点击button 后是以该button为圆的展开5个button

bubuko.com,布布扣                              bubuko.com,布布扣

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,和y
101         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     <FrameLayout
12         android:layout_width="match_parent"
13         android:layout_height="match_parent" >
14 
15         <Button
16             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         <Button
23             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         <Button
30             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         <Button
37             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         <Button
44             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         <Button
51             android:id="@+id/Main"
52             android:layout_width="40dp"
53             android:layout_height="40dp"
54             android:background="@drawable/circle1" />
55     </FrameLayout>
56 
57 </RelativeLayout>

 

源码下载地址:源码

 

android 用NineOldAndroid实现的弹出按钮,布布扣,bubuko.com

android 用NineOldAndroid实现的弹出按钮

标签:des   android   style   blog   http   color   java   使用   

原文地址:http://www.cnblogs.com/liangstudyhome/p/3922909.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!