谈谈自定义Android界面切换效果库的使用

界面或者板块的切换是Android应用中非常常见的一个功能，本文将给大家介绍一个由本人开发的好用的Android界面切换效果库，同时也谈谈自己对“Android模块化编程”的一些想法。希望大家能通过对界面切换效果库的研究和思考，总结出一套自己的常用功能类库的开发思路。界面切换效果库Demo项目的源码（ShiftEffect.zip）可以点击“ 此处下载 ”。将解压后的项目源码（ShiftEffect）导入到Eclipse中就可以看到这个Demo项目的代码结构了（如下图）。



首先，在模拟器上运行项目代码。可以看到，界面切换效果库的Demo为大家提供了比较丰富的选项，如下图所示；我们可以随意选择切换的内容（文字、图片）、切换的渐变时间、切换的停顿时间以及丰富切换的效果（滚动切换、旋转渐变、大小渐变等）。



下图所示的就是图片切换的效果，大家还可以尝试各种切换的效果，我们可以看到效果还是很流畅的。



界面切换效果库位于ShiftEffect项目的libs目录下，即plugs-effect.jar。该效果库的使用范例都在com.example.scrolleffect包目录下的MainActivity.java文件中，使用方法在代码注释中都已经写的非常清楚了，如下参考。

[java]  view plain copy

1. public class MainActivity extends Activity implements OnItemSelectedListener {  
2.   
3.     // 展示渐变动效的容器，用于容纳渐变效果库的View控件  
4.     private LinearLayout container;  
5.       
6.     // 渐变效果库的View控件类  
7.     private EffectView mView;  
8.       
9.     // 文字资源（用于展示渐变切换）  
10.     private String[] mTexts = { "今日新闻1", "今日新闻2", "今日新闻3" };  
11.       
12.     // 图片资源（用于展示渐变切换）  
13.     private int[] mImages = { R.drawable.image_1, R.drawable.image_2, R.drawable.image_3 };  
14.   
15.     // 切换内容选项  
16.     private Spinner sp1;  
17.     private ArrayAdapter<String> aa1;  
18.     private String[] menu1 = { "内容:文字", "内容:图片" };  
19.   
20.     // 切换渐变时间选项  
21.     private Spinner sp2;  
22.     private ArrayAdapter<String> aa2;  
23.     private String[] menu2 = { "动时:300ms", "动时:1000ms", "动时:3000ms" };  
24.   
25.     // 切换渐变停顿选项  
26.     private Spinner sp3;  
27.     private ArrayAdapter<String> aa3;  
28.     private String[] menu3 = { "停时:3000ms", "停时:5000ms", "停时:10000ms" };  
29.   
30.     // 切换渐变效果选项  
31.     private Spinner sp4;  
32.     private ArrayAdapter<String> aa4;  
33.     private String[] menu4 = { "动效:向上", "动效:向下", "动效:向左", "动效:向右", "动效:旋转",  
34.             "动效:大小", "动效:渐变" };  
35.   
36.     @Override  
37.     public void onCreate(Bundle savedInstanceState) {  
38.         super.onCreate(savedInstanceState);  
39.         setContentView(R.layout.activity_main);  
40.   
41.         // 初始化展示动效的容器  
42.         container = (LinearLayout) this.findViewById(R.id.container);  
43.   
44.         // 初始化各个选项的内容  
45.         sp1 = (Spinner) findViewById(R.id.spinner1);  
46.         aa1 = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, menu1);  
47.         aa1.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);  
48.         sp1.setAdapter(aa1);  
49.         sp1.setOnItemSelectedListener(this);  
50.   
51.         sp2 = (Spinner) findViewById(R.id.spinner2);  
52.         aa2 = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, menu2);  
53.         aa2.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);  
54.         sp2.setAdapter(aa2);  
55.         sp2.setOnItemSelectedListener(this);  
56.   
57.         sp3 = (Spinner) findViewById(R.id.spinner3);  
58.         aa3 = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, menu3);  
59.         aa3.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);  
60.         sp3.setAdapter(aa3);  
61.         sp3.setOnItemSelectedListener(this);  
62.   
63.         sp4 = (Spinner) findViewById(R.id.spinner4);  
64.         aa4 = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, menu4);  
65.         aa4.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);  
66.         sp4.setAdapter(aa4);  
67.         sp4.setOnItemSelectedListener(this);  
68.     }  
69.   
70.     @Override  
71.     public boolean onCreateOptionsMenu(Menu menu) {  
72.         getMenuInflater().inflate(R.menu.activity_main, menu);  
73.         return true;  
74.     }  
75.   
76.     @Override  
77.     public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {  
78.         // 选择切换内容选项（可选择滚动文字或者图片）  
79.         if (parent.getAdapter() == aa1) {  
80.             container.removeAllViews();  
81.             switch (position) {  
82.                 case 0:  
83.                     // 初始化文字切换View对象  
84.                     mView = EffectUtil.fillTexts(this, EffectView.ANI_UP, 30, mTexts);  
85.                     container.addView(mView);  
86.                     mView.start();  
87.                     break;  
88.                 default:  
89.                     mView = EffectUtil.fillImages(this, EffectView.ANI_UP, mImages);  
90.                     container.addView(mView);  
91.                     mView.start();  
92.                     break;  
93.             }  
94.         }  
95.         // 选择切换渐变时间选项  
96.         if (parent.getAdapter() == aa2) {  
97.             switch (position) {  
98.                 case 0:  
99.                     mView.setDuration(300);  
100.                     break;  
101.                 case 1:  
102.                     mView.setDuration(1000);  
103.                     break;  
104.                 default:  
105.                     mView.setDuration(3000);  
106.                     break;  
107.             }  
108.         }  
109.         // 选择切换渐变间隔选项  
110.         if (parent.getAdapter() == aa3) {  
111.             switch (position) {  
112.                 case 0:  
113.                     mView.setInterval(3000);  
114.                     break;  
115.                 case 1:  
116.                     mView.setInterval(5000);  
117.                     break;  
118.                 default:  
119.                     mView.setInterval(10000);  
120.                     break;  
121.             }  
122.         }  
123.         // 选择切换渐变效果选项  
124.         if (parent.getAdapter() == aa4) {  
125.             switch (position) {  
126.                 case 0:  
127.                     mView.setAnimation(EffectView.ANI_UP); // 往上滚动  
128.                     break;  
129.                 case 1:  
130.                     mView.setAnimation(EffectView.ANI_DOWN); // 往下滚动  
131.                     break;  
132.                 case 2:  
133.                     mView.setAnimation(EffectView.ANI_LEFT); // 往左滚动  
134.                     break;  
135.                 case 3:  
136.                     mView.setAnimation(EffectView.ANI_RIGHT); // 往右滚动  
137.                     break;  
138.                 case 4:  
139.                     mView.setAnimation(EffectView.ANI_ROTATE); // 旋转渐变  
140.                     break;  
141.                 case 5:  
142.                     mView.setAnimation(EffectView.ANI_SCALE); // 大小渐变  
143.                     break;  
144.                 default:  
145.                     mView.setAnimation(EffectView.ANI_FADE); // 消失渐变  
146.                     break;  
147.             }  
148.         }  
149.     }  
150.   
151.     @Overridek  
152.     public void onNothingSelected(AdapterView<?> parent) {  
153.         // TODO Auto-generated method stub  
154.   
155.     }  
156. }  

我们可以看到，该界面切换效果库的使用方法是非常方便和灵活的。使用EffectUtil的fillTexts（或fillImages）方法添加需要进行切换的文字（或图片）之后，再调用其EffectView对象的start方法就可以打开切换效果了。此外，我们还可以使用setDuration方法设置切换过程的渐变时间、使用setInterval设置切换过程的渐变间隔、使用setAnimation方法设置切换过程的渐变效果；这些方法的使用在使用范例中都能查到。

接下来，让我们来思考一个问题：如果抛开以上的Android界面切换效果库，使用原生API来实现一个类似的效果，我们该如何来做？ 你是否会感觉非常繁琐？确实如此。其实，这也就是为何我们提倡“模块化编程”的原因！实际上业内已经有很多的开发团队早已意识到了这一点，也就是所谓的“Android模块化编程”。那么，何谓“Android模块化编程”呢？简单来说，就是把常见的、可复用的功能提取出来，单独制作成好用的类库，使之在开发产品的时候可被复用。

实际上，任何一门技术发展到一定阶段，必然会出现模块化的方法和思想，对于Android编程来说也是如此。模块化编程可以帮助知识积累、技术沉淀，帮助我们制作出更加丰富和复杂的应用。因此，我建议大家在学习Android变成的过程中，多使用模块化的思想来实现，比如上述的“自定义Android界面切换效果库”，就是个很好的例子。我们可以来看看以上界面切换效果库源码结构，如下图。



从源码的结构中，我们可以看出，效果库的代码层次十分清晰。EffectUtil是总接口类，里面包含了fillTexts和fillImages两个方法，用于初始化界面切换的内容（文字or图片）；相关的视图类都在com.app.plugs.effect.view包下，这些视图都是用于容纳切换内容的容器；而动画效果类则位于com.app.plugs.effect.anim包下，这里包含了所有动画效果的逻辑。具体源码大家可以直接反编译Demo项目的源码plugs-effect.jar来看，此包是未加密过的。

当然，在模块化编程实现的过程中，必定会遇到很多需要解决的问题。比如下面就是个最常见的问题，模块相关的资源文件如何打包？实际上在模块化编程的过程中，我们不提倡对资源进行打包。大家更应该使用Android原生的控件API来实现模块的UI，而不是XML模板（使用XML模板有可能降低Android应用的运行效率，请参考《 Android和PHP开发最佳实践 》第10章.客户端优化）；而图片资源这些则可以通过模块的API进行设置；总之，原则是模块化的类库中应该只包含代码。当然，大家在实施过程中遇到任何问题，都欢迎到这里来留言和讨论。