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

简介:


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

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

下面是效果

其中:

△ 自定义button是由  个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 持续更新中~



本文转自beautifulzzzz博客园博客,原文链接:http://www.cnblogs.com/zjutlitao/p/4972787.html,如需转载请自行联系原作者

相关文章
|
28天前
|
Android开发 开发者
安卓应用开发中的自定义视图
【9月更文挑战第37天】在安卓开发的海洋中,自定义视图犹如一座座小岛,等待着勇敢的探索者去发现其独特之处。本文将带领你踏上这段旅程,从浅滩走向深海,逐步揭开自定义视图的神秘面纱。
31 3
|
21天前
|
数据可视化 Android开发 开发者
安卓应用开发中的自定义View组件
【10月更文挑战第5天】在安卓应用开发中,自定义View组件是提升用户交互体验的利器。本篇将深入探讨如何从零开始创建自定义View,包括设计理念、实现步骤以及性能优化技巧,帮助开发者打造流畅且富有创意的用户界面。
52 0
|
3月前
|
存储 Shell Android开发
基于Android P,自定义Android开机动画的方法
本文详细介绍了基于Android P系统自定义开机动画的步骤,包括动画文件结构、脚本编写、ZIP打包方法以及如何将自定义动画集成到AOSP源码中。
62 2
基于Android P,自定义Android开机动画的方法
|
3月前
|
供应链 物联网 区块链
未来触手可及:探索新兴技术的趋势与应用安卓开发中的自定义视图:从基础到进阶
【8月更文挑战第30天】随着科技的飞速发展,新兴技术如区块链、物联网和虚拟现实正在重塑我们的世界。本文将深入探讨这些技术的发展趋势和应用场景,带你领略未来的可能性。
|
3月前
|
测试技术 Android开发 Python
探索软件测试的艺术:从基础到高级安卓应用开发中的自定义视图
【8月更文挑战第29天】在软件开发的世界中,测试是不可或缺的一环。它如同艺术一般,需要精细的技巧和深厚的知识。本文旨在通过浅显易懂的语言,引领读者从软件测试的基础出发,逐步深入到更复杂的测试策略和工具的使用,最终达到能够独立进行高效测试的水平。我们将一起探索如何通过不同的测试方法来确保软件的质量和性能,就像艺术家通过不同的色彩和笔触来完成一幅画作一样。
|
21天前
|
XML 前端开发 Java
安卓应用开发中的自定义View组件
【10月更文挑战第5天】自定义View是安卓应用开发的一块基石,它为开发者提供了无限的可能。通过掌握其原理和实现方法,可以创造出既美观又实用的用户界面。本文将引导你了解自定义View的创建过程,包括绘制技巧、事件处理以及性能优化等关键步骤。
|
2月前
|
Android开发 开发者
安卓开发中的自定义视图:从入门到精通
【9月更文挑战第19天】在安卓开发的广阔天地中,自定义视图是一块充满魔力的土地。它不仅仅是代码的堆砌,更是艺术与科技的完美结合。通过掌握自定义视图,开发者能够打破常规,创造出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战应用,一步步展示如何用代码绘出心中的蓝图。无论你是初学者还是有经验的开发者,这篇文章都将为你打开一扇通往创意和效率的大门。让我们一起探索自定义视图的秘密,将你的应用打造成一件艺术品吧!
56 10
|
2月前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中,自定义视图控件是一种高级技巧,它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例,引导你了解如何在安卓项目中实现自定义视图控件,包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者,这篇文章都会为你提供有价值的见解和技巧。
38 3
|
2月前
|
前端开发 Android开发 开发者
安卓应用开发中的自定义视图基础
【9月更文挑战第13天】在安卓开发的广阔天地中,自定义视图是一块神奇的画布,它允许开发者将想象力转化为用户界面的创新元素。本文将带你一探究竟,了解如何从零开始构建自定义视图,包括绘图基础、触摸事件处理,以及性能优化的实用技巧。无论你是想提升应用的视觉吸引力,还是追求更流畅的交互体验,这里都有你需要的金钥匙。
|
2月前
|
缓存 搜索推荐 Android开发
安卓应用开发中的自定义View组件实践
【9月更文挑战第10天】在安卓开发领域,自定义View是提升用户体验和实现界面个性化的重要手段。本文将通过一个实际案例,展示如何在安卓项目中创建和使用自定义View组件,包括设计思路、实现步骤以及可能遇到的问题和解决方案。文章不仅提供了代码示例,还深入探讨了自定义View的性能优化技巧,旨在帮助开发者更好地掌握这一技能。