仿360手机卫士首页[android平台]

学习android几个月了，对android的UI开发部分一直不是很熟悉。于是最近拿360手机卫士首页来练手，做了个小demo，想与各位多多交流。效果图如下：

     

（1）首页 

       

（2）transformation动画效果

         

 （3）ViewFlipper滑动屏效果

   

（4）工具栏侧滑效

                                                                                        

       将开发经验总结为两个方面

一、编写界面

        由于是自己第一次做android应用开发，因此对如何编写Android界面并不熟悉。 在开发中总结的经验如下：

       1、新手尽量手动边写布局的xml文件。之前的小练习都是直接在Graphical Layout中直接拖控件，并没有自己编写xml文件。而只有手动边写布局xml文件，才能更加深入体会界面的设计以及各个各个空间属性的影响，更加准确的控制各个控件的位置

       2、考虑到屏幕适配的问题。在动手之前看一些屏幕适配的注意事项，将其应用到了开发过程中

       3、使用Hierarchy View来观察其他软件的布局。多观察其他成熟软件的布局设计，对自己开发很有帮助。

       4、通过反编译获取bitmap等资源。demo中的所有bitmap，均是使用的360手机卫士的bitmap资源，节省了很多时间。并且这些bitmap的命令都有规律，也比较好查找。

       5、多多练习各种布局的使用。在该demo中，使用的最多的布局是LinearLayout。 对于大多数界面，LinearLayout都能搞定。 对于比较复杂的界面。 各种布局嵌套是很必要的技巧。例如每个磁贴的布局，都是LinearLayout嵌套FrameLayout，再嵌套LinearLayout

       一点小技巧：  

    （1）将“height"在xml文件中，设置为0， 再在程序运行的动态中设定其高度。可以实现动态增加layout。

    （2）为实现侧滑效果，可以在屏幕外建立layout。这样程序启动时是不可见的，在程序运行过程中通过改变margin将其显示出来。

    （3）将"layout_height"或者"layout_width"设置为0，再通过设置layout_weight，可以实现height或width按比例显示。

    （4）android：src是设置图标，不会拉伸图片。而background是设置背景，会拉伸图片来适应空间。两者可同时使用。

    （5）android：visible可以用来实现一些特殊效果。

二、实现动画

       1、transformation动画效果，如图2所示。 其实是两个一样大的磁贴（LinearLayout），通过设置他们的topmargin与bottommargin实现的滑动效果。关键的步骤是，新建一个AsyncTask，在doInBackground中，每隔一段时间，计算一个滑动距离。

while(true)
			{
				distance = speed_Scroll +distance;
				if(distance>height_View)
				{
					distance = height_View;
					break;
				}
				publishProgress(distance);
				try {
					Thread.sleep(100);
				} catch (InterruptedException e) {
					e.printStackTrace();
				}	
			}

在onProgressUpdate中改变两个LinearLayout（命名为curtainLayout与layout）的topmargin与bottommargin。

curtainLayoutParams.topMargin = progress[0]-height_View;
			curtainLayout.setLayoutParams(curtainLayoutParams);
			layoutParams.topMargin = progress[0];
			layoutParams.bottomMargin = -progress[0];
			tileGUILayout.setLayoutParams(layoutParams);

         2、ViewFlipper滑动屏效果 。这个效果容易实现，使用android中的FlipperView类，建立一个GestureDetecor.onGestureListener来监听手势，重载OnFling事件，设置setInAnimation与setoutAnimation的动画

viewFlipper.setInAnimation(context, R.anim.push_left_in);
				viewFlipper.getChildAt(0).setVisibility(View.VISIBLE);
				viewFlipper.setOutAnimation(context, R.anim.push_left_out);
				viewFlipper.setDisplayedChild(1);	
				lastPosition = 1;

布局文件xml如下所示

 <ViewFlipper
                    android:id="@+id/flipperView"
                    android:layout_width="match_parent"
	                android:layout_height="match_parent">
	                
                    <include 
                    android:id = "@+id/flipperView1"
                    layout = "@layout/gridview1_main"/>
                    
                     <include 
                    android:id = "@+id/flipperView2"
                    layout = "@layout/gridview2_main"/>           
                </ViewFlipper>   

         3、工具栏侧滑效果，这个同1。特别说明的是，首页中的磁贴部分，是一个gridview。每一个磁贴，例如”骚扰拦截“，”手机清理“等，都是通过继承BaseAdapter，在其getItem函数中使用LayoutInflater.inflate动态加载的。

        UI开发部分，还是得多加练习，特别是各种动画，值得我们深入研究下去。不对的地方，还请各位多多指正