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

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

仿360手机卫士首页[android平台]_第1张图片

(2)transformation动画效果
仿360手机卫士首页[android平台]_第2张图片

(3)ViewFlipper滑动屏效果
仿360手机卫士首页[android平台]_第3张图片

(4)工具栏侧滑效
仿360手机卫士首页[android平台]_第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如下所示

    

 
  • 3 工具栏侧滑效果,这个同1。特别说明的是,首页中的磁贴部分,是一个gridview。每一个磁贴,例如”骚扰拦截“,”手机清理“等,都是通过继承BaseAdapter,在其getItem函数中使用LayoutInflater.inflate动态加载的。
      UI开发部分,还是得多加练习,特别是各种动画,值得我们深入研究下去。不对的地方,还请各位多多指正

你可能感兴趣的:(仿360手机卫士首页[android平台])