[安卓] 18、一个简单的例子做自定义动画按钮和自定义Actionbar

在做安卓UI的时候有时候需自定义具有动画效果的按钮或需要自定义一下actionbar~

本节用一个简单的demo讲如何自定义具有动画效果的按钮，以及个性化的actionbar

下面是效果：

其中：

△ 自定义button是由 3 个ImageView + animation动画构成

△ actionbar是自定义的效果，按钮按动也用到了动画

下面是整个工程的结构：

需要引用v7工程，因为继承了v7的ActionBarActivity

其中MyAnimation.java包含按钮动画的方法

其中MyActionBar.java封装自定义ActionBar的构造和监听函数

其中MyButton.java封装自定义Button的构造和监听函数

MainActivity.java是主Activity

自定义actionbar上面的按钮偶数次按下施加的动画定义（顺时针旋转90度）

自定义actionbar上面的按钮奇数次按下施加的动画定义（逆时针选转90度）

自定义button偶数次按下施加的旋转动画（顺时针360度）

自定义button奇数次按下施加的旋转动画（逆时针360度）

bar1-4自定义actionbar上面的从左到右四个图片

icon

...down自定义button黄色

...up自定义button绿色

自定义button橙色

activity_main.xml 主页面

layout_actionbar.xml 自定义actionbar样式

colors.xml 定义了actionbar和主页面的背景颜色（银灰色）

styles.xml 定义了主页面的主题（需要在Manifiest文件中用到，且一定得是Theme.Base.AppCompat.Light同一款的主题，否则出错）

首先来看MainActivity.java

其中黄色的是自定义Button相关的部分，红色的是自定义ActionBar相关的部分

其中自定义Button包含3个ImageView，所以第18行要用这三个ImageView构造自定义Button

 1 public class MainActivity extends ActionBarActivity{
 2
 3     private ImageView mImageViewMain, mImageViewMainUp, mImageViewMainDown;
 4     private MyButton mMyButton;
 5     private MyActionBar mMyActionBar;
 6
 7
 8
 9     protected void onCreate(Bundle savedInstanceState) {
10         super.onCreate(savedInstanceState);
11         this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
12                 WindowManager.LayoutParams.FLAG_FULLSCREEN);
13         setContentView(R.layout.activity_main);
14
15         mImageViewMain = (ImageView) findViewById(R.id.imageView_btn_bottom);
16         mImageViewMainUp = (ImageView) findViewById(R.id.imageView_btn_top);
17         mImageViewMainDown = (ImageView) findViewById(R.id.imageView_btn_middle);
18         mMyButton=new MyButton(this,mImageViewMain,mImageViewMainUp,mImageViewMainDown);
19
20         mMyActionBar=new MyActionBar(this);
21         mMyActionBar.setActionBar();
22     }
23
24     public void onMyButtonClick(View view){
25         mMyButton.onClick(view);
26     }
27
28     public void onMyActionBarClick(View view){
29         mMyActionBar.onClick(view);
30     }
31 }

这里重点说一下自定义按钮和自定义actionBar的监听函数：

其实在MyButton和MyActionBar中实现的只是onClick监听函数，并没有和具体事件绑定

我们最常见的是XXXX.setOnClickListener(....)

这里是用了直接在相应控件的XML中定义：

类似的也采用同样的方法给ActionBar上的左1、3、4按钮加了一个同样的onMyActionBarClick监听事件

注：一旦在MXL中注册一定要在activity.java中实现！！！

接着看MyButton.java的具体实现：

构造函数不说了~

在onClick函数中用view.getId()区分点击的按钮是哪一个

这个自定义按钮有两种状态：

未被按——橙红色的按钮在上面不透明；黄色和绿色按钮在下面透明

被按下——黄色按钮向上移200单位，绿色向上400单位，两个均变成不透明

在未被按状态点击橙红色按钮——橙红色逆时针旋转360度，黄色和绿色同时向上移动200和400单位，同时两个ImageView大小从0倍到1倍放大，透明度从完全透明到不透明

在被点击状态点击三个按钮中任何一个——所有按钮的动画逆向回归

 1 public class MyButton {
 2
 3     private ImageView mImageViewMain, mImageViewMainUp, mImageViewMainDown;
 4     private Context context;
 5     private boolean isPressed;
 6     private MyAnimation mMyAnimation;//动画相关
 7
 8     public MyButton(Context context,
 9             ImageView mImageViewMain,ImageView mImageViewMainUp,ImageView mImageViewMainDown){
10         isPressed=false;
11         this.context=context;
12         this.mImageViewMain=mImageViewMain;
13         this.mImageViewMainUp=mImageViewMainUp;
14         this.mImageViewMainDown=mImageViewMainDown;
15         mMyAnimation=new MyAnimation(context);
16     }
17
18     /**
19      * 三个按钮的点击事件
20      * @param view
21      */
22     private static int[] button_animation_id={R.anim.my_button_rotate_go,R.anim.my_button_rotate_back};
23     public void onClick(View view) {
24
25         switch (view.getId()) {
26         case R.id.imageView_btn_bottom:
27             mMyAnimation.rotation(view,button_animation_id[isPressed==false ? 0:1]);
28             mMyAnimation.animationShow(mImageViewMainUp, 400,!isPressed);
29             mMyAnimation.animationShow(mImageViewMainDown, 200,!isPressed);
30             break;
31         case R.id.imageView_btn_top:
32             mMyAnimation.rotation(mImageViewMain,button_animation_id[isPressed==false ? 0:1]);
33             mMyAnimation.animationShow(mImageViewMainUp, 400,!isPressed);
34             mMyAnimation.animationShow(mImageViewMainDown, 200,!isPressed);
35             break;
36         case R.id.imageView_btn_middle:
37             mMyAnimation.rotation(mImageViewMain,button_animation_id[isPressed==false ? 0:1]);
38             mMyAnimation.animationShow(mImageViewMainUp, 400,!isPressed);
39             mMyAnimation.animationShow(mImageViewMainDown, 200,!isPressed);
40             break;
41         default:
42             break;
43         }
44         isPressed=!isPressed;
45     }
46 }

相同的，MyActionBar.java中：

左1、3、4三个按钮有一个旋转90度的动画效果~

 1 public class MyActionBar {
 2
 3     private ActionBar actionBar;
 4     private LayoutInflater inflator;
 5     private Context context;
 6     private MyAnimation mMyAnimation;//动画相关
 7     private boolean bar1_isPressed,bar2_isPressed,bar3_isPressed,bar4_isPressed;
 8
 9     public MyActionBar(Context context){
10         this.context=context;
11         bar1_isPressed=bar2_isPressed=bar3_isPressed=bar4_isPressed=false;
12         mMyAnimation=new MyAnimation(context);
13     }
14
15     public void setActionBar() {// 自定义actionbar
16         inflator = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
17         actionBar = ((ActionBarActivity)context).getSupportActionBar();
18         actionBar.setDisplayShowHomeEnabled(false);
19         actionBar.setDisplayShowCustomEnabled(true);
20         actionBar.setDisplayShowTitleEnabled(false);
21         actionBar.setDisplayHomeAsUpEnabled(false);
22
23         View view = inflator.inflate(R.layout.layout_actionbar, null);
24         ActionBar.LayoutParams layout = new ActionBar.LayoutParams(
25                 LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
26         actionBar.setCustomView(view, layout);
27     }
28
29     private static int[] actionbar_animation_id={R.anim.my_actionbar_rotate_go,R.anim.my_actionbar_rotate_back};
30     public void onClick(View view) {
31         switch (view.getId()) {
32         case R.id.imageView_bar1:
33             mMyAnimation.rotation(view,actionbar_animation_id[bar1_isPressed==false ? 0:1]);
34             bar1_isPressed=!bar1_isPressed;
35             break;
36         case R.id.imageView_bar3:
37             mMyAnimation.rotation(view,actionbar_animation_id[bar3_isPressed==false ? 0:1]);
38             bar3_isPressed=!bar3_isPressed;
39             break;
40         case R.id.imageView_bar4:
41             mMyAnimation.rotation(view,actionbar_animation_id[bar4_isPressed==false ? 0:1]);
42             bar4_isPressed=!bar4_isPressed;
43             break;
44         }
45     }
46 }

上面两个自定义控件中的动画效果功能函数封装在Animation.java中：

rotation函数负责将id所指的动画资源作用于view上

animationShow是作用与view使之出现或消失并可以带有向上或向下、变大或变小的运动效果

 1 public class MyAnimation {
 2
 3     private Context context;
 4
 5     public MyAnimation(Context context){
 6         this.context=context;
 7     }
 8
 9     /**
10      * 让view执行id的动画
11      * @param view
12      * @param id
13      */
14     public void rotation(View view,int id) {
15
16         Animation operatingAnim;
17         operatingAnim = AnimationUtils.loadAnimation(context,id);
18         LinearInterpolator lin = new LinearInterpolator();
19         operatingAnim.setInterpolator(lin);
20         view.clearAnimation();
21         view.startAnimation(operatingAnim);
22     }
23
24     /**
25      * 让view从无到有显示出来（大小1:1，up为正为向下走，为负向上走）
26      * @param view
27      * @param up
28      */
29     /**
30      * 让view从无到有显示出来
31      * @param view
32      * @param dis 去或者回来的距离（去是从原点到上面dis距离），来是从dis距离向下到原点
33      * @param isGo 为true是去，为fasle是回
34      */
35     public void animationShow(View view, int dis,boolean isGo) {
36
37         AnimatorSet set = new AnimatorSet();
38         if(isGo==true){
39             set.playTogether(ObjectAnimator.ofFloat(view, "translationY", 0, -dis),
40                     ObjectAnimator.ofFloat(view, "scaleX", 0f, 1f),
41                     ObjectAnimator.ofFloat(view, "scaleY", 0f, 1f),
42                     ObjectAnimator.ofFloat(view, "alpha", 0f, 1f));
43         }else{
44             set.playTogether(ObjectAnimator.ofFloat(view, "translationY", -dis, 0),
45                     ObjectAnimator.ofFloat(view, "scaleX", 1f, 0f),
46                     ObjectAnimator.ofFloat(view, "scaleY", 1f, 0f),
47                     ObjectAnimator.ofFloat(view, "alpha", 1f, 0f));
48         }
49
50         set.start();
51     }
52 }

下面是res/anim下的四个动画集合，他们的id就是传入rotation的id~

其中button相关的两个负责自定义button中橙红色按钮旋转360用；其中actionbar相关的负责actionbar上的按钮旋转90度用

注意：下面绿色的部分是为了防止动画结束之后又恢复原状而加的属性，一定要加在set中！！！

其中from和to表示：该动画从角度为from旋转到to的位置，其中正表示顺时针角度，负表示逆时针角度，0为最初状态角度

其中duration表示：该动画持续的时间ms

其中pivotX/Y表示：该旋转绕哪里旋转

my_button_rotate_back.xml

 1 <set xmlns:android="http://schemas.android.com/apk/res/android"
 2            android:fillAfter="true"  >
 3
 4     <rotate
 5         android:fromDegrees="0"
 6         android:toDegrees="359"
 7         android:duration="200"
 8         android:pivotX="50%"
 9         android:pivotY="50%"/>
10 </set>

my_button_rotate_go.xml

 1 <set xmlns:android="http://schemas.android.com/apk/res/android"
 2            android:fillAfter="true"  >
 3
 4     <rotate
 5         android:fromDegrees="0"
 6         android:toDegrees="-359"
 7         android:duration="200"
 8         android:pivotX="50%"
 9         android:pivotY="50%"/>
10 </set>

my_actionbar_rotate_go.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <set xmlns:android="http://schemas.android.com/apk/res/android"
 3            android:fillAfter="true"  >
 4
 5     <rotate
 6         android:fromDegrees="0"
 7         android:toDegrees="-90"
 8         android:duration="200"
 9         android:pivotX="50%"
10         android:pivotY="50%"/>
11 </set>

my_actionbar_rotate_back.xml

 1 <set xmlns:android="http://schemas.android.com/apk/res/android"
 2            android:fillAfter="true"  >
 3
 4     <rotate
 5         android:fromDegrees="-90"
 6         android:toDegrees="0"
 7         android:duration="200"
 8         android:pivotX="50%"
 9         android:pivotY="50%"/>
10 </set>

其中：shape_main_adding.xml负责自定按钮下面遮罩层的从上到下的白色模糊效果（类似于iPad上面的扁平状ICON条）

1 <?xml version="1.0" encoding="utf-8"?>
2 <shape xmlns:android="http://schemas.android.com/apk/res/android">
3     <gradient
4         android:startColor="#AAFFFFFF"
5         android:endColor="#00EEEEEE"
6         android:angle="90" />
7 </shape>
8
9 <!-- http://l62s.iteye.com/blog/1659433  -->

相关链接：

本讲的工程代码：http://pan.baidu.com/s/1o65ZOca

Android使用Animation完成动画淡出效果避免重新恢复最后一帧亮度的办法（用这个解决了动画播放完就恢复的问题，加了代码中绿色的那条）

Android应用开发笔记(10)：制作自定义背景Button按钮、自定义形状Button的全攻略（我没用这个的）

Android自定义ActionBar（我没用这个的）

android 围绕中心旋转动画（这个我有参考，设计旋转360度view效果的时候，里面比较详细）

Android属性动画（Property Animation）完全解析（上）（这个讲的挺全的，我没仔细看）

android用NineOldAndroid实现的弹出按钮（我从这个找到灵感设计自己的button）

Android背景渐变色(shape,gradient)（用这个解决了设计模糊遮罩的效果，很好的）

Android布局----让一个控件居底部（有看看，没用）

@beautifulzzzz

2015-11-18 持续更新中~

[安卓] 18、一个简单的例子做自定义动画按钮和自定义Actionbar相关推荐

一个简单的例子，学习自定义注解和AOP
转载自一个简单的例子,学习自定义注解和AOP 记得今年年初刚开始面试的时候,被问的最多的就是你知道Spring的两大核心嘛?那你说说什么是AOP,什么是IOC?我相信你可能也被问了很多次了. 1 ...
JPA基础（二）之实现一个简单 JPA 例子
实现一个简单 JAP 例子需要学习 JPA,首先需要把环境搭起来,这里选择实现 JPA 规范的持久层框架是 Hibernate,版本为 5.0.7.Final,并且采用 maven 进行依赖包的管理 ...
跨站脚本功攻击，xss，一个简单的例子让你知道什么是xss攻击
跨站脚本功攻击,xss,一个简单的例子让你知道什么是xss攻击一.总结一句话总结:比如用户留言功能,用户留言中写的是网页可执行代码,例如js代码,然后这段代码在可看到这段留言的不同一户的显示上就会 ...
一个简单的例子解释什么是量子计算机
大家好! 前几天,我访问了加拿大温哥华的D-Wave Systems.这是一家制造尖端量子计算机的公司. 我在那里学到了很多关于量子计算机的知识,所以我想在这篇文章中与你们分享我在那里学到的一些东西. ...
Django入门超easy系列（一）——— 从一个简单的例子入门
从一个简单的例子初识Django 当下最火的语言-Python和当下最火的Web开发框架-Django会擦出怎么样的火花!? 前言我从去年十月份开始跟公司大佬学习Django,在本系列总结自己学习D ...
一步一步解读神经网络编译器TVM(一)——一个简单的例子
@TOC 前言这是一个TVM教程系列,计划从TVM的使用说明,再到TVM的内部源码?为大家大致解析一下TVM的基本工作原理.因为TVM的中文资料比较少,也希望贡献一下自己的力量,如有描述方面的错误, ...
.net中的对象序列化(1)：序列化是什么, 以及一个简单的例子
1. 为什么需要序列化,什么是序列化对于一个程序来说, 使用到的对象都是存在于内存中的.如果想保存这些对象的运行时状态, 或者需要在不同进程或者网络间传递对象,就需要序列化. 序列化就是讲运行中的对 ...
一个简单的例子看java线程机制
一个简单的例子看java线程机制作者: zyf0808 发表日期: 2006-03-26 11:20 文章属性: 原创复制链接 import java.util.*; public class T ...
blockchain 区块链200行代码：在JavaScript实现的一个简单的例子
blockchain 区块链200行代码:在JavaScript实现的一个简单的例子了解blockchain的概念很简单(区块链,交易链块):它是分布式的(即不是放置在同一台机器上,不同的网络设备上 ...

[安卓] 18、一个简单的例子做自定义动画按钮和自定义Actionbar

[安卓] 18、一个简单的例子做自定义动画按钮和自定义Actionbar相关推荐

最新文章

热门文章