仿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开发部分，还是得多加练习，特别是各种动画，值得我们深入研究下去。不对的地方，还请各位多多指正